SEO Javascript

SEO + JS : Comment optimiser Javascript pour le référencement naturel ?

En quoi le langage Javascript peut-il être lié au référencement naturel d’un site web ? Existe t-il une manière d’optimiser l’utilisation des scripts JS dans votre code pour marquer des points en SEO (Search Engine Optimisation) ?

Habituellement, les optimisations SEO du code source de pages web sont effectuées au niveau des balises HTML, des mots-clés, des hyperliens entrants ou sortants, etc. Dans les nouvelles tendances, il est même question de prendre en compte l’expérience utilisateur (SEO + User eXperience = Search eXperience Optimization) ou encore, les intentions de recherche.

Aujourd’hui, Google a livré, à destination des développeurs du monde entier, une série de consignes et de bonnes pratiques techniques à respecter en Javascript pour une bonne lecture de vos pages web par le Google Bot et donc, fatalement, pour un meilleur référencement naturel. Voyons comment optimiser votre SEO grâce à votre code JS.

L’utilisation du Javascript dans la programmation web

Dans la programmation web, l’emploi du langage Javascript a beaucoup évolué au fil des années. Dans le code d’une page web, les scripts JS (Javascript) ont commencé à prendre place aux côtés des balises HTML, afin d’animer l’affichage.

Il s’agit notamment de la Programmation Orientée Événements (POE), en créant des animations sur une page web lorsque l’utilisateur clique, passe la souris ou survole une certaine zone de la page.

D’autre part, le Javascript a été de plus en plus utilisé pour ses qualités de rapidité de chargement et d’affichage, de manière à charger certaines parties et certains contenus de façon dynamique, notamment pour les photos, sons, vidéos, etc.

Enfin, le Javascript s’est littéralement imposé comme un langage de programmation web à part entière (Programmation Orientée Objets), grâce à sa capacité à se déployer à la fois côté Serveur et côté Client, notamment avec la grande vague des sites web et applications mobiles codées en Node.js et en Angular, pour ne citer que ces exemples.

Ainsi, d’un site internet à un autre, la présence et l’utilisation du Javascript peut être radicalement différente, allant de quelques scripts d’animation et d’événements, à des applications et fonctions complexes entièrement codées en JS.

Javascript et le robot d’indexation de Google

Quel est le lien entre le langage Javascript utilisé dans le code des pages d’un site web et son référencement naturel par Google ?

Au même titre que HTML et CSS, le Javascript est reconnu et lu par le robot de Google dans son exploration, son affichage et son indexation des milliards de pages de la grande toile.

En effet, le Googlebot fonctionne en 3 étapes dans la reconnaissance d’une page web :

  • l’exploration du code source de cette page et de ses liens (le crawling)
  • la construction de l’affichage de ses contenus (le rendering)
  • l’indexation de cette page et de ses contenus

Or, dans le cas où du Javascript est utilisé dans une page web, le robot de Google doit exécuter les scripts JS pour explorer, afficher et indexer les éléments de cette page, ce qui ajoute des étapes supplémentaires dans le processus de référencement naturel et donc, des facteurs de risques d’erreurs dans l’interprétation du Javascript pouvant aller jusqu’à la non-indexation de la page qui le contient.

Pour faire face à cette problématique, Google a défini un ensemble de règles à appliquer et de mauvaises pratiques à éviter dans l’utilisation du Javascript pour un site web. En fonction du respect de ces consignes, des points en référencement naturel peuvent être marqués ou au contraire perdus, grâce ou à cause des scripts JS utilisés dans votre code source.

Par conséquent, l’enjeu SEO du Javascript, avant de chercher le meilleur référencement naturel possible, consiste déjà à vous assurer que vos pages web contenant des scripts JS soient indexées et référencées correctement par le Google Bot.

Javascript et SEO: les mauvaises pratiques à éviter

Les hyperliens en JS

Les hyperliens sont de première importance en SEO, en terme de « netlinking ».

