(+33) 6 50 46 27 02 contact@lesmarketing.fr

JavaScriptSEO

JavsScript est désormais un langage de programmation commun sur de nombreux sites web. Son utilisation a cependant des conséquences importantes en termes de référencement. Comment utiliser JavaScript pour qu’il ne crée pas de problèmes de positionnement ?  

Qu’est-ce que JavaScript ?

JavaScript est l’un des langages de programmation les plus populaires et les plus utilisés. Il existe de nombreuses applications pour lesquelles vous pouvez utiliser JS. Sur sa base, vous pouvez construire des applications entières comme des jeux, des lecteurs multimédia ou même des systèmes bancaires entiers. Cependant, du point de vue du SEO, le JavaScript est le plus souvent utilisé pour créer des éléments interactifs. Toutes sortes d’animations, de formulaires, de galeries, peuvent être construites sur la base de ce langage. Grâce à JS, il est également possible de créer des algorithmes très sophistiqués, qui peuvent être utilisés par exemple pour étudier le comportement des utilisateurs. Chaque navigateur web couramment utilisé actuellement possède un “moteur” intégré, qui vous permet d’interpréter et d’exécuter correctement le code JavaScript. Grâce à cela, les sites web peuvent contenir de nombreuses fonctions complexes qui ne seraient pas possibles à mettre en œuvre sans ce langage. L’optimisation de l’utilisation de ce langage sur les sites web est l’un des fondements du référencement technique. 

En quoi JavaScript est-il difficile à utiliser pour les moteurs de recherche, contrairement à son utilisation standard en HTML et CSS ?

Pour qu’un moteur de recherche puisse indexer le contenu créé par JavaScript, il faut que les fonctions du navigateur soient exécutées avec toutes les ressources et technologies nécessaires ; les moteurs de rendu jouent un rôle particulièrement important. Ces tâches supplémentaires exigent une quantité incroyable d’énergie de la part des moteurs de recherche.

Les moteurs de recherche éprouvent souvent des difficultés à indexer les ressources JavaScript parce que l’indexeur (Googlebot dans leur cas) n’est pas nécessairement responsable du rendu des pages web ; c’est plutôt Caffeine qui s’acquitte de cette fonction. Pour identifier les problèmes potentiels, il est essentiel de comprendre comment Googlebot et Caffeine travaillent ensemble lors de l’exploration, du rendu et de l’indexation.

Comment Googlebot lit-il les pages ?

Étape 1 : Googlebot parcourt le Web

Le robot d’exploration du Web de Google, appelé Googlebot, est la clé de la découverte de nouvelles pages sur Internet. Il visite chaque page et suit tous les liens qu’elle contient. À cette étape Google n’a pas encore le rendu finale des pages Web, JavaScript n’est pas non plus exécuté à cette étape du processus.

Étape 2 : Google indexe ou pas les pages

Lorsqu’une page Web est indexée par l’algorithme caffeine de Google, le moteur de recherche essaie de la rendre aussi rapidement et précisément que possible pour les utilisateurs. C’est à cette étape que la partie JavaScript est analysée.

Étape 3 : Les pages sont classées sur Google.

Google utilise un certain nombre d’algorithmes différents pour classer les pages Web sur son moteur de recherche. Pour ce faire, il analyse le contenu de chaque page et utilise divers facteurs, tels que la qualité ou les liens externes pointant vers votre site, pour déterminer son classement par rapport aux autres sites.

Quels robots d’indexation peuvent rendre JavaScript ?

Néanmois, outre les moteurs de recherche tels que Bing, Yahoo et Yandex, nous reconnaissons également que les robots d’indexation de Facebook, Twitter, LinkedIn ou Xing ne rendent pas JavaScript à l’heure actuelle, ce qui ne laisse que Google comme moteur pour la compréhension de JavaScript.

Quelles technologies Google utilise-t-il pour afficher les pages des sites internet ?

Ce n’est qu’en août 2017 que Google a fourni des informations plus détaillées sur sa technologie de rendu. Auparavant, on ne comprenait pas grand-chose à la technologie de rendu HTML ; la Search Console de Google a donc servi de moyen idéal pour tester et déboguer les problèmes liés à ce sujet. Ces points doivent être gardés à l’esprit lorsque l’on travaille avec JavaScript ainsi qu’avec les techniques de référencement :

  • Google utilise ses services de rendu Web (WRS) pour afficher les sites web. Le WRS fonctionne sur Chrome 41 qui a été publié au début de l’année 2015.
  • Le protocole HTTP/2 n’est actuellement pas pris en charge dans le transfert ; cependant, cela ne devrait pas être considéré comme un obstacle majeur puisque HTTP/2 est rétrocompatible.
  • Aucun navigateur ne prend en charge le protocole WebSocket ; seules les interfaces IndexedDB et WebSQL permettent de stocker des données localement dans les navigateurs.
  • Les contenus qui n’apparaissent qu’avec le consentement de l’utilisateur ne sont pas enregistrés.
  • Le contenu des mémoires locales et des mémoires de session est supprimé lors d’un changement d’URL et aucun cookie HTTP n’est envoyé pour transmission.

