Langage orienté objet, JavaScript est devenu incontournable sur le web. De nombreux sites internet l’ont adopté, pour certaines fonctionnalités précises (menu, widget, etc.), ou pour la totalité de leur développement. Le JavaScript possède de nombreuses qualités, mais suscite aussi des interrogations et des enjeux pour votre référencement naturel.
La popularité des sites web avec rendu côté client
La majorité des sites web repose sur un rendu côté serveur (Server Side Rendering ou SSR). Le serveur du site génère directement les pages HTML, et les envoie “clés en main” à l’agent utilisateur (navigateur web ou robot d’indexation d’un moteur de recherche). Cette approche est privilégiée par de nombreux CMS : WordPress (et son extension WooCommerce), Prestashop, osCommerce… Cette approche ne présente aucun problème SEO particulier, mais le serveur peut être surchargé aux périodes d’affluence.
Avec un rendu côté client (Client Side Rendering ou CSR), l’agent utilisateur (navigateur ou robot d’indexation) est mis à contribution pour générer le rendu de la page web à l’aide d’un fichier JavaScript préalablement téléchargé. Le serveur qui héberge le site web est préservé, et une fois le fichier JavaScript récupéré, l’internaute bénéficie d’une interaction et d’une fluidité inégalées. Plusieurs frameworks sont plébiscités par les développeurs pour un site internet en JS avec rendu côté client : Angular, React et Vue.js.
Nous pourrions comparer la différence entre Server Side Rendering (SSR) et Client Side Rendering (CSR) avec une métaphore. Imaginez que votre page est une construction en Lego®.
Rendu côté serveur
Vous assemblez les briques avant livraison au navigateur ou au Googlebot.
Rendu côté client
Vous livrez au navigateur ou au Googlebot un fichier JS avec les briques et la notice.
L’utilisation du JavaScript, surtout dans le cadre d’un site avec rendu côté client, peut poser des problèmes SEO majeurs.
Le traitement de JavaScript par Google
Contrairement à certaines idées reçues, les algorithmes de Google sont aujourd’hui capables de comprendre et d’interpréter le JavaScript. Mais le traitement d’une application web en JS par Google diffère du traitement d’un site en HTML.
Les applications Web en JavaScript sont traitées par Google en trois phases principales.
1. Exploration
Durant la phase d’exploration, Googlebot commence par identifier les URL de votre site internet, et les place dans une file d’attente. Chaque URL présente dans cette liste d’attente est ensuite vérifiée par Googlebot :
- présence éventuelle d’une directive dans le robots.txt interdisant son exploration
- présence d’une balise <meta name=”robots”> ou d’un en-tête interdisant son indexation
2. Affichage
Quand le site web en JS utilise un modèle “shell d’application”, le code HTML fourni à Google ne contient pas le contenu nécessaire au référencement naturel. Google doit alors exécuter JavaScript afin de lire le contenu de la page. Il utilise pour cela l’environnement Chromium sans interface graphique.
C’est la principale différence entre les sites en HTML et en JavaScript : alors que l’affichage est directement disponible en HTML avec rendu côté serveur, le moteur de recherche doit réaliser une étape supplémentaire en exécutant le JS pour accéder au contenu dans le cas d’un rendu côté client. Je vous renvoie à ce sujet à l’exemple des briques Lego®.
3. Indexation
L’indexation intervient dans un troisième temps. Les algorithmes de Google évaluent alors la pertinence de votre page web, et décident de l’indexer.
L’étape de l’indexation est le préalable à toute stratégie de référencement naturel : une URL non indexée ne sera jamais visible sur les pages de résultats ! Mais l’indexation n’est pas une finalité. Vous devrez vous démarquer de la concurrence pour imposer parmi les premiers résultats.
Les freins SEO liés à un site en JavaScript
L’exécution du code JavaScript par Google pose plusieurs enjeux en référencement naturel. Je vous rappelle que Google recommande explicitement l’affichage côté serveur ou le pré-affichage dans ses guidelines.
1. Un code parfois incompatible
Le langage JavaScript évolue à toute vitesse, et certaines API de navigateurs ou fonctionnalités peuvent ne pas être supportées par Google. Vous devez vous assurer tout d’abord que le code que vous utilisez est compatible avec Google. Si ce n’est pas le cas, tout ou partie de votre contenu pourrait bien demeurer inaccessible à Google !
Le moteur de recherche leader vous recommande la diffusion différentielle et les polyfills, et vous renvoie vers une documentation détaillée à ce sujet.
2. Des codes d’état HTTP inadéquats
Pour améliorer le référencement naturel de votre site, vous devez veiller à renvoyer à chaque fois les bons codes d’état HTTP :
- une page redirigée de façon permanente renvoie un code 301
- une page introuvable renvoie un code 404
- une page définitivement supprimée renvoie un code 410
- etc.
Vous devez veiller à informer le Googlebot du statut de chaque URL, en renvoyant le bon code d’état HTTP.
3. Une explosion des erreurs soft 404
Vous avez opté pour une application à page unique (single page application) ? Le routage est souvent effectué côté client. Vous aurez alors les plus grandes difficultés à utiliser les codes d’état HTTP pertinents, et vous risquez d’entraver considérablement votre SEO. Cela se traduira notamment par une explosion des “soft 404”.
Vous pouvez rapprocher d’un développeur web pour appliquer les bons correctifs. Ceux-ci peuvent passer par une redirection JavaScript vers une URL qui répond avec le bon code d’état, ou pour l’ajout d’une balise <meta name=”robots” content=”noindex”> aux pages d’erreur grâce à un script JavaScript.
Dossier : L’URL envoyée semble être une erreur de type “soft 404”
4. Une mauvaise prise en compte des liens internes et externes
Le SEO des sites en JavaScript peut être dégradé aussi à cause d’un mauvais suivi des liens. En effet, Googlebot ne prend en considération que les URL présentes dans l’attribut href dans des liens HTML.
Dans le cas d’une application à page unique, Google recommande l’utilisation de l’API History en lieu et place de fragments (introduits par des #).
Les bonnes pratiques SEO liés à un site en JavaScript
Afin de réussir le référencement naturel de votre site en JavaScript sur Google, vous devrez adopter certaines bonnes pratiques.
1. L’isomorphisme, pour un rendu côté client et côté serveur
L’isomorphisme, ou application universelle, vous permet de profiter des bénéfices du rendu côté client, tout en bénéficiant des avantages SEO du rendu côté serveur.
Côté serveur
La première page visitée est chargée. Elle est accessible côté serveur. Comme les robots d’indexation visitent les pages une par une, chaque page est disponible côté serveur, et parfaitement explorée par Googlebot.
Côté client
Le navigateur charge les éléments afin d’afficher le rendu côté client. L’internaute bénéficie de la fluidité et des atouts des sites en full JavaScript. Le moteur de recherche récupère aussi le fichier JS, et vérifie la concordance avec la version “statique”.
Les principaux frameworks JS possèdent aussi une version proposant l’isomorphisme :
Angular > Angular Universal
Vue.js > Nuxt.js
React > Next.js
Si vous envisagez de créer ou de refondre un site avec l’un de ces trois frameworks, privilégiez leur version “universelle” !
2. La mise en cache de votre rendu côté serveur
L’isomorphisme permet de générer “à la volée” une landing page pour que le contenu soit directement visible par Googlebot. Mais cette génération peut ralentir l’exploration et dégrader la performance globale du site.
Une mise en cache permet d’économiser vos ressources, tout en gagnant en performance.
3. Le pré-rendu (ou pre-rendering)
Vous proposez un site web en JavaScript ? Le pre-rendering peut vous permettre de gagner en efficacité SEO.
Le pré-rendu fonctionne en 3 étapes successives :
Etape 1
Pendant la compilation, chaque page est pré-rendue (HTML statique)
>
Etape 2
Le moteur de recherche accède à la page de son choix
>
Etape 3
Le serveur renvoie la page HTML statique pré-rendue
Note : votre site possède des contenus dynamiques ? Vous pouvez décider de n’envoyer le pré-rendu qu’aux robots d’indexation des moteurs de recherche. Moyennant le respect de certaines règles, cette pratique n’est pas assimilée à du cloacking.
La vérification de l’affichage de vos contenus
Afin de vous assurer que votre site internet en JS est bien exploré par Google, vous pouvez vous prêter à certaines vérifications.
1. Google Search Console
La fonctionnalité “Inspection de l’URL” de Google Search Console permet de s’assurer qu’une page est bien explorée par Google, et que votre contenu est bien lu. Vous pouvez saisir toutes les URL que vous désirez tester (idéalement, au moins une URL par type de page).
Vous pouvez aussi vous rendre dans le Rapport Index > Pages, et analyser les informations de l’onglet Non indexées. Une forte proportion de pages en soft 404 doit par exemple vous alerter sur un problème potentiel.
2. Lighthouse
L’outil open source Lighthouse, développé par Google, est disponible sous la forme d’extension sur les principaux navigateurs. Il permet de réaliser facilement, gratuitement et rapidement des audits techniques synthétiques sur l’URL de votre choix.
Découvrez Lighthouse
3. Le moteur de recherche de Google
Vous pouvez aussi, tout simplement utiliser la fonction cache proposée par le moteur de recherche sur ses pages de résultats, en choisissant l’une de ces deux approches :
Option 1 : saisissez la commande site:monsite.com pour afficher les URL indexées pour votre nom de domaine, et cliquez sur la flèche à côté de l’URL du résultat de votre choix.
Option 2 : saisissez la commande cache:https://www.monsite.com/mapage.hml pour afficher directement le cache de l’URL.
Choisissez “Version en texte seul” et assurez-vous de la présence de l’ensemble de votre contenu (menus compris). S’il s’affiche, vous n’avez a priori pas de souci SEO majeur avec votre site web en JavaScript (même si des optimisations sont certainement possibles).
Faites le point avec une agence SEO spécialisée !
Vous rencontrez des difficultés pour référencer votre site web en JS ? Faites appel à un expert reconnu en référencement naturel. Je peux vous accompagner dans le cadre de mes fonctions au sein de Digimood. Je vous invite à me contacter directement, et nous ferons ensemble un point sur votre projet :
