: Is this a good approach to image Lazy Loading for SEO? For images loaded via AJAX, or that I don't want indexed, use the data-* attribute approach: <img data-src="path/to/image.jpg" class="js-lazy-load"

@Nimeshi995

I have seen images loaded with this pattern:

<img data-src="path/to/image.jpg" class="js-lazy-load" />


get picked up by Google and Google Image Search and others have spotted it too. Since Google now executes javascript on your page, there may be no need to put the actual image into the src attribute. Neglecting a src attribute might lead to a grey border around your image, so probably best to go with something like:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />


Nb. this doesn't necessarily apply to other search engines.

Vote Up Vote Down

@Sims2060225

That's a good approach. Another approach you could take is to use the <noscript /> element to store the normal version of the img tag, which would be indexed by Google, and use JS to create the lazy loading version.

Alternatively, you could use Google's hashbang AJAX conventions combined with HTML5's history API to make bookmark- and index-able page states. This is especially preferable if you're doing some kind of infinite scroll page, as it provides a form of pseudo-pagination—something which most infinite scroll implementations desperately need (::cough:: Google Images ::cough::).


Edit: Using links as placeholders for the images could cause the PR flow from the page to be divided amongst more links, though PR is always conserved unless you use nofollow so in theory this would increase the PR of those images for image searches.

If you don't want that, or you want the page to degrade gracefully for non-JS users, you could go the opposite route and start with regular images but using blocking JS to substitute the src attribute of the images at page load (or even just delete the image elements and store the src attributes in your lazy loading queue). If you do it correctly, you can get this done before any of the images actually begin downloading.

Vote Up Vote Down