SEO JavaScript : un guide détaillé

L’un des défis techniques de référencement les plus courants auxquels sont confrontés les référenceurs consiste à amener Google à indexer le contenu JavaScript.

L’utilisation de JavaScript sur le Web augmente rapidement. Il est bien documenté que de nombreux sites Web ont du mal à stimuler la croissance organique en raison du rejet de l’importance du référencement JavaScript.

Si vous travaillez sur des sites qui ont été développés à l’aide de frameworks JavaScript (tels que React, Angular ou Vue.js), vous serez inévitablement confronté à des défis différents de ceux qui utilisent WordPress, Shopify ou d’autres plates-formes CMS populaires.

Cependant, pour voir le succès sur les moteurs de recherche, vous devez savoir exactement comment vérifier si les pages de votre site peuvent être rendues et indexées, identifier les problèmes et le rendre convivial pour les moteurs de recherche.

Dans ce guide, nous allons vous apprendre tout ce que vous devez savoir sur le référencement JavaScript. Plus précisément, nous allons examiner :

Qu’est-ce que JavaScript ?

JavaScript, ou JS, est un langage de programmation (ou de script) pour les sites Web.

En bref, JavaScript s’associe au HTML et au CSS pour offrir un niveau d’interactivité qui autrement ne serait pas possible. Pour la plupart des sites Web, cela signifie des graphiques et des curseurs animés, des formulaires interactifs, des cartes, des jeux Web et d’autres fonctionnalités interactives.

Mais il est de plus en plus courant de créer des sites Web entiers à l’aide de cadres JavaScript tels que React ou Angular, qui peuvent être utilisés pour alimenter des applications mobiles et Web. Et le fait que ces frameworks puissent créer des applications Web à une ou plusieurs pages les a rendus de plus en plus populaires auprès des développeurs.

Mais l’utilisation de JavaScript, avec d’autres frameworks, apporte un ensemble de défis SEO. Nous les examinerons ci-dessous.

Qu’est-ce que le référencement JavaScript ?

Le référencement JavaScript fait partie du référencement technique qui consiste à faciliter l’exploration et l’indexation de JavaScript par les moteurs de recherche.

Le référencement pour les sites JavaScript présente ses propres défis et processus uniques qui doivent être suivis pour maximiser vos chances de classement en permettant aux moteurs de recherche d’indexer vos pages Web.

Cela dit, il est facile de commettre des erreurs courantes lorsque vous travaillez avec des sites JavaScript. Il y aura beaucoup plus de va-et-vient avec les développeurs pour s’assurer que tout est fait correctement.

Cependant, JavaScript gagne en popularité et, en tant que référenceurs, comprendre comment optimiser correctement ces sites est une compétence importante à acquérir.

Comment Google explore et indexe-t-il JavaScript ?

Soyons clairs: Google est meilleur pour le rendu de JavaScript qu’il y a quelques années, alors qu’il fallait généralement des semaines pour que cela se produise.

Mais avant de nous pencher en profondeur sur les moyens de vous assurer que le JavaScript de votre site Web est convivial pour le référencement et peut réellement être exploré et indexé, vous devez comprendre comment Google le traite. Cela se produit dans un processus en trois phases:

  1. Rampant
  2. Le rendu
  3. Indexage

Vous pouvez voir ce processus visualisé plus en détail ci-dessous:

Crédit d’image : Google

Examinons ce processus un peu plus en profondeur, en le comparant à la façon dont Googlebot explore une page HTML.

C’est un processus simple et rapide qui commence par le téléchargement d’un fichier HTML, l’extraction de liens et le téléchargement de fichiers CSS avant que ces ressources ne soient envoyées à Caffeine, l’indexeur de Google. La caféine indexe ensuite la page.

Comme pour une page HTML, le processus commence par le téléchargement du fichier HTML. Ensuite, les liens sont générés par JavaScript, mais ils ne peuvent pas être extraits de la même manière. Googlebot télécharge donc les fichiers CSS et JS de la page, puis doit utiliser le service de rendu Web qui fait partie de Caffeine pour indexer ce contenu. Le WRS peut alors indexer le contenu et extraire les liens.

