0

I am using React and the library react-lazy-load-image-component

I do show LazyImages on top of the page but I notice that google is not indexing most of those images.

They do index them sometime, but other times not so I am confused.

In my use case I have only one "Post/Article" with the image on top (lazy-loaded) and below the title and the article content.

My React code is very simple

<LazyImage
                            className={'img-responsive'}
                            style={img.style}
                            src={img.src}
                            alt={img.alt}
                            placeholderSrc={
                                'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
                            }
                        />

The html coming from the server is

<span class=" lazy-load-image-background "
      style="background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);background-size:100% 100%;display:inline-block"><span
        class="img-responsive" style="display:inline-block"></span></span></a></p>
<h1>Article title</h1>
<p>First paragraph of the article</p>

That does not seem seo friendly to me. I believe this library need to include data-src or something like that in the server-side rendered content as well for the search engines to wait and index the images.

What are your thoughts?

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.