Est-ce une bonne approche du chargement d'images paresseux pour le référencement?

14

Pour les images chargées via AJAX, ou que je ne veux pas indexer, utilisez l'approche d'attribut data- *:

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

Le javascript mappe l' attribut data-src à l' attribut src :

<img src="path/to/image.jpg" />

Mais pour les images dans le code HTML que je ne 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 d' image :

<img src="path/to/image.jpg" alt="Image alt text here" />

Semble préserver la capacité d'indexation et l' intention de la page (pour l'accessibilité) sans affecter le référencement (espérons-le). Mais j'aimerais un deuxième avis.

Modifier: tout commentaire sur la façon dont cette approche - page avec des liens vers des images par rapport à une page avec des balises IMG en ligne - se comparerait en termes de classement de page. Je suppose que les balises IMG en ligne se porteraient mieux car chaque lien sortant nuirait au classement général de la page (à moins qu'ils n'aient rel = "nofollow" qui serait contre-productif).

seo google javascript

— Aeron
source

Les liens sortants ne nuisent pas au classement de votre page. Ce n'est pas ainsi que les relations publiques fonctionnent.

— Lèse majesté

Le nombre total de liens sortants nuirait-il au RP que chaque lien possède? Donc, si à l'origine la page avait 5 liens - chacun avec 20% de RP - mais avec cette approche, il y en aurait 50 - chacun aurait-il maintenant 2%?

— Aeron

C'est correct. Le nombre de relations publiques transmises est divisé par le nombre de liens sur la page, mais en raison de la nofollowcréation de relations publiques, les liens sont désormais également inclus lors de la division des relations publiques entre les liens. Donc, même si vous avez 45 liens nofollow et 5 liens réguliers, les 5 liens réguliers ne transmettront toujours que 2% du jus de liens. Bien que si Google était intelligent, ils traiteraient les liens d'image différemment des liens HTML, car votre solution est valide pour la convivialité et l'accessibilité, et elle ne devrait pas être découragée en diluant votre flux de relations publiques.

— Lèse majesté

10

Voilà une bonne approche. Une autre approche que vous pourriez adopter consiste à utiliser l' <noscript />élément pour stocker la version normale de la imgbalise, qui serait indexée par Google, et à utiliser JS pour créer la version à chargement différé.

Alternativement, vous pouvez utiliser les conventions AJAX de hashbang de Google combinées avec l'API historique de HTML5 pour créer des états de page pouvant être mis en signet et indexés. C'est particulièrement préférable si vous faites une sorte de page de défilement infini, car elle fournit une forme de pseudo-pagination - quelque chose dont la plupart des implémentations de défilement infini ont désespérément besoin ( :: cough :: Google Images :: cough ::) .

Modifier: l' utilisation de liens en tant qu'espaces réservés pour les images peut entraîner la division du flux de relations publiques de la page entre plusieurs liens, bien que les relations publiques soient toujours conservées, sauf si vous utiliseznofollow . En théorie, cela augmenterait le RP de ces images pour les recherches d'images.

Si vous ne voulez pas cela, ou si vous voulez que la page se dégrade gracieusement pour les utilisateurs non JS, vous pouvez emprunter la voie opposée et commencer avec des images normales, mais en utilisant le blocage de JS pour remplacer l' srcattribut des images au chargement de la page (ou même il suffit de supprimer les éléments d'image et de stocker les srcattributs dans votre file d'attente de chargement paresseux). Si vous le faites correctement, vous pouvez le faire avant le téléchargement des images.

— Lèse majesté
source

2

J'aimerais voir ça - Google ne regarde pas <noscript>et je n'ai pas encore trouvé de moyen de bloquer le chargement des images dans Firefox; le remplacement src(même avec une <script>balise immédiatement après la <img>balise) ne semble pas empêcher le téléchargement de l'image dans la dernière version de Firefox. Si vous connaissez une autre façon de procéder, partagez-la!

— mindplay.dk

@ mindplay.dk: Google peut choisir de ne pas utiliser de noscripttexte dans les extraits, mais tout ce que j'ai lu me porte à croire qu'il indexe le noscriptcontenu en général. Cependant, vous avez raison de remplacer src. Ma pensée originale était de mettre un script avant la première image, afin qu'il bloque le chargement des images jusqu'à ce que le script soit chargé et exécuté. Mais après un examen plus approfondi, cela ne fonctionnerait pas puisque les images n'apparaîtraient pas dans le DOM à ce stade. Vous pouvez bloquer le téléchargement en maximisant les connexions simultanées à l'hôte, mais ce n'est pas pratique de nos jours.

— Lèse majesté

Une personne hack sale autre est venu avec est d'utiliser JS pour commenter les images libres JS comme si (il y a une version plus longue qui traite de l' analyse spéculative): <script>document.write('<'+'!--');</script><img src=...>. Vous devrez décider vous-même si c'est une approche acceptable.

— Lèse majesté

2

J'ai vu des images chargées avec ce motif:

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

être récupéré par Google et Google Image Search et d'autres l'ont également repéré . Étant donné que Google exécute maintenant le javascript sur votre page, il n'est peut-être pas nécessaire de mettre l'image réelle dans l'attribut src. La négligence d'un attribut src peut entraîner une bordure grise autour de votre image, il est donc préférable de choisir 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.

— Willster
source