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).
la source
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.Réponses:
Voilà une bonne approche. Une autre approche que vous pourriez adopter consiste à utiliser l'
<noscript />élément pour stocker la version normale de laimgbalise, 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 utilisez
nofollow. 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 lessrcattributs dans votre file d'attente de chargement paresseux). Si vous le faites correctement, vous pouvez le faire avant le téléchargement des images.la source
<noscript>et je n'ai pas encore trouvé de moyen de bloquer le chargement des images dans Firefox; le remplacementsrc(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!noscripttexte dans les extraits, mais tout ce que j'ai lu me porte à croire qu'il indexe lenoscriptcontenu en général. Cependant, vous avez raison de remplacersrc. Ma pensée originale était de mettre unscriptavant 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.<script>document.write('<'+'!--');</script><img src=...><!---->. Vous devrez décider vous-même si c'est une approche acceptable.J'ai vu des images chargées avec ce motif:
ê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:
Nb. cela ne s'applique pas nécessairement aux autres moteurs de recherche.
la source