Une conférence au Google I/O présentée par Tom Greenaway & Jhon Mueller nous en apprend un peu plus sur les bonnes pratiques à avoir pour le développement d’un site full client side rendering , et s’assurer de la bonne indexabilitée de nos pages.

Avant d’aller plus loin, nous rappelons qu’il est de bonne pratique que d’avoir en server side rendering , tout les éléments importants de nos pages (Hreflang, canonical, index tags…). Donc si votre site est en JS, privilégier le rendering « server side », ou encore l’utilisation dudynamic rendering, aujourd’hui facilement accessible grâce à des technologies comme puppeteer ou Rendertron (lien github)

Si nous avons aujourd’hui la certitude que le code HTML est correctement pris en compte par les moteurs de recherche, qu’en est-il des sites générés en JS ? Comment Google réagit au JS (sans rendering côté serveur) ?

Ce qu’il faut retenir

Rendering côté client :

Pour Google (et pour les visiteurs aussi), générer des pages en JS demande beaucoup de ressource et d’énergie. C’est pourquoi l’indexation de ces pages se fait en deux temps :

  • Googlebot passe donc une première fois voir nos pages dans l’état (sans rendering) et indexe ce qu’il peut trouver dans le code. Si une partie du code est généré côté serveur, ce contenu sera directement et correctement assimilé.
  • Seulement après cela et lorsque Google pourra allouer les ressources nécessaires (potentiellement quelques jours après le premier crawl, eh oui …) , il enclenchera le rendering avant de recrawler la page et de la mettre à jour dans l’index.

Il est vrai que le rendering côté client permet d’économiser les ressources de nos serveurs, mais cette solution nous confronte à 2 problèmes évidents :

  • L’assimilation du contenu de la part de Google peut être longue.
  • Le contenu généré côté client ne se verra pas attribuer la même valeur que s’il avait été généré directement en HTML

Il est donc important, pour la bonne prise en compte de votre contenu et de vos performances, de réfléchir à la meilleure solution pour votre site. Et il n’y à pas de cas générique, toutes les solutions peuvent être correctes en fonction de vos besoins..

Gestion des canonical :

Pour rester dans le sujet du rendering côté client, une deuxième information importante a été dévoilé par Tom G.
Les balises canonical DOIVENT IMPÉRATIVEMENT être générées SERVER SIDE pour être lues et interprétées correctement.
En vue de cette nouvelle information, nous vous rappelons les bonnes pratiques sur les balises canoniques :

  • Elles doivent se trouver dans le Header (avant les scripts)
  • Si site en JS : Générer la balise serveurs side
  • Utiliser le balisage décrit dans la documentation de Google
  • Renseigner une URL en absolut et non pas relative

Astuce 
-> Sur votre navigateur, utiliser les combinaisons « Ctrl+U » pour voir le code source de la page, et donc vérifier si vos balises/contenus sont bien en place. Sinon, vous reste toujours la possibilité « d’explorer » la page comme le ferait Google à travers la Search-Console.

ATTENTION : Lorsque nous faisons clic droit > inspecter, nous avons le rendu après rendering. Un résultat donc biaisé sur ce que Google verra vraiment.

Pour revoir cette partie de la conférence, présenté par Tom Greenaway & Jhon Mueller :