Google utilise les technologies Chrome 41 pour le rendu des sites internet. En outre, cette norme ne prend plus en charge les fonctionnalités basées sur le web depuis 2015.

Comment auditer les pages web JavaScript ?

Utiliser le DOM au lieu du code source

Dès que l’on examine de près une page web utilisant JavaScript, il devient évident qu’une grande partie de ce qui apparaît sur le navigateur n’est pas évident dans son code source original, car JavaScript n’est pas exécuté, le code HTML de la page web reste intact, ce n’est qu’une fois que JavaScript a été exécuté avec succès que tout le contenu apparaît dans le code source. 

L’outil Chrome Developer permet d’explorer le rendu 

Chrome Developer peut être utilisé pour visualiser le code rendu de pages web JavaScript, voici les instructions :

  • Cliquez avec le bouton droit de la souris sur une zone de la page web qui semble “vide” et sélectionnez “Examiner”.
  • Ensuite, il suffit de cliquer sur la balise HTML présente en haut de la page (afin de tous sélectionner).
  • Cliquez avec le bouton droit de la souris, sélectionnez “Copier”, puis “Copier OuterHTML” pour copier l’intégralité de son contenu.
  • Copiez et collez ensuite ce code HTML dans un éditeur de texte afin d’en analyser le contenu et d’en examiner les détails.

Cette approche peut également être utilisée pour évaluer le contenu d’une page de site web alimentée par JavaScript dans le but de détecter les éléments OnPage.

Chrome 41 

Comme indiqué précédemment, Google se base sur la version 41 de Google Chrome pour comprendre les pages web JavaScript. Néanmois, il faut savoir que les versions récentes de Chrome 41 (Caffeine WRS) ne sont plus prises en charge par Google et que la console des outils Chrome Developer fournit des messages relatifs à tous les problèmes liés à JavaScript qui doivent être corrigés afin d’obtenir un rendu fluide sur Google.

Outil de rendu dans la Google Search Console

L’outil récupération et rendu de Google Search Console peut fournir des informations précieuses. Mais il ne faut pas oublier que cet outil ne donne qu’une indication sur la possibilité de rendre une page web, plutôt que sur les exigences de performance ou les délais exigés par Googlebot.

Dans les résultats de recherche de Google

Une commande pour n’importe quel site web peut être lancée dans Google, vous devez utiliser le site:, par exemple : site:votresite.fr sur Google et ensuite sélectionner “cache” et “Version en texte seul“. Google vous confirme la bonne indexation ou non de votre contenu.

Rich Results Test et le test Mobile Friendly

John Mueller a fait remarquer que l’outil Google Search Console présentait encore quelques faiblesses en ce qui concerne le rendu. C’est pourquoi le Rich Results Test et le Mobile Friendly Tester sont utilisés pour afficher le rendu. Les problèmes liés par le redimensionnement sont par ailleurs détectés par Google Rich Media Tester et Mobile Friendly Tester. 

Screaming Frog possède son propre moteur de rendu

Screaming Frog fournit permet de créer des rendus JavaScript. 

Pour cela, il faut se rendre dans la partie “Configuration / Spider / Rendering”, il est possible de choisir “JavaScript”. Après avoir crawler les pages d’un site web, chaque URL sera affichée sous la forme d’une page rendue qui peut fournir une première indication sur les problèmes affectant le rendu de cette page. 

Bien que le Screaming Frog SEO Spider se comporte de manière similaire à Googlebot, il est impossible de savoir avec certitude si Googlebot interpétre de manière indique les pages, et indexera le contenu en conséquence.

Quels sont les aspects spécifiques à prendre en compte pour avoir un bon SEO avec une site en JavaScript ?

  • Les cinq secondes : Google effectue une capture d’écran de votre page dans un délai d’environ cinq secondes, il faut donc afficher tous les détails significatifs ou cruciaux pendant ce laps de temps.
  • Evénement de chargement : il est essentiel de charger tout le contenu important lors de l’événement de chargement. Google ne prend pas en compte le contenu chargé par les événements utilisateur tels que onClick. Soyez sûr que votre contenu est indexé en optimisant son chargement.
  • URL : lors de la création d’une nouvelle page, il faut également créer une URL distincte avec le support du serveur.
  • Les erreurs de type “PushState” doivent être évitées afin de garantir que toute URL avec prise en charge côté serveur puisse être propagée correctement.
  • Hash et hash-bangs : évitez d’utiliser des hashs (#) et des hash-bangs (# !) dans les URL (souvent utilisés comme fonctionnalités standard dans certains frameworks JavaScript).
  • A-Href : implémenter des liens utilisant A-Href pour s’assurer que les URL ne sont pas ajoutées par les événements des utilisateurs.
  • Canonical : Toutes les directives canoniques doivent déjà être présentes dans le code source sans nécessiter de rendu JavaScript.
  • Méta-informations : Étant donné que certains moteurs de recherche (Bing, Facebook, Twitter et Xing) ne rendent pas JavaScript, il serait prudent de fournir des métadonnées cruciales qui ne necessite pas de rendue par JavaScript.
  • Google ne prend plus en charge le schéma d’exploration AJAX “_=escaped_fragment_=to”.
  • Chargement différé des images : si l’on utilise le chargement différé, il est essentiel que les URL des images aient été rendues à la fois en JSON-LD (noscript) et en schema.org/image.

Le prérendu est la pratique consistant à rendre JavaScript côté serveur (SSR)

Les moteurs de recherche autres que Google ne sont pas capables de rendre le JavaScript et il est donc recommandé d’utiliser le rendu côté serveur, le processus de pré-rendu de JavaScript. Cela permet d’accéder à l’ensemble du contenu des robots d’indexation sans que Google ait à faire ce qu’un navigateur ferait normalement, et de s’assurer que le contenu dont vous avez besoin sera exploré et indexé au moment voulu.

Qu’est-ce que Server-Side Rendering (SSR)et comment peut-il aider le référencement ? En outre, cette technologie peut-elle être utilisée ?

Le rendu implique un JavaScript pré-rendu qui a déjà été mis en cache par les serveurs, ce qui rend le contenu pré-rendu disponible pour les robots d’indexation sans que les navigateurs aient besoin de comprende le JavaScript et donc de gagner du temps.

Google recommande le rendu côté serveur du contenu JavaScript qui change fréquemment et rapidement pour les sites web contenant de grandes quantités d’informations changeant dynamiquement, connu sous le nom de Dynamic Rendering par Google lors de la I/O 2018. John Mueller a fait une démonstration de cette technique comme une solution potentielle et a suggéré d’utiliser des ressources de rendu supplémentaires côté serveur afin de réduire les charges du serveur.

Quelles sont les options pour utiliser le rendu côté serveur dans le référencement ?

Pour optimiser le rendu côté serveur, il existe des solutions open-source et payantes qui doivent être développées pour le compte du client. Dans le cas des solutions payantes, les coûts varient en fonction du nombre de pages affichées et de la fréquence de rafraîchissement du cache. Phantom.JS, Headless Chrome avec intégration de Puppeteer et Renderton sont trois excellentes solutions open source à prendre en considération.

La décision d’utiliser ou non le rendu côté serveur doit toujours tenir compte du rapport prix-bénéfice et du canal SEO, mais ses avantages ne peuvent être surestimés ; le rendu sur le serveur garantit que les informations atteignent Google de manière efficace et que d’autres robots d’indexation et fournisseurs de services peuvent également les comprendre.

L’avenir de JavaScript et du référencement

En ce qui concerne la manière d’améliorer les performances SEO pour les site en JavaScript, il convient d’examiner attentivement plusieurs questions. Chaque entreprise utilise un frameworks basé sur JavaScript (Angular, etc..), ce qui complique la tâche des responsables du référencement qui doivent ajuster et adapter les systèmes afin de garantir l’indexation des contenus.

De plus, l’analyse et l’audit de sites internet en JavaScript est plus difficile, car il nécessite une plus grande expertise technique ainsi qu’une coopération étroite entre les SEO et les développeur web. Si vous ne disposez pas d’une équipe ou d’un développeur, la combinaison du référencement et de JavaScript s’avérera plus que difficile.

FAQ 

Qu’est-ce que le rendu dynamique ? 

Bingbot privilégie le rendu dynamique comme solution d’indexation par les moteurs de recherche, car il permet aux sites web d’effectuer des tâches lourdes pour les moteurs de recherche directement via leur serveur et de fournir le rendu aux moteurs de recherche à des fins d’indexation. 

Le rendu dynamique n’est pas considéré comme un cloaking par les moteurs de recherche ; il garantit plutôt que les moteurs de recherche peuvent voir tous les liens et le contenu sans passer par un processus d’analyse complexe. Le rendu dynamique fonctionne mieux pour le contenu indexable généré par le web et qui change fréquemment ; des outils comme Prerender.io Puppeteer Rendertron ou même les directives de mise en œuvre de Google peuvent aider à la mise en œuvre.

Que pensez-vous du rendu côté serveur ?

 Le rendu côté serveur (SSR) offre plusieurs options qui doivent être évaluées en fonction de chaque application.  

En fonction du framework choisi, il existe des outils qui facilitent le rendu côté serveur : 

React – Next.js

Angular – Angular Universal

Vue.js – Nuxt.js

Avec la RSS, les moteurs de recherche (pas seulement Google) ou les utilisateurs peuvent avoir accès à un code complet contenant tous les composants nécessaires pour obtenir des résultats en SEO. En outre, le SSR réduit le temps nécessaire pour atteindre des bons scores pour les web core vitals et particulièrement le First Contentful Paint.

Sujets Connexes