Et la réalité est qu’il s’agit d’un processus compliqué qui a nécessité plus de temps et de ressources qu’une page HTML, et Google ne peut pas indexer le contenu tant que le JavaScript n’a pas été rendu.

L’exploration d’un site HTML est rapide et efficace : Googlebot télécharge le HTML, puis extrait les liens sur la page et les explore. Mais lorsque JavaScript est impliqué, cela ne peut pas se produire de la même manière, car cela doit être rendu avant que les liens puissent être extraits.

Jetons un coup d’œil aux moyens de rendre le contenu JavaScript de votre site Web convivial pour le référencement.

Comment rendre le contenu JavaScript de votre site Web convivial pour le référencement

Google doit être capable d’explorer et d’afficher le JavaScript de votre site Web pour pouvoir l’indexer. Cependant, il n’est pas rare de faire face à des défis qui empêchent que cela se produise.

Mais lorsqu’il s’agit de vous assurer que le JavaScript de votre site Web est convivial pour le référencement, vous pouvez suivre plusieurs étapes pour vous assurer que votre contenu est rendu et indexé.

Et vraiment, cela se résume à trois choses:

  • S’assurer que Google peut crawl le contenu de votre site Web
  • S’assurer que Google peut rendre le contenu de votre site Web
  • S’assurer que Google peut indice le contenu de votre site Web

Il existe des mesures que vous pouvez prendre pour vous assurer que ces choses peuvent se produire, ainsi que des moyens d’améliorer la convivialité du contenu JavaScript pour les moteurs de recherche.

Jetons un coup d’œil à ce que ce sont.

Assurez-vous que Google peut rendre vos pages Web à l’aide de la console de recherche Google

Bien que Googlebot soit basé sur la dernière version de Chrome, il ne se comporte pas de la même manière qu’un navigateur. Cela signifie que l’ouverture de votre site n’est pas une garantie que le contenu de votre site Web peut être rendu.

Vous pouvez utiliser l’outil d’inspection d’URL dans Google Search Console pour vérifier que Google peut afficher vos pages Web.

Entrez l’URL d’une page que vous souhaitez tester et recherchez le bouton « TEST LIVE URL » en haut à droite de votre écran.

Après une minute ou deux, vous verrez un onglet « Test en direct » apparaître. vous verrez une capture d’écran de la page qui montre comment Google la rend. Vous pouvez également afficher le code rendu dans l’onglet HTML.

Vérifiez les écarts ou le contenu manquant, car cela peut signifier que les ressources (y compris JavaScript) sont bloquées ou que des erreurs ou des délais d’attente se sont produits. car elles peuvent vous aider à déterminer la cause.

La raison la plus courante pour laquelle Google ne peut pas rendre les pages JavaScript

La raison la plus courante pour laquelle Google ne peut pas afficher les pages JavaScript est que ces ressources sont bloquées dans le fichier robots.txt de votre site, souvent accidentellement.

Ajoutez le code suivant à ce fichier pour vous assurer qu’aucune ressource cruciale n’est bloquée pour être analysée :

Agent utilisateur : Googlebot

Autoriser :.js

Autoriser :.css

Mais clarifions une chose; Google n’indexe pas les fichiers.js ou.css dans les résultats de recherche. Ces ressources sont utilisées pour rendre une page Web.

Il n’y a aucune raison de bloquer des ressources cruciales, et cela peut empêcher votre contenu d’être rendu et, à son tour, d’être indexé.

Assurez-vous que Google indexe votre contenu JavaScript

Si vous avez confirmé que votre page Web s’affiche correctement, vous devez déterminer si elle est indexée ou non.

Et vous pouvez vérifier cela via Google Search Console ainsi que directement sur le moteur de recherche.

pour voir si votre page Web est dans l’index. À titre d’exemple,:

site : votredomaine.com/page-URL/

