Les bonnes pratiques SEO avec les Frameworks JavaScript (React, Vue, Angular,…)

Ecrit par Peak Ace
le 19 / 11 / 2020

Début mars, le SEOCamp accueillait Cédric Rambaud et Philippe Yonnet pour une conférence sur l’approche SEO à adopter face à des sites full JavaScript.
Au cours de cette conférence, ils ont expliqué comment se comportaient les moteurs de recherche face à ces sites et surtout comment il est possible de se positionner avec cette technologie.
D’abord, malgré sa complexité et son incompatibilité avec les moteurs la popularité des Framework JavaScript ne cesse de croître. Ces fonctions prédéfinis présentent de nombreux avantages :

• Technologie moderne proposant de nouveau design et des interfaces riches.
• Plus une application qu’un site web.
• Amélioration de l’ergonomie et de l’expérience utilisateur.
• Un seul langage pour créer un site.

Mais qu’en est-il pour nous les SEO ?

Fonctionnement des infrastructures JavaScripts.

Contrairement à un site classique qui suit le modèle de communication client-serveur, une application fondée sur JavaScript (Ajax et autres applications web) suit le modèle du “client-side rendering” à savoir :
La première requête charge le layout de la page, le CSS et le JavaScript. Il est fréquent qu’une partie ou tout le contenu ne soit pas chargé. Ensuite, le JavaScript envoie une seconde requête au serveur qui répond en JSON pour enfin générer le HTML approprié.

Aujourd’hui, côté client 4 solutions s’affrontent BackBone, Knockout.JS, Ember.JS et AngularJS portées par Google.

Ce modèle de développement soulève plusieurs problèmes.
 
Challenge n°1  :
Pour explorer un site full JS le bot télécharge le code HTML et analyse le contenu présent dans le code.
Le contenu en JS et Ajax est ignoré dans la plupart des cas à l’exception de Googlebot avec son headless browser.
 
Challenge n°2 :
Quoi indexer ? Le contenu change régulièrement en fonction des interactions.
Quels signaux ? Comment analyser les liens et le contenu d’une page ?
À quoi rattacher ces signaux ? Si la notion d’une page reliée à une URL a disparu, comment continuer à utiliser l’algorithme actuel ?

Challenge n°3 :
La rendition d’un site en full AngularJS n’est possible que si le JS est activé, dans le cas contraire le site est tout simplement invisible. Il est aussi difficile aux moteurs de recherche d’accéder aux contenus de ces sites pour les indexer, car le code source n’affiche que des variables.

Il n’est donc pas étonnant de constater un impact non négligeable sur la visibilité SEO de ces sites …

Il n’est donc pas étonnant de constater un impact non négligeable sur la visibilité SEO de ces sites ..

Google et le JavaScript

Aujourd’hui, on sait que Google interprète le JS qui génère des title, meta description, robots meta tags : test à l’appui .

• Google comprend les fichiers CSS et JS pour identifier une page mobile friendly ou détecter des éléments cachés.
• Google sait lire les événements Onclick,
• Google peut donc suivre les contenus générés dynamiquement dans le JS pour les indexer.

Mais de là à penser que Google peut tout lire est faux.  Dans le cas de l’Ajax qui ne nécessite pas événements pour être chargé, le moteur ne détecte aucun signal pour savoir comment déclencher l’Ajax.
Pour mieux crawler et indexer l’Ajax, Google proposait en 2009 la technique du hashbang  (#!). Techniquement, lorsque le robot rencontre une URL avec un hashbang il va crawler cette page et remplacer le hashbang par _escaped_fragment_ puis il va indexer la page sous sa forme d’origine. Mais aujourd’hui, cette technique est obsolète car Google prétend pouvoir lire les contenus générés en Ajax…
La méthode du pushstate proposé par l’IP history de HTML5 est une solution plus pérenne car les URL de navigation dynamique restent identiques. Elle a aussi l’avantage de permettre la navigation même lorsque l’internaute désactive le JavaScript car elle est incluse dans le HTML5. Concrètement, pushstate() change le chemin de l’URL qui apparaît dans la barre d’adresse de l’utilisateur. Pour le SEO c’est parfait, les moteurs peuvent lire ces URL et les différencier les unes des autres.
Il faut savoir que Google recommande aussi l’implémentation du Pushstate pour rendre son scroll infini SEO friendly.

Positionner un site utilisant un Framework JavaScript

Crawler et indexer un site réalisé avec un Framework JavaScript est possible, mais ce qui nous intéresse est de positionner nos pages.

1/ Auditer son site

Dans un premier temps, si le test Fetch as Google ne parvient pas à rendre la page comme prévu. Il y a un problème.
La solution réside dans le headless browser : Un browser “headless” est un environnement logiciel pilotable en ligne de commande disposant d’un API JavaScript capable de rendre une page HTML complète en exécutant le HTML, CSS et JS tout comme un navigateur. On parle de headless car il ne dispose pas de GUI (d’interface utilisateur).
On peut simuler tout ce qui se passe dans le navigateur et donc tester les codes générés par les Framework JS et Ajax.
Remarque : ce type de crawl crée de “fausses visites” dans les outils de webanalytics (car ils exécutent tous les scripts sans exception).
Phantom JS et Casper JS sont des headless browser, le dernier a la particularité d’être un scrapper.
Vous pouvez aussi auditer avec Screaming Frog en mode “crawl JavaScript”.
Screaming Frog est un crawler orienté SEO, il dispose depuis peu d’un mode “headless browser” basé sur PhantomJS. Il peut ainsi crawler un site full Angular.

Depuis Janvier 2017, Botify offre également cette possibilité.

2/ Comment rendre ces sites SEO Friendly ?

Solution 1 : coder différemment avec une stratégie d’amélioration progressive.
Le principe de l’amélioration progressive consiste à construire son site en 3 couches :

• Le contenu stocké dans le code HTML (contenu et fonctionnalités accessibles pour tous).
• La mise en forme est définie par les feuilles de style en cascade externes (CSS).
• Les fonctionnalités écrites dans un script externe comme JavaScript.

Solution 2 : Créer des snapshots HTML soi-même. Cette méthode est préconisée par Google pour l’Ajax.
En résumé, le code JS est exécuté via un headless browser côté serveur, afin de générer le HTML produit par le code JS.
Ce code est “capturé” avant d’être envoyé, comme une page HTML normale, au navigateur de l’internaute.
Néanmoins, cette méthode fait perdre une partie de l’intérêt du “client side rendering”, la page devient statique.
Souvent, l’arbitrage est d’envoyer les snapshots aux bots des moteurs de recherche uniquement.

Solution 3 : Utiliser un serveur de prérendition tiers. Les outils de pré-rendu de document facilitent le crawl de notre site.  Un serveur de prérendition permet de pré rendre vos pages statiques, dès que l’outil détecte qu’un crawler vient sur votre site, il lui affichera le rendu final HTML statique.
Les principaux outils de prérendition tiers sont : Prerender, SEO 4 Ajax (Cocorico !), Brombone.
Attention cette technique peut ressembler à du cloaking même si ce n’est pas le cas.
Aussi, les serveurs de rendition utilisent la méthode obsolète pour rendre l’Ajax crawlable. À savoir :

• Soit la méthode des escaped fragments avec hash bangs (comme vu précédemment).
• Soit la méthode des escaped fragments avec balise méta : <meta name=”fragment” content=”!”>

Attention, cette méthode en HTML5 utilisant la méthode pushstate() est aussi obsolète que l’autre. Pour le moment cette méthode fonctionne y compris sur les différents moteurs de recherche. Mais jusqu’à quand ?
Framework JavaScript : The next generation
L’avenir est aux Frameworks JavaScript “isomorphes” capables d’une rendition hybride (coté serveur et/ou client).
Avec ReactJS ou HapiJS, on peut donc générer le HTML avant de l’envoyer au navigateur. Il devient possible de créer des sites web avec des Framework JS, sans générer de problèmes avec le SEO.
Cependant, mal utilisés, ces Frameworks JS de dernière génération peuvent poser les mêmes problèmes que ceux expérimentés avec la première génération.

Notre mise en garde

Le développement en Framework JS est un casse-tête qui n’est pas insoluble, mais qui demande de solides compétences techniques côté SEO et développeurs.
Et dans tous les cas, c’est à réserver à des situations où le trafic SEO n’est pas stratégique pour le site :
On peut rendre les sites faits avec ces technologies crawlables et indexables.
Mais si l’on veut atteindre des positions sur des requêtes concurrentielles, il vaut mieux compter sur un site web en serveur side rendering à l’ancienne.