La montée du Javascript a eu raison de Google, qui a enfin publié en octobre 2018 une documentation au sujet du Dynamic Rendering, tant attendue par les webmasters. Cette technique permet en effet aux sites web d'offrir une version statique des pages web au moteur de recherche (et à GoogleBot surtout), alors qu'elles sont habituellement générées à la volée grâce à Javascript (par des appels Ajax, des promesses, etc.).
Voici une déclaration de la documentation de Google qui reprend un peu ce que j'évoquais dans un récent article à propos de Javascript :
Actuellement, il est difficile de traiter JavaScript et tous les robots des moteurs de recherche ne sont pas en mesure de le traiter correctement ou immédiatement. Dans l’avenir, nous espérons que ce problème pourra être résolu, mais dans l’intervalle, nous recommandons le rendu dynamique comme solution de contournement à ce problème. Le rendu dynamique consiste à basculer entre un contenu restitué et pré-rendu côté client pour des agents utilisateurs spécifiques.
Attendue depuis l'annonce faite en mai 2018, cette documentation plutôt complète narre la solution pour être indexé quand Javascript est un frein. Désormais, peu de sites Javascript utilisant des frameworks reconnus devraient être freinés d'emblée par Google. Nuançons tout de même cet emballement car les pages restent fondées sur du Javascript et rien ne permet encore d'assurer que le taux d'indexation sera aussi fort qu'avec des sites "classiques" (en théorie, je ne vois pas de freins particuliers mais je préfère rester prudent...).
Comment fonctionne le Dynamic Rendering ?
La capture suivante résume le fonctionnement global du Dynamic Rendering pour les moteurs de recherche (SEO). Le serveur web doit capter et détecter les robots d'indexation en vérifiant le user-agent ("GoogleBot", "BingBot", "BaiduSpider", etc.). Ensuite, selon qu'un robot reconnu ou un autre type d'utilisateur est détecté, la méthode de rendu diffère. Dans le cas des internautes et mobinautes, le Javascript rend dynamiquement les contenus HTML dans le navigateur (ligne du haut sur la capture). En revanche, si un robot d'indexation comme GoogleBot est repéré, un premier rendu dynamique est généré, puis le moteur de prérendu créé une version statique en HTML de la page définitive. C'est cette dernière qui sera lue et indexée par le crawler (robot) et permettra à votre site d'être bien lu par les moteurs de recherche. La méthode rajoute une couche de complexité dans les programmes et frameworks Javascript, mais permet enfin d'obtenir de bons résultats en matière d'indexation et de positionnement...
Comment implémenter le Dynamic Rendering pour Javascript ?
La documentation explique tout en détail, je ne vais donc vous proposer qu'un résumé rapide ici de la méthode d'implémentation du Dynamic Rendering. Voyons donc comment procéder étape par étape :
- Installez et paramétrez le moteur de prérendu qui vous intéresse. Il en existe plusieurs mais sachez que la plupart sont payants, et plus ou moins chers selon le nombre de requêtes que vous voulez réaliser. Le plus connu est prerender.io mais voici une liste non exhaustive d'alternatives à utiliser selon le framework qui compose votre site web : prerender.com, SEO.js ou encore BromBone. Sachez tout de même que les deux moins chers du marché sont prerender.cloud et SEO4Ajax (qui a bonne réputation). Enfin, il existe deux solutions open source que sont Puppeteer (Google) et RenderTron si l'argent vous fait défaut. Il ne vous reste qu'à trouver la bonne formule... :-)
- Choisissez la liste des crawlers qui devraient recevoir un prerender en HTML pour que l'indexation soit facilité. Google fournit un exemple pour RenderTron dans sa documentation, mais il existe des équivalents pour la plupart des solutions alternatives.
- N'oubliez pas de faire respecter les règles de vitesse de chargement, car le prérendu est parfois mal généré et ralentit les pages. L'idéal est de bien mettre en cache les ressources nécessaires (HTML, CSS...) pour que le comportement soit bon. N'hésitez pas à effectuer des tests avec PageSpeed Insights ou les outils de développement de Google Chrome notamment.
- Ajoutez un système de détection pour retourner le contenu ordinateur ou mobile. En effet, il est important d'offrir le bon contenu prérendu au bon robot d'indexation. Selon le nom de l'agent utilisateur (user-agent), vous pouvez aisément repérer s'il s'agit d'un crawler pour mobile ou non (avec des mots clés comme "Android" et "mobile" notamment).
- Faites détecter les crawlers côté serveur, avec un système de redirection en fonction du nom de l'agent utilisateur en cours de visite. C'est un peu le système des pages satellites (cloaking) mais côté serveur, et surtout autorisé par Google. ;-)
Google invite les webmasters à effectuer de nombreux tests après la mise en œuvre d'un tel système. Il est vrai que le potentiel d'erreurs est important et il convient de tout bien vérifier pour assurer que les versions HTML de prérendu soient correctes, suffisamment rapides et surtout adaptés au support (mobile ou ordinateur notamment). La documentation fournit une petite F.A.Q. pour les cas d'erreurs typiques que vous pourriez rencontrer.
Cette documentation était très attendue et permet enfin d'assurer nos arrières en matière d'indexation des contenus dynamiques générés via Javascript. Cela n'enlève pas toutes les lacunes du langage en matière de SEO, mais retire une sacré épine du pied. Comme pour tout site web, c'est d'abord la qualité de l'implémentation et du code qui fera la réussite du site Javascript en SEO. Certes, GoogleBot et les autres crawlers ont vraiment du mal avec le langage, mais le prérendu devrait permettre de contourner bien des problèmes, en espérant que Google et les autres moteurs de recherche se penchent sérieusement sur les soucis d'indexation relatifs à cette technologie.