Si la page est dans l’index de Google, vous verrez la page s’afficher comme résultat renvoyé :

Si vous ne voyez pas l’URL, cela signifie que la page n’est pas dans l’index.

Mais supposons que ce soit le cas et vérifions si une section du contenu généré par JavaScript est indexée.

Encore une fois,: et incluez un extrait de contenu à côté de cela. Par exemple :

site : yourdomain.com/page-URL/ « extrait de contenu JS »

Ici, vous vérifiez si ce contenu a été indexé, et si c’est le cas, vous verrez ce texte dans l’extrait de code.

Vous pouvez également analyser si le contenu JavaScript est indexé à l’aide de Google Search Console, toujours à l’aide de l’outil d’inspection d’URL.

Cette fois, plutôt que de tester l’URL en direct.

Analysez le code HTML à la recherche d’extraits de contenu que vous savez générés par JavaScript.

Raisons courantes pour lesquelles Google ne peut pas indexer le contenu JavaScript

Il peut y avoir de nombreuses raisons pour lesquelles Google ne parvient pas à indexer votre contenu JavaScript, notamment:

  • Le contenu ne peut pas être rendu en première instance
  • L’URL ne peut pas être découverte car les liens vers elle sont générés par JavaScript en un clic
  • La page expire pendant que Google indexe le contenu
  • Google a déterminé que les ressources JS ne modifiaient pas suffisamment la page pour justifier le téléchargement

Nous examinerons ci-dessous les solutions à certains de ces problèmes courants.

Rendu côté serveur vs rendu côté client vs rendu dynamique

Le fait que vous rencontriez ou non des problèmes avec Google indexant votre contenu JavaScript dépend en grande partie de la façon dont votre site rend ce code. Et vous devez comprendre les différences entre le rendu côté serveur, le rendu côté client et le rendu dynamique.

En tant que référenceurs, nous devons apprendre à travailler avec les développeurs pour surmonter les défis de l’utilisation de JavaScript. Bien que Google continue d’améliorer la façon dont il explore, rend et indexe le contenu généré par JavaScript, vous pouvez éviter que de nombreux problèmes courants ne deviennent des problèmes en premier lieu.

En fait, comprendre les différentes façons de rendre JavaScript est peut-être la chose la plus importante que vous devez savoir pour le référencement JavaScript.

Alors, quels sont ces différents types de rendu et que signifient-ils ?

Rendu côté serveur (SSR) c’est lorsque le JavaScript est rendu sur le serveur et qu’une page HTML rendue est servie au client (le navigateur, Googlebot, etc.). Le processus d’exploration et d’indexation de la page est le même que celui de toute page HTML, comme nous l’avons décrit ci-dessus, et les problèmes spécifiques à JavaScript ne devraient pas exister.

Selon Free Code Camp, voici comment fonctionne SSR : « Chaque fois que vous visitez un site Web, votre navigateur envoie une requête au serveur qui contient le contenu du site Web. Une fois la demande traitée, votre navigateur récupère le code HTML entièrement rendu et l’affiche à l’écran.  »

Le problème ici est que SSR peut être complexe et difficile pour les développeurs. Néanmoins, des outils tels que Gatsby et Next.JS (pour le framework React), Angular Universal (pour le framework Angular) ou Nuxt.js (pour le framework Vue.js) existent pour aider à l’implémenter.

Rendu côté client (CSR) est à peu près l’opposé de SSR et c’est là que JavaScript est rendu par le client (navigateur ou Googlebot, dans ce cas) à l’aide du DOM. Lorsque le client doit rendre le JavaScript, les défis décrits ci-dessus peuvent exister lorsque Googlebot tente d’explorer, de rendre et d’indexer le contenu.

Encore une fois, selon Free Code Camp, « lorsque les développeurs parlent de rendu côté client, ils parlent de rendre le contenu dans le navigateur à l’aide de JavaScript. Ainsi, au lieu d’obtenir tout le contenu du document HTML lui-même, vous obtenez un simple -bones Document HTML avec un fichier JavaScript qui rendra le reste du site à l’aide du navigateur.  »

