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

23

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

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

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

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

Cela a pour résultat que Google voit toutes les images de la page (c'est-à-dire une page de résultats de recherche) comme ayant le même srcattribut. Parce que le robot Google analyse bien sûr uniquement la balise img «déchargée» avec la valeur par défaut src.

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

seo google-search javascript images google-image-search bmenekl
la source
2
Je pense que le titre et l'alt appropriés représentent 90% du travail. Nom de fichier moins. Cela peut affecter les résultats dans Google Images, je suppose
Martijn
voir aussi: webmasters.stackexchange.com/questions/26190/…
Salman A
Cela pourrait certainement affecter le nombre d'images que vous avez indexées dans Google Image Search. Vous posez des questions à ce sujet, ou à propos de tout effet que cela aurait sur le classement pour une recherche Web normale?
Stephen Ostermiller
@StephenOstermiller ma principale préoccupation est le classement, mais tout effet (immédiat ou secondaire) sur le référencement est intéressant
bmenekl
Cette question a été posée sur StackOverflow mais elle n'a pas de bonnes réponses à mon avis.
Stephen Ostermiller

Réponses:

10

Je n'ai jamais vu de chargement paresseux d'images avoir un impact négatif sur les classements de recherche sur le Web. L'amélioration des performances perçues de votre site pour les utilisateurs peut vraiment aider vos classements. Lorsque moins de personnes rebondissent sur les résultats de recherche en raison de problèmes de performances avec votre site, votre classement s'améliore.

Google ne sera pas en mesure d'indexer les images chargées paresseuses pour la recherche d'images. Il existe à la place quelques correctifs techniques tels que:

  • utiliser des <noscript>balises qui montrent les images pour les utilisateurs qui n'ont pas activé JavaScript (et les robots des moteurs de recherche)
  • Lien également vers vos images. Il ne semble pas important de rechercher une image si l'image est dans l'img src ou dans l'a href. Ainsi, l'extrait suivant obtiendrait l'image paresseuse chargée et l'image pleine taille indexée dans la recherche d'images: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
Stephen Ostermiller
la source
3
Je ne compterais pas sur "noscript" - nous voyons beaucoup de spam essayer de l'utiliser, donc nous ne sommes pas toujours suffisamment confiants pour faire confiance au contenu qui y est placé. J'aime l'idée d'utiliser des liens vers les images. En général, si une image est l'un des principaux éléments d'une page, j'aurais toujours tendance à l'intégrer naturellement (au moins une version de celle-ci, si vous utilisez des tailles différentes) afin d'être sûr qu'elle est indexée normalement. Nous travaillons sur une meilleure histoire pour cela, mais je ne vois pas que cela change aujourd'hui ou demain.
John Mueller
1
En utilisant votre tactique, vous pouvez essayer un wrapper <a> si vos images sont déjà entourées d'un lien pour des produits ou quelque chose: <a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>le lien interne prend le clic de l'interface utilisateur, tandis que l'extérieur doit toujours fonctionner pour les robots d'indexation d'images.
dhaupin
1
Cette réponse est-elle également valable pour 2017? Surtout "Google ne sera pas en mesure d'indexer les images chargées paresseuses pour la recherche d'images." Donc, même si nous avons 10 images dans le message, Google pense que nous n'avons pas d'images?
Je suis la personne la plus stupide du
C'est toujours le cas, mais vous pouvez toujours créer un lien vers vos images pour les indexer.
Stephen Ostermiller
1

La plupart des moteurs de recherche indexent les images masquées tant que vous n'utilisez pas de styles intégrés pour masquer l'image. La majorité des navigateurs ne chargeront pas d' images cachées.

Une page de test peut vérifier cette affirmation. Certains anciens navigateurs mobiles sont l'exception, mais je soutiens que le 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; }

Vous pouvez maintenant 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' titleattribut de l'image. Ou vous entourez la <imgbalise> avec un lien <a> balise et le texte du lien. Sinon, les moteurs de recherche associeront des mots clés à l'image par distance de mot. Vous allez avoir tous ces ennuis pour le référencement, autant aller jusqu'au bout.

Si vous utilisez ce qui précède tel quel. Rien ne s'affichera car 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 vous devriez). Vous devez placer ce bloc Javascript au-dessus de ces fichiers. Pour qu'il n'y ait aucun 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 prend pas en charge les versions getElementsByClassName8 et antérieures. Ce qui devrait arriver (non testé) est que ces navigateurs chargeront simplement l'image telle quelle.

L'avantage de cette approche est qu'elle garde le HTML propre du point de vue du webcrawler.

Reactgular
la source
1
J'étais curieux et j'ai essayé la page de test. Les derniers Chrome et Safari sur Mac semblent charger l'image. Pas si sûr que ce soit très fiable après tout, malheureusement ...
Pevara
Malheureusement avec cette méthode, les images sont toutes paresseuses au bas du document (pas mal), mais comme je l'explique dans ma question, dans mon approche, les images ne sont chargées paresseuses que lorsqu'elles entrent dans la fenêtre. Ainsi, toute image qui n'entre pas dans la fenêtre d'affichage (c'est-à-dire que l'utilisateur final ne défile pas ainsi vers le bas dans la page) ne sera pas du tout chargée. Dans une page avec beaucoup d'images, c'est vraiment important
bmenekl
@bmenekl Non, cette réponse n'effectue pas de chargement paresseux. Il modifie uniquement le code HTML lorsqu'il est affiché dans un navigateur compatible javascript afin qu'un script tiers puisse effectuer un chargement paresseux.
Reactgular
1

Google a déclaré exécuter JavaScript avec ses robots, consultez ce post pour plus d'explications.

Comme indiqué, vous ne devez pas interdire les fichiers statiques à GoogleBot pour l'exploration dynamique.

zoulou
la source