Rien ne sert de chercher midi à 14 heures ! Pour vos liens, utilisez tout simplement les balises HTML et leurs attributs prévus à cet effet. En l’occurrence, il s’agit de la balise de lien « <a></a> » (pour marquer un lien) et de son attribut « href » (pour spécifier l’adresse vers laquelle mène ce lien).

Ne cherchez pas à créer des liens à partir d’autres balises HTML, associées de façon hasardeuse à des attributs et fonctions en Javascript permettant de rediriger vers une autre page, tels que l’attribut « onclick » ou la fonction « goTo ».

Cela reviendrait en quelque sorte à « détourner » ou « pirater » votre propre code inutilement, alors que les bonnes vieilles balises « <a></a> » en HTML sont attendues par le robot de Google dès qu’il est question de lien interne ou externe.

HTML sémantique ou fonction JS ?

Privilégiez autant que possible les balises sémantiques existantes en HTML plutôt que de créer des fonctions artisanales et complexes en Javascript pour votre seul plaisir.

Le Google Bot aime quand on lui parle dans son langage, en utilisant les outils mis à la disposition des développeurs pour spécifier en détail la nature des contenus d’une page.

Certes, le bricolage en Javascript peut fonctionner sur l’écran de vos visiteurs, mais n’est pas apprécié par Google, ce qui peut pénaliser ou annuler votre référencement naturel.

Le chargement du code HTML

De même, sauf exception, explicitez directement votre code HTML dans chaque page, plutôt que de vouloir à tout prix générer dynamiquement vos balises HTML a posteriori par l’intermédiaire de Javascript.

Dans ce dernier cas, votre maîtrise de la génération dynamique de code HTML en Javascript doit être parfaite, sans quoi vous risquez tout bêtement d’empêcher le robot de Google de lire l’ensemble de vos balises HTML et d’indexer leurs contenus.

A minima, si un chargement dynamique de certaines parties de vos pages web demeure votre choix, prévoyez une copie par défaut du code HTML de chaque page à fournir dans le cas où le Googlebot ne parviendrait pas à lire votre Javascript.

Les données de session et cookies HTTP

Le chargement et l’affichage de tout ou partie de vos pages web ne doit pas dépendre de la persistance des données, car le Googlebot ne tient pas compte des données, variables et cookies transmis dans la session utilisateur ni dans les requêtes HTTP.

Ces données temporaires et cookies de session sont volatiles : ils ne doivent donc pas être porteurs de la structure de chargement ou d’affichage de vos pages web.

Les demandes d’autorisation

Attention aux demandes d’autorisation, que le robot de Google n’accepte pas. Par exemple, si vous demandez en Javascript à l’utilisateur un accès à sa caméra ou à sa localisation pour charger une page web, le Googlebot risque fort de ne pas l’explorer, ni l’indexer.

Vous devez donc permettre à l’internaute (et au Google Bot) d’accéder au contenu de la page web en question même s’il refuse la demande d’autorisation à l’une de ses ressources.

Les scripts JS trop récents

Il est tentant d’utiliser les tout nouveaux bijoux que le Javascript vous propose. Certaines de ces nouvelles lignes de code en JS permettent de simplifier en une ligne des fonctions habituellement très complexes.

Malheureusement, si vos scripts utilisent une syntaxe venant à peine de voir le jour, le Googlebot ne les comprendra tout simplement pas.

Pourquoi ?

Pour explorer, afficher et indexer les pages de la grande toile, le robot de Google utilise une version de Chromium datant d’il y a quelques années. Les plus récentes évolutions du langage JS ne seront donc reconnues que dans quelques années par le Google Bot : patience et prudence !

Quelques bonnes pratiques SEO en Javascript

Vérifier le user-agent et fournir le contenu adapté à chacun avec l’affichage dynamique

Google recommande de détecter le « user agent » en amont du chargement des pages web afin de fournir le contenu adéquat selon l’entité qui demande à consulter ces pages.

Plus précisément, lorsque le user agent détecté est le robot d’exploration de Google, il est une bonne pratique de rediriger le Googlebot vers un moteur de rendu (tel que Rendertron, Puppeteer, ou Prerender.io) ayant pour fonction de traduire le code HTML et Javascript en une version facilement assimilable (en HTML statique) de la page en question, afin de garantir son indexation.

