web-dev-qa-db-fra.com

Chargement paresseux d'images et d'effets sur le référencement

Nous utilisons la technique suivante pour charger des images paresseuses sur notre site:

Pour toutes les images, nous plaçons dans l'attribut src l'URL d'une img par défaut (c'est-à-dire un chargeur) et mettons l'URL de l'image réelle dans l'attribut data-src. Ainsi

<img src="loader.gif" data-src="img1.jpg" />

Lorsque l'image est en dehors de la fenêtre d'affichage, rien ne se produit, mais lorsque l'image entre dans la fenêtre, l'URL de l'attribut data-src est chargée et l'image est correctement affichée.

Cela a pour conséquence que Google voit toutes les images de la page (c'est-à-dire une page de résultats de recherche) comme ayant le même attribut src. Parce que le bot google ne traite bien sûr que la balise img 'non chargée' avec la valeur par défaut src.

Ma question est la suivante: le fait d'avoir plusieurs balises img avec le même attribut src affecte-t-il le référencement de la page?

seogoogle-searchjavascriptimagesgoogle-image-search
23
bmenekl

Je n'ai jamais vu le chargement paresseux d'images avoir un impact négatif sur les classements de recherche sur le Web. Améliorer les performances perçues de votre site par les utilisateurs peut réellement améliorer votre classement. Lorsque moins de personnes renvoient aux résultats de la recherche en raison de problèmes de performances de votre site, votre classement s'améliorera.

Google ne pourra pas indexer les images chargées paresseuses pour la recherche d'images. Il existe quelques solutions techniques possibles à la place, telles que:

  • utilisez les balises <noscript> qui affichent les images pour les utilisateurs dont JavaScript n'est pas activé (et les robots des moteurs de recherche)
  • Lien également vers vos images. La recherche d’image ne semble pas avoir d’importance particulière si l’image est dans l’img src ou dans l’a href. Ainsi, l'extrait de code suivant chargerait l'image paresseuse et l'image en taille réelle indexée dans la recherche d'image: <a href="/img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
10
Stephen Ostermiller

La plupart des moteurs de recherche indexeront les images masquées tant que vous n'utilisez pas de styles en ligne pour masquer l'image. La majorité des navigateurs ne chargeront pas les images cachées.

Il existe une page de test permettant de vérifier cette affirmation. Certains navigateurs mobiles plus anciens sont l'exception, mais je soutiens qu'un chargement paresseux sur les téléphones mobiles pourrait être contre-productif pour une bonne expérience de navigation.

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

Dans votre fichier CSS, ajoutez la modification suivante.

.lazy-img { display: none; }

Maintenant, vous pouvez charger une page avec des images paresseuses comme celle-ci et elles seront indexées.

<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>

Il est important d'inclure l'attribut title de l'image. Ou vous entourez la balise <img> d'un lien <a> et d'un texte de lien. Sinon, les moteurs de recherche associeront des mots-clés à l'image par distance de mot. Vous allez avoir tout ce mal pour le référencement, vous pourriez aussi bien aller jusqu'au bout.

Si vous utilisez ce qui précède tel quel. Rien ne montrera que les images sont cachées. Vous souhaitez supprimer cette classe au bas du document. La clé ici est d'utiliser du Javascript pur en ligne. Ce Javascript est exécuté immédiatement après la mise en page des éléments ci-dessus. Si vous chargez tous vos fichiers JS externes en bas (comme il se doit). Vous devez placer ce bloc Javascript au-dessus de ces fichiers. Pour qu'il n'y ait pas de décalage dans la modification du 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>

Maintenant, j'ai ajouté des conditions pour IE9 car il ne supporte pas getElementsByClassName à partir de 8 ans. Ce qui devrait arriver (non testé) est que ces navigateurs vont simplement charger l’image telle quelle.

L'avantage de cette approche est qu'elle garde le code HTML propre du point de vue du robot d'exploration Web.

1
Reactgular

Google a déclaré exécuter JavaScript avec ses robots, voir cet article pour plus d'explications.

Comme documenté, vous ne devez pas interdire à GoogleBot les fichiers statiques pour une analyse dynamique.

1
Zulu