Does lazy loading affect SEO?

Lazy loading of images and effects on SEO


We use the following technique to load images on our website:

For all images we have inserted a URL for a standard IMG (ie a loader) into the attribute and the actual image URL into the attribute. How so

If the image is outside the viewport, nothing happens. However, if the image is inside the viewport, the URL of the attribute will be loaded and the image will display correctly.

As a result, Google sees all images on the page (ie a search results page) as having the same attribute. Since the Google Bot naturally only analyzes the "unloaded" img tag with the standard setting.

My question is: Does the presence of many img tags with the same attribute influence the SEO of the page ?






Reply:


I've never seen image slow loading negatively affect web search rankings. Improving the perceived performance of your website for users can significantly improve your rankings. If fewer people return to search results due to performance issues with your website, your ranking will improve.

Google is unable to index delayed images for image search. Instead, there are some possible technical fixes like:

  • Use tags that display images to users who don't have JavaScript enabled (and search engine bots).
  • Link to your pictures as well. It does not seem to matter for the image search whether the image is in the image source code or in the image source code. The following snippet would load the image lazily and index the full-size image in the image search:





Most search engines index images that are hidden as long as you don't use inline styles to hide the image. Most browsers load no hidden pictures.

There is a test page that can verify this claim. Some older mobile browsers are the exception, but I contend that slow loading on mobile phones could be counterproductive to a good browsing experience.

http://www.w3.org/2009/03/image-display-none/test.php

Add the following change to your CSS file.

Now you can load a page with such lazy images and they will be indexed.

It is important that you provide the attribute for the image. Or you surround the> tag with a> tag and a link text. Otherwise, search engines assign keywords to the image according to word spacing. You're going to have all of these difficulties for SEO that you might as well go all the way.

If you use the above as it is. Nothing is displayed because the images are hidden. You want to remove this class at the bottom of the document. The key here is to use pure inline Javascript. This Javascript will be executed immediately after the layout of the above elements is completed. If you load all of your external JS files below (as you should). You should place this javascript block over these files. So that there is no delay in changing the DOM.

Now I've added conditions for IE9 as it's not supported in 8 and older versions. What should happen (not tested) is that these browsers load the image as it is.

The advantage of this approach is that the HTML code stays clean from the web crawler's point of view.





Google has stated that they want their bots to run JavaScript. You can find more information on this in this post.

As documented, you are not allowed to prohibit static files for dynamic crawling on GoogleBot.

We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.

By continuing, you consent to our use of cookies and other tracking technologies and affirm you're at least 16 years old or have consent from a parent or guardian.

You can read details in our Cookie policy and Privacy policy.