Recommandations adaptées au référencement pour le défilement infini (infinite scroll)

Jeudi 13 février 2014

Le fil d’actualité ou le tableau d’affichage de votre site peut utiliser
infinite scroll— pour le plus grand plaisir de vos utilisateurs ! Cependant, lorsqu’il s’agit de plaire à Googlebot, c’est une autre histoire. Avec le défilement infini, les robots d’exploration ne peuvent pas toujours imiter le comportement manuel de l’utilisateur (comme faire défiler ou cliquer sur un bouton pour charger plus d’éléments) et n’accèdent donc pas toujours à tous les éléments individuels du fil ou de la galerie. Si les robots ne peuvent pas accéder à votre contenu, il est peu probable qu’il apparaisse dans les résultats de recherche.

Pour vous assurer que les moteurs de recherche peuvent explorer les éléments individuels liés à partir d’une page à défilement infini, assurez-vous que vous ou votre système de gestion de contenu produisez une série paginée (pages de composants) pour accompagner votre défilement infini.

Vous pouvez voir ce type de comportement en action dans la
démo de défilement infini avec pagination
créée par l’analyste des tendances des webmasters,
John Mueller. La démonstration illustre quelques points clés adaptés aux moteurs de recherche :

• Couverture: Tous les éléments individuels sont accessibles. Avec le défilement infini traditionnel, les éléments individuels affichés après le chargement initial de la page ne sont pas détectables par les robots d’exploration.
• Pas de chevauchement: Chaque élément n’est répertorié qu’une seule fois dans la série paginée (par exemple, pas de duplication d’éléments).

Recommandations adaptées au référencement pour le défilement infini

1. Avant de commencer

1. Divisez le contenu de votre page à défilement infini en pages de composants accessibles lorsque JavaScript est désactivé.
2. Déterminez la quantité de contenu à inclure sur chaque page.
   1. Assurez-vous que si un internaute arrivait directement sur cette page, il pourrait facilement trouver l’élément exact qu’il souhaitait (par exemple, sans faire défiler excessivement la page avant de localiser le contenu souhaité).
   2. Maintenez un temps de chargement de page raisonnable.

3. Divisez le contenu de manière à ce qu’il n’y ait pas de chevauchement entre les pages de composants de la série (à l’exception de la mise en mémoire tampon).

   

2. Structurez les URL pour le traitement du défilement infini par les moteurs de recherche

1. Chaque page de composant contient une URL complète. Nous recommandons des URL complètes dans cette situation pour minimiser les risques d’erreur de configuration.

   • Bon:
     example.com/category?name=fun-items&page=1
   • Bon:
     example.com/fun-items?lastid=567
   • Moins optimal:
     example.com/fun-items#1
2. Testez que chaque page de composant (l’URL) fonctionne pour amener quiconque directement au contenu et qu’elle est accessible et référençable dans un navigateur sans le même cookie ou historique utilisateur.

3. Tous les paramètres d’URL de clé et de valeur doivent suivre ces recommandations :

   • Assurez-vous que l’URL affiche conceptuellement le même contenu dans deux semaines. Évitez les paramètres d’URL basés sur le temps relatif :
     example.com/category/page.php?name=fun-items&days-ago=3
   • Créez des paramètres capables de faire surface à du contenu précieux pour les internautes. Évitez d’utiliser des paramètres sans valeur pour la recherche comme méthode principale pour accéder au contenu :
     example.com/fun-places?radius=5&lat=40.71&long=-73.40

3. Implémentez replaceState et pushState

Implémentez
replaceState et pushState
sur la page à défilement infini. La décision d’utiliser l’un ou les deux vous appartient et dépend du comportement des utilisateurs de votre site. Cela étant dit, nous vous recommandons d’inclure pushState
(seul ou en conjunction avec replaceState) pour les cas suivants :

• Toute action de l’utilisateur qui ressemble à un clic ou au fait de tourner activement une page.
• Pour offrir aux utilisateurs la possibilité de revenir en arrière de manière sérielle à travers le contenu paginé le plus récent.

4. Tester

1. Vérifiez que les valeurs de la page s’ajustent à mesure que l’utilisateur fait défiler vers le haut ou vers le bas.
2. Vérifiez que les pages qui sont hors limites dans la série renvoient une 404 réponse (par exemple, example.com/category?name=fun-items&page=999 devrait renvoyer une
   404 réponse s’il n’y a que 998 pages de contenu).
3. Étudiez les implications potentielles
   sur l’ergonomie introduites par votre implémentation du défilement infini.

Rédigé, examiné ou codé par
John Mueller,
Maile Ohye, et
Joachim Kupke