D’autre part, lorsque le user agent détecté est l’appareil d’un internaute, l’affichage dynamique en Javascript peut être directement transmis à son navigateur. L’affichage dynamique permet aussi de fournir un contenu adapté au mobile si le user agent détecté est un smartphone, par exemple.

Attention toutefois à ne pas proposer des contenus trop différents pour une même page selon le user agent, ce qui serait interprété par Google comme une tentative de dissimulation.

De plus, la configuration de votre moteur de rendu doit être effectuée avec précaution, en procédant à des tests de fonctionnement préalables.

Vérifier la bonne assimilation de votre code et collecter les erreurs Javascript

Pour vous prémunir de la non-indexation de certaines de vos pages web par le Googlebot à cause d’une erreur de Javascript, vous pouvez utiliser les fonctionnalités de la Google Search Console pour vérifier comment le robot de Google les assimile, les restitue et les indexe.

De plus, en bon développeur, ne négligez pas la collecte des erreurs Javascript rencontrées par vos internautes et par le Googlebot, ce qui vous éclairera directement sur les scripts que l’automate de Google et les navigateurs de vos visiteurs ont du mal à digérer.

Le Lazy Loading, chargement différé des images et contenus volumineux

Lorsqu’une page contient beaucoup d’informations, dont des images, vidéos et autres supports volumineux risquant d’affecter son temps de chargement, le Javascript est utile pour mettre en place le « lazy loading », c’est-à-dire le chargement différé de ces contenus uniquement lorsque la fenêtre d’affichage du navigateur de l’internaute arrive à leur hauteur.

Google considère le lazy loading comme une bonne pratique. Elle permet par la même occasion au Googlebot d’explorer, afficher et indexer une page lourde plus rapidement.

Attention cependant à ne pas faire d’erreur dans ces scripts JS, ce qui pourrait empêcher le robot de Google de reconnaître certains contenus à charger en différé.

Les données structurées en Javascript, très appréciées de Google

Pour une fois, voici une utilisation du Javascript que Google promeut et apprécie particulièrement : les données structurées.

Spécialement crées pour clarifier et améliorer la compréhension du contenu de chaque page web par les grands moteurs de recherches, les données structurées permettent à Google, par exemple, de savoir que telle chaîne de caractères est le nom d’une entreprise, un numéro de téléphone, un prix, une référence de produit, etc.

Or, Google recommande désormais de coder ses données structurées en Javascript, au-delà des balises de HTML sémantique ! Afin de vérifier leur bonne prise en compte par le robot de Google dédié aux données structurées, utilisez l’outil de vérification de ces dernières de la Google Search Console.

Si vous avez bien mis en place les données structurées de votre page web en Javascript, vous marquerez de précieux points SEO aux yeux de Google et autres moteurs de recherches. Les scripts correspondant à chaque type d’objet à définir sont fournis sur le site de Schema.org.

Grâce aux données structurées, vous apparaîtrez sous la forme de résultats enrichis dans la recherche Google, en incluant par exemple des sous-liens vers les différentes sections de votre menu, une image à la une de votre page, ou la moyenne des évaluations de cette page sur 5 étoiles, etc.

Javascript et SEO : conclusion

En attendant que Google et son robot d’indexation améliore sa gestion et sa compréhension du Javascript, ce formidable langage de programmation en plein essor depuis quelques années doit être utilisé avec la plus grande vigilance dans vos pages web.

En matière de SEO, vos scripts JS doivent faire l’objet de tous les tests de compatibilité et d’assimilation par le robot de Google et les différents navigateurs, sans quoi tout référencement naturel sera perdu !

En revanche, une fois cet obstacle majeur surmonté, avec la certitude que le Googlebot reconnaît et indexe correctement vos pages web, le Javascript peut vous faire passer un vrai cap en SEO, notamment grâce aux données structurées et aux différentes stratégies d’affichage dynamique que le JS propose.