De nombreux sites prennent aujourd'hui en compte la technique dite du « scroll infini » ou « infinite scroll » pour leur interface utilisateur. En d'autres termes, l'internaute visualise un contenu de départ qui s'étoffe au fur et à mesure que la page est scrollée vers le bas. Ces techniques, à base de Javascript et d'Ajax, sont nativement très peu compatibles avec la compréhension par Google des contenus affichés, ce qui génère de gros problèmes SEO. Il est donc nécessaire de coder ce type de site de façon très précise et adéquate pour les rendre « Google friendly ». Ce qui n'est pas, il faut bien le dire, le cas de très nombreux sites actuels utilisant ce type d'interface...

Début de l'article :

Les “long scrolling pages” ou “infinite scrolling pages” (pages à défilement infini ou pages infinies en français) sont à la mode et fleurissent de plus en plus sur les sites web. Ces pages font une utilisation intensive du Javascript et de fonctionnalités Ajax. Or, sans précautions particulières, l’emploi de ces techniques peut poser de sérieux problèmes de référencement. Google s’en est inquiété et a diffusé des recommandations pour créer un code crawlable par ses robots.

Nous allons voir dans cet article comment coder correctement ces pages pour conserver une expérience utilisateur avancée, tout en gardant un contenu indexable par les moteurs.

Qu’est-ce qu’une “infinite scrolling page” ?

Lorsqu’une page web utilise la technique des « pages à défilement infini », un nouveau contenu est chargé dynamiquement à chaque fois que l’utilisateur fait glisser la page vers le bas. Ce contenu est en général chargé de manière asynchrone en Ajax. Suivant la quantité de données qu’il est possible d’afficher, l’utilisateur aura l’impression soit de consulter une très longue page (il finit par atteindre le dernier item), soit même de consulter une page de taille infinie...

L’un des exemples les plus connus d’utilisation de ce type d’interface utilisateur sont les pages de résultats de Google Images et de Bing Images. Mais on les trouve aussi sur un grand nombre d’outils sociaux (Tumblr, Pinterest...), comme chez certains sites éditoriaux et même sur des sites e-commerce.

...


Fichier PDF téléchargeable ici (la lettre Réacteur n'était à cette époque-là disponible que sous cette forme).