Lorsque vous comprenez comment fonctionne la RSE, il devient plus facile de voir pourquoi des problèmes de référencement peuvent survenir.

Rendu dynamique est une alternative au rendu côté serveur et une solution viable pour servir un site aux utilisateurs contenant du contenu JavaScript généré dans le navigateur mais une version statique de Googlebot.

C’est quelque chose qui a été présenté par John Mueller de Google à Google I / O 2018 :

Considérez cela comme l’envoi de contenu rendu côté client aux utilisateurs dans le navigateur et le contenu rendu côté serveur aux moteurs de recherche. Ceci est également pris en charge et recommandé par Bing et peut être réalisé à l’aide d’outils tels que prerender.io, un outil qui se décrit comme « sorcier pour le référencement JavaScript  ». Puppeteer et Rendertron sont d’autres alternatives à cela.

Crédit d’image : Google

Pour clarifier une question que de nombreux référenceurs se poseront probablement: le rendu dynamique n’est pas considéré comme du camouflage tant que le contenu proposé est similaire. Le seul moment où cela serait considéré comme du camouflage est si un contenu entièrement différent était servi. Avec le rendu dynamique, le contenu que les utilisateurs et les moteurs de recherche verront sera le même, potentiellement avec un niveau d’interactivité différent.

Vous pouvez en savoir plus sur la configuration du rendu dynamique ici.

Problèmes courants de référencement JavaScript et comment les éviter

Il n’est pas rare de faire face à des problèmes de référencement causés par JavaScript, et vous trouverez ci-dessous certains de ceux qui sont fréquemment rencontrés, ainsi que des conseils sur la façon de les éviter.

  • Le blocage des fichiers.js dans votre fichier robots.txt peut empêcher Googlebot d’explorer ces ressources et, par conséquent, de les afficher et de les indexer. Autorisez ces fichiers à être analysés pour éviter les problèmes causés par cela
  • Google n’attend généralement pas de longues périodes pour que le contenu JavaScript soit rendu, et si cela est retardé, vous pouvez constater que le contenu n’est pas indexé en raison d’une erreur de délai d’expiration.
  • La configuration de la pagination où les liens vers des pages au-delà de la première (disons sur une catégorie de commerce électronique) ne sont générés qu’avec un événement sur clic (clics) entraînera que ces pages suivantes ne seront pas explorées car les moteurs de recherche ne cliquent pas sur les boutons. Assurez-vous toujours d’utiliser des liens statiques pour aider Googlebot à découvrir les pages de votre site
  • Lors du chargement paresseux d’une page à l’aide de JavaScript, veillez à ne pas retarder le chargement du contenu qui doit être indexé. Cela devrait généralement être utilisé pour les images plutôt que pour le contenu textuel.
  • Le JavaScript rendu côté client ne peut pas renvoyer les erreurs de serveur de la même manière que le contenu rendu côté serveur. Redirigez les erreurs vers une page qui renvoie un code d’état 404, par exemple.
  • Assurez-vous que des URL statiques sont générées pour les pages Web de votre site, plutôt que d’utiliser #. Cela garantit que vos URL ressemblent à ceci (votredomaine.com/page-web) et non à ceci (votredomaine.com/#/. Sinon, ces pages ne seront pas indexées car Google ignore généralement les hachages.

En fin de compte, il est indéniable que JavaScript peut causer des problèmes pour l’exploration et l’indexation du contenu de votre site Web. Néanmoins, en comprenant pourquoi et en connaissant la meilleure façon de travailler avec le contenu généré de cette manière, vous pouvez réduire massivement ces problèmes.

Il faut du temps pour maîtriser pleinement JavaScript, mais même si Google s’améliore dans son indexation, il est absolument nécessaire de développer vos connaissances et votre expertise pour surmonter les problèmes auxquels vous pourriez être confronté.

D’autres lectures recommandées sur JavaScript SEO incluent: