Corriger le contenu à chargement différé

Différer le chargement du contenu non critique ou non visible, également connu sous le nom de « chargement différé » (lazy-loading), est une bonne pratique courante en matière de performance et d’UX. Pour plus d’informations, consultez les ressources de web.dev sur le chargement différé des images et des vidéos.
Toutefois, si elle n’est pas correctement mise en œuvre, cette technique peut masquer par inadvertance du contenu à Google. Ce document explique comment s’assurer que Google peut explorer et indexer le contenu à chargement différé.

Charger le contenu lorsqu’il est visible dans la zone d’affichage (viewport)

Pour vous assurer que Google voit tout le contenu de votre page, veillez à ce que votre implémentation du chargement différé charge tout le contenu pertinent dès qu’il est visible dans la zone d’affichage. Voici quelques méthodes pour implémenter le chargement différé :

• Chargement différé intégré au navigateur pour les images et les iframes
• API IntersectionObserver et un polyfill
• Une bibliothèque JavaScript qui prend en charge le chargement des données lorsqu’elles entrent dans la zone d’affichage

Les méthodes mentionnées ne dépendent pas des actions de l’utilisateur, telles que le défilement ou le clic, pour charger le contenu, ce qui est important car la recherche Google n’interagit pas avec votre page.

N’ajoutez pas le chargement différé au contenu qui est susceptible d’être immédiatement visible lorsqu’un utilisateur ouvre une page. Cela pourrait prendre plus de temps pour charger et afficher le contenu dans le navigateur, ce qui sera très perceptible pour l’utilisateur.

Veillez à tester votre implémentation.

Prendre en charge le chargement paginé pour le défilement infini

À un niveau élevé, le défilement infini est une technique qui charge plus de contenu, des pages plus distinctes, au fur et à mesure que l’utilisateur fait défiler une longue page. Il peut s’agir d’un long article divisé en plusieurs blocs, ou d’une collection d’éléments également divisée en blocs. Pour implémenter le défilement infini de manière indexable, assurez-vous que votre site Web prend en charge le chargement paginé de ces blocs en procédant comme suit :

• Attribuez à chaque bloc sa propre URL persistante et unique.
• Assurez-vous que le contenu affiché sur chaque URL reste le même chaque fois qu’il est chargé dans un navigateur. Pour ce faire, vous pouvez notamment utiliser des numéros de page absolus dans l’URL, par exemple en utilisant
  ?page=12 comme paramètre de requête.
• Évitez d’utiliser des éléments relatifs tels que ?date=yesterday dans ces URL. Cela permet aux moteurs de recherche et aux utilisateurs de trouver de manière cohérente le même contenu sous une URL donnée, ce qui permet aux moteurs de recherche d’indexer correctement le contenu et aux utilisateurs de partager et de réinteragir avec cette partie de votre contenu.
• Établissez des liens séquentiels vers les URL individuelles afin que les moteurs de recherche puissent découvrir les URL dans un ensemble paginé. En savoir plus sur
  les meilleures pratiques lors de l’implémentation de la pagination.
• Lorsqu’un nouveau bloc de page est chargé en réponse au défilement de l’utilisateur et qu’il devient le principal élément visible pour l’utilisateur, mettez à jour l’URL affichée à l’aide de
  l’API History.
  Cela permet à l’utilisateur d’actualiser, de partager et de faire un lien vers l’URL actuelle affichée dans le navigateur.

Tester

Une fois votre implémentation configurée, assurez-vous qu’elle fonctionne correctement.
Vous pouvez utiliser l’ outil d’inspection d’URL dans Search Console pour vérifier si tout le contenu a été chargé.
Vérifiez le HTML rendu pour vous assurer que votre contenu s’y trouve en le recherchant dans l’outil d’inspection d’URL. Si les URL de vos images ou de vos vidéos apparaissent dans l’attribut src sur les éléments <img> ou <video> dans le HTML rendu, votre configuration fonctionne correctement.