: Lazy loading images and effects on SEO We are using the following technique to lazy load images in our site: For all images we put in the src attribute a url for a default img (i.e. a loader)
We are using the following technique to lazy load images in our site:
For all images we put in the src attribute a url for a default img (i.e. a loader) and put the actual image url in the data-src attribute. Like so
<img src="loader.gif" data-src="img1.jpg" />
When the image is outside of the viewport nothing happens, but when the image goes inside the viewport, then the url from the data-src attribute is loaded and the image is correctly shown.
This has as a result that Google sees all the images in the page (i.e. a search results page) as having the same src attribute. Because the google bot of course parses only the 'unloaded' img tag with the default src.
My question is: does having many img tags with the same src attribute affect the SEO of the page?
More posts by @Welton855
3 Comments
Sorted by latest first Latest Oldest Best
Google declared to execute JavaScript with their bots, see this post for more explanation.
As documented you mustn't forbid static files to GoogleBot for dynamic crawling.
Most search engines will index images that are hidden as long as you don't use inline styles to hide the image. The majority of browsers will not load hidden images.
There is a test page that can verify this claim. Some older mobile browsers are the exception, but I argue lazy loading on mobile phones could be counter productive to a good browsing experience.
www.w3.org/2009/03/image-display-none/test.php
In your CSS file add the following modification.
.lazy-img { display: none; }
Now you can load a page with lazy images like this and they will be indexed.
<body>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>
It's important that you include the title attribute for the image. Or you surround the <img> tag with a link <a> tag and link text. Otherwise search engines will associate keywords with the image by word distance. You're going to all this trouble for SEO you might as well go all the way.
If you use the above as is. Nothing will show as the images are hidden. You want to remove this class at the bottom of the document. The key here is to use inline pure Javascript. This Javascript is executed immediately after layout of the above elements are finished. If you load all your external JS files at the bottom (as you should). You should place this Javascript block above those files. So that there is no lag in modifying the DOM.
<body>
<!--[if lte IE 8]
<style type="text/css">.lazy-img { display: block !important; }</style>
[endif]-->
<noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
<img class="lazy-img" src="img1.jpeg" title="image title"/>
<img class="lazy-img" src="img2.jpeg" title="image title"/>
<img class="lazy-img" src="img3.jpeg" title="image title"/>
<img class="lazy-img" src="img4.jpeg" title="image title"/>
<![if gte IE 9]>
<script type="text/javascript">
var images = document.getElementsByClassName('lazy-img');
Array.prototype.forEach.call(images, function(image){
image.setAttribute("data-src",image.getAttribute("src"));
image.setAttribute("src","loading.gif");
});
while(images.length > 0) { images[0].className = ""; }
</script>
<![endif]>
</body>
Now I added conditionals for IE9 since it doesn't support getElementsByClassName in 8 and older. What should happen (not tested) is that those browsers will just load the image as is.
The advantage of this approach is it keeps the HTML looking clean from the perspective of the webcrawler.
I've never seen image lazy loading have any negative impact on web search rankings. Improving the perceived performance of your site for users can really help your rankings. When fewer people bounce back to the search results because of performance problems with your site, your rankings will improve.
Google will not be able to index lazy loaded images for image search. There are some possible technical fixes instead such as:
use <noscript> tags that show the images for users that don't have JavaScript enabled (and search engine bots)
Also link to your images. It doesn't seem to matter to image search whether the image is in the img src or in the a href. So the following snippet would get the image lazy loaded and the full size image indexed in image search: <a href="/img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.