Est-ce une bonne approche de l’image Lazy Loading pour le référencement?
Pour les images chargées via AJAX, ou que je ne pas veux indexer, utilisez l'approche attribut data- *:
<img data-src="path/to/image.jpg" class="js-lazy-load" />
Le javascript associe l'attribut data-src à l'attribut src :
<img src="path/to/image.jpg" />
Mais pour les images dans le HTML que je do veux indexé:
<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>
Le javascript remplace l’ancre par une balise image :
<img src="path/to/image.jpg" alt="Image alt text here" />
Semble que préserverait la capacité d'indexation et l'intention de la page (pour l'accessibilité) sans affecter le référencement (espérons-le). Mais aimerais un deuxième avis.
Edit: Tout commentaire sur la manière dont cette approche - page avec liens vers des images contre page avec balises IMG en ligne - serait comparable en ce qui concerne la page rang. J'imagine que les balises IMG en ligne se porteraient mieux, car chaque lien sortant nuirait au classement général de la page (à moins que rel = "nofollow" n'en soit contre-productif).
J'ai vu des images chargées avec ce motif:
<img data-src="path/to/image.jpg" class="js-lazy-load" />
être pris en charge par Google et Google Recherche d'images et d'autres l'ont repéré aussi. Comme Google utilise maintenant exécute javascript sur votre page, il n’est peut-être pas nécessaire de placer l’image réelle dans l’attribut src. Négliger un attribut src peut entraîner une bordure grise autour de votre image, il est donc probablement préférable d’utiliser quelque chose comme:
<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />
Nb. cela ne s'applique pas nécessairement aux autres moteurs de recherche.