JavaScript SEO: Les Bonnes Pratiques en [2023]

Guide des meilleures pratiques de JavaScript SEO

Quand on fait du technique SEO les défis sont nombreux surtout pour faire en sorte que Google indexe le contenu JavaScript. Mais en même temps le JavaScript est un superbe outil pour rendre les pages d'un site Web plus agréable c'est aussi le meilleur moyen de planter votre référencement naturel.

Alors, comment faire du Seo avec le JavaScript ?

Qu'est-ce que JavaScript SEO ?

Le référencement JavaScript englobe tout ce que vous devez faire pour qu'un site Web basé sur JavaScript soit performant dans les moteurs de recherche. Il s'agit d'une spécialisation du référencement technique.

Pourquoi est-ce important ?

Les développeurs vous diront que JavaScript est incroyable et s'extasieront sur AngularJS, Vue, Backbone ou React. Ils sont amoureux de JavaScript parce qu'il leur permet de créer des pages Web hautement interactives que les gens adorent.

Les référenceurs vous diront que JavaScript est souvent horrible pour vos performances de référencement, et ils iront même jusqu'à dire que JavaScript est une sécurité d'emploi pour eux tout en sortant rapidement des graphiques montrant une forte baisse du trafic organique après qu'un site commence à dépendre du rendu côté client.

Les deux ont raison

En même temps, lorsque les développeurs et les référenceurs travaillent ensemble de manière productive, ils peuvent obtenir d'excellents résultats. Lorsqu'ils s'attachent à créer la meilleure expérience possible pour les visiteurs et les moteurs de recherche, même les sites Web reposant sur JavaScript peuvent obtenir de très bons résultats dans les recherches.

Pour qu'un site Web reposant sur JavaScript soit performant dans les recherches, il est absolument vital que les moteurs de recherche soient en mesure de comprendre parfaitement le contenu de vos pages et vos directives d'exploration et d'indexation dès la réponse HTML initiale.

Mais, qu'est-ce que le JavaScript ?

Heureux que vous posiez la question ! Le JavaScript est un langage de programmation pour le Web qui s'exécute localement dans votre navigateur. Il est utilisé pour donner vie aux pages Web.

Par exemple:

• il permet d'envoyer des notifications
• de personnaliser des sites Web
• d'intégrer automatiquement des mises à jour de contenu
• ou de charger du nouveau contenu lorsque vous atteignez presque le bas d'une page.

Vos sites Web les plus visités dépendent fortement de JavaScript pour fonctionner

par exemple:

• Twitter
• Facebook
• Instagram
• YouTube
• Netflix
• tous utilisent JavaScript.

Et il est très peu probable que votre propre site n'utilise pas JavaScript. Il est comme le sucre et il est partout, et il n'est pas prêt de disparaître. L'adoption de JavaScript ne fera que croître davantage.

Dans une enquête de 2020, 70 % des développeurs ont déclaré utiliser JavaScript. GitHub confirme  sa popularité  et montre qu'il est constamment le langage de programmation le plus populaire depuis plusieurs années consécutives maintenant.

Quel est l'impact du JavaScript sur vos performances de référencement ?

Les pages Web qui font largement appel à du  JavaScript sont indexées lentement. Avant d'expliquer pourquoi, nous devons d'abord aborder le fonctionnement des requêtes HTTP et la façon dont JavaScript affecte les pages Web.

Fonctionnement des requêtes HTTP

Lorsque vous naviguez vers une URL, votre navigateur demande le contenu de l'URL au serveur. Si la demande est réussie, le serveur répond avec le document HTML de cette URL. Ce document HTML contient le texte, ainsi que des références à des fichiers externes tels que des images, des feuilles de style en cascade (CSS) et du JavaScript, s'ils sont présents. Si c'est le cas, votre navigateur crée des requêtes supplémentaires et distinctes pour ces fichiers également.

L'exécution de JavaScript entre en jeu

L'étape suivante consiste pour votre navigateur à construire le DOM et à commencer le rendu de la page Web. Une partie de ce processus consiste à exécuter le code JavaScript qui modifie le DOM. Il peut s'agir de petites modifications (par exemple, le chargement du chat d'assistance) ou de grandes modifications (par exemple, le chargement de tout le contenu de la page).

La page apparaît dans votre navigateur, et vous pouvez interagir avec elle.

Mais un rendu JavaScript qui modifie fortement le DOM peut ajouter des secondes au temps nécessaire pour que la page devienne interactive pour les visiteurs.

Nous appelons ces modifications du DOM “rendu côté client” (“CSR” en abrégé) – un rendu JavaScript effectué côté client, en l'occurrence votre navigateur.

Le rendu JavaScript peut être lent pour diverses raisons, comme par exemple un grand nombre de contenus à intégrer, un grand nombre de requêtes supplémentaires à effectuer et un code inefficace.

De nombreux thèmes WordPress, par exemple, sont horriblement gonflés en JavaScript car ils chargent de nombreuses bibliothèques JavaScript, souvent inutiles. Lighthouse de Google va même jusqu'à proposer des bibliothèques JavaScript alternatives .

Qu'est-ce que le DOM ?

Nous avons mentionné ci-dessus le “DOM”. Le DOM est une représentation orientée objet d'une page web, qui peut être modifiée à l'aide d'un langage de programmation tel que JavaScript.

Les problèmes que cela pose

S'il a fallu plusieurs secondes à votre navigateur pour rendre entièrement la page Web, et que la source de la page ne contenait pas beaucoup de contenu :

Comment les moteurs de recherche pourront-ils savoir de quoi parle cette page ?

Ils devront rendre la page, comme votre navigateur vient de le faire, mais sans avoir à l'afficher sur un écran. Les moteurs de recherche utilisent un “navigateur sans tête“.

Comparé au simple téléchargement de HTML, le rendu de JavaScript est très gourmand en ressources (100 fois plus cher). C'est pourquoi les moteurs de recherche ne rendent pas toutes les pages qu'ils rencontrent.

Google n'a tout simplement pas la capacité de restituer toutes ces pages. Il n'a même pas la capacité d'explorer toutes ces pages – c'est pourquoi un budget de crawl est attribué à chaque site Web.

Les sites Web se voient également attribuer un budget de rendu. Cela permet à Google de hiérarchiser ses efforts de rendu, c'est-à-dire de consacrer plus de temps au rendu des pages que les visiteurs sont censés rechercher plus souvent.

Par conséquent, les pages Web en JavaScript sont indexées beaucoup plus lentement que les pages HTML “normales”. Et si vos pages Web ne sont pas indexées, elles ne peuvent pas être classées et vous n'obtiendrez pas de trafic organique.

Comment Google traite-t-il les sites JavaScript ?

L'illustration ci-dessus explique de manière conceptuelle les processus de Google, du crawling au classement. Elle a été grandement simplifiée ; en réalité, des milliers de sous-processus sont impliqués.

Nous allons expliquer chaque étape du processus :

1. Crawl Queue : Elle garde la trace de chaque URL qui doit être crawlée, et elle est mise à jour en permanence.

2. Crawler : Lorsque le robot d'exploration (“Googlebot”) reçoit des URL de la file d'attente, il demande leur code HTML.

3. Processing : Le HTML est analysé, et :
a) Les URL trouvées sont transmises à la file d'attente des robots d'exploration pour être explorées.
b) Le besoin d'indexation est évalué – par exemple, si le HTML contient une meta robots noindex, il ne sera pas indexé (et ne sera pas rendu non plus !). Le HTML sera également vérifié pour tout contenu nouveau ou modifié. Si le contenu n'a pas changé, l'index n'est pas mis à jour.
c) Le besoin du rendering est évalué en fonction de la dépendance de la page à l'égard de JavaScript. Les URL qui doivent faire l'objet d'un rendu sont ajoutées à la Render Queue. Veuillez noter que Google peut déjà utiliser la réponse HTML initiale alors que le rendu est toujours en cours.
d) Les URL sont canonisées (notez que cela va au-delà de l'élément de lien canonique ; d'autres signaux de canonisation comme par exemple les sitemaps XML et les liens internes sont également pris en compte).

4. Render Queue: Elle garde la trace de chaque URL qui doit être rendue et, comme la file d'attente de crawl, elle est mise à jour en permanence.

5. Renderer: Lorsque le moteur a  rendu (Web Rendering Services, ou “WRS” en abrégé) reçoit des URL, il les rend et renvoie le HTML rendu pour traitement. Les étapes 3a, 3b et 3d sont répétées, mais en utilisant le HTML rendu.

6. Index : Il analyse le contenu pour déterminer la pertinence, les données structurées et les liens, et il (re)calcule le PageRank et la mise en page.

7. Ranking : L'algorithme de classement tire des informations de l'index pour fournir aux utilisateurs de Google les résultats les plus pertinents.

Ainsi, pour que Google comprenne une page Web reposant sur  du JavaScript, il doit passer par la phase de rendu complète, au lieu de le faire  directement.

1. Transmettre les URL qui doivent être explorées à la Crawl Queue des robots d'exploration et
   2. transmettre les informations qui doivent être indexées à la phase d'indexation. Cela rend l'ensemble du processus d'exploration et d'indexation très inefficace et lent.

Imaginez que vous ayez un site de 80 000 pages et que Google doive faire un double passage et rendre toutes ces pages. Cela n'est pas très agréable et a un impact négatif sur vos performances de référencement. Il faudra une éternité pour que votre contenu commence à générer du trafic organique et à produire un retour sur investissement.

Mais, rassurez-vous,  il y a des techniques pour résoudre ce problème.

Les Meilleures pratiques du JavaScript SEO

Évitez que les moteurs de recherche aient à restituer vos pages

Sur la base de la réponse HTML initiale, les moteurs de recherche doivent être en mesure de comprendre parfaitement le contenu de vos pages et vos directives d'exploration et d'indexation. S'ils ne le peuvent pas, vous aurez du mal à obtenir un classement concurrentiel de vos pages.

Inclure le contenu essentiel dans la réponse HTML initiale

Si vous ne pouvez pas empêcher vos pages d'être rendues par les moteurs de recherche, assurez-vous au moins que le contenu essentiel, comme le titre et les éléments méta qui vont dans la section de votre HTML, et le contenu important du corps du texte sont chargés par JavaScript.

Ils doivent être inclus dans la réponse HTML initiale. Cela permet à Google d'avoir une bonne première impression de votre page.

Contenu à onglet

Par exemple, sur les pages de détail des produits, assurez-vous que le contenu caché derrière des onglets est inclus dans la réponse HTML initiale et ne nécessite pas l'exécution de code JavaScript pour le faire apparaître.

Toutes les pages doivent avoir une URL unique

Chaque page de votre site doit avoir une URL unique. Dans le cas contraire, Google aura beaucoup de mal à explorer votre site et à déterminer le classement de vos pages.

N'utilisez pas de fragments dans les URL pour charger les nouvelles pages, car Google les ignorera le plus souvent. Si les visiteurs peuvent consulter votre page “Web Design“ sur https://mlocalseo.com#web-Design, les moteurs de recherche ne tiendront souvent pas compte du fragment, ce qui signifie qu'ils n'auront pas connaissance de cette URL.

Inclure les éléments de navigation dans votre réponse HTML initiale

Tous les éléments de navigation doivent être présents dans la réponse HTML. L'inclusion de votre navigation principale est une évidence, mais n'oubliez pas votre barre latérale et votre pied de page, qui contiennent des liens contextuels importants.

Et surtout dans le domaine d'E-commerce, cet élément est important : la pagination. Si le défilement infini offre une expérience utilisateur agréable, il ne fonctionne pas bien pour les moteurs de recherche, car ils n'interagissent pas avec votre page. Ils ne peuvent donc pas déclencher les événements nécessaires au chargement de contenu supplémentaire.

Voici un exemple de ce que vous devez éviter, car il oblige Google à rendre la page pour trouver le lien de navigation :

Envoyez des signaux d'indexation clairs et sans ambiguïté

Google recommande vivement aux propriétaires de sites d'envoyer des signaux d'exploration et d'indexation clairs et sans ambiguïté. Nous allons examiner ici plusieurs directives et expliquer pourquoi il est plus important que jamais de communiquer clairement lorsqu'il s'agit de référencement JavaScript.

Directives meta robots

L'écrasement de vos directives meta robots à l'aide de JavaScript pose problème.

Voici pourquoi :

• Si vous avez <meta name=”robots” content=”noindex, follow” /> dans la réponse HTML initiale que vous avez écrasé avec une valeur index, follow en utilisant JavaScript, alors Google ne le découvrira pas parce qu'en voyant le noindex, ils décident de ne pas dépenser de précieuses ressources de rendu sur ce site.

En outre, même s'il découvrait que le noindex a été transformé en index, Google respecte généralement les directives les plus restrictives, c'est-à-dire le noindex dans ce cas.

• Mais que se passe-t-il si vous faites l'inverse, <meta name=”robots” content=”index, follow” />  en utilisant ensuite JavaScript pour changer cet index en noindex ?

Dans ce cas, il est probable que Google indexera simplement la page parce qu'elle est autorisée selon la réponse HTML initiale. Toutefois, ce n'est qu'après le rendu de la page que Google découvre l'existence du noindex et supprime la page de son index. Pendant une (brève) période, la page que vous ne vouliez pas voir indexée l'était en fait, et peut-être même dans le classement.

Canonical links

L'injection de liens canoniques par JavaScript conduit à une situation où Google ne découvre les liens canoniques qu'après avoir exploré et rendu vos pages. Nous avons vu des cas où Google commence à explorer des quantités massives de pages personnalisées avec des URL uniques parce que le lien canonique n'était pas inclus dans la réponse HTML initiale, mais injecté par JavaScript. C'est un gaspillage du budget de crawl et cela doit être évité.

Valeur de l'attribut de lien rel=”nofollow

Il en va de même pour l'ajout de la valeur de l'attribut rel=”nofollow” aux liens en utilisant JavaScript. Le robot d'exploration de Google va simplement extraire ces liens et les ajouter à la file d'attente d'exploration. Ils sont explorés avant que Google ait pu rendre la page, ce qui entraîne la découverte de l'attribut rel=”nofollow”. Là encore, il s'agit d'un gaspillage du budget de crawl et d'une source de confusion.

Dans l'autre sens, si la valeur de l'attribut de lien rel=”nofollow” est présente et que vous la supprimez à l'aide de JavaScript, cela ne fonctionnera pas – comme pour les directives meta robots – car Google adhérera à la directive

Autres directives
N'oubliez pas d'inclure également d'autres directives dans votre réponse HTML initiale, comme par exemple :

Laissez les moteurs de recherche accéder à vos fichiers JavaScript

Assurez-vous que vous n'empêchez pas accidentellement les moteurs de recherche d'accéder à vos fichiers JavaScript par le biais de votre fichier robots.txt, ce qui les empêcherait de rendre et de comprendre vos pages correctement.

Supprimez le JavaScript qui bloque le rendu

Le JavaScript qui bloque le rendu est un code JavaScript qui ralentit le rendu de votre page Web. C'est une mauvaise chose du point de vue de l'expérience utilisateur, mais aussi du point de vue du référencement, car vous voulez que le rendu de vos pages Web par Google soit aussi rapide et facile que possible. Après tout, il est déjà assez difficile pour lui de rendre vos pages Web.

Pour éviter les requêtes réseau supplémentaires, utilisez le JavaScript en ligne. De plus, appliquez le chargement paresseux comme décrit dans la section suivante.

Tirer parti du fractionnement du code et du lazy loading

Imaginez la situation suivante : votre page d'accueil repose en grande partie sur JavaScript et toutes vos autres pages font un usage limité de JavaScript. Il est donc très inefficace de charger tous les fichiers JavaScript “réservés à la page d'accueil” lorsque n'importe quelle page de votre site est demandée.

En plus de cela, appliquez le fractionnement du code pour charger le JavaScript qui est nécessaire immédiatement et charger le reste dulazy loading. Cela permet à vos pages de se charger rapidement et de devenir interactives.

Implémentation du chargement des images lazy loading

Le chargement lazy loading des images est un excellent moyen d'améliorer la vitesse de chargement des pages, mais vous ne voulez pas que Google doive effectuer un rendu complet d'une page pour déterminer quelles images sont incluses.

Avec l'introduction de l'attribut loading , il n'est plus nécessaire d'implémenter le lazy loading via JavaScript. Les navigateurs alimentés par Chromium (Chrome, Edge et Opera) ainsi que Firefox offrent une prise en charge native de l'attribut de chargement.

Vous trouverez ci-dessous un exemple d'image incluse dans l'attribut de chargement :

En incluant les images via l'attribut de chargement, vous obtenez le meilleur des deux mondes :

1. Les moteurs de recherche sont en mesure d'extraire l'URL de l'image directement du code HTML (sans avoir à en effectuer le rendu).
2. Les navigateurs de vos visiteurs savent qu'il faut charger l'image paresseusement.

Exploitez la mise en cache JavaScript et utilisez des hachures de contenu

Afin de ne pas affecter l'expérience utilisateur de votre site Web, Google met en cache JavaScript de manière agressive. C'est très bien si votre code JavaScript ne change pas trop souvent, mais que faire si c'est le cas ? Dans ce cas, vous devez être en mesure de permettre à Google d'extraire rapidement la version la plus récente.

Ajoutez un hachage de contenu aux noms de vos fichiers JavaScript, y compris

les noms de fichiers tels que :

Lorsque votre code JavaScript est modifié, le hachage est mis à jour et Google sait qu'il doit le demander.

Options de rendu

Il est clair maintenant que le rendu côté client, qui repose entièrement sur le client (un navigateur ou un crawler) pour exécuter le code JavaScript, a un impact négatif sur l'ensemble du processus de crawling, d'indexation et de classement.

Mais, outre les meilleures pratiques de référencement JavaScript que nous venons d'aborder dans la section précédente, il existe des mesures supplémentaires que vous pouvez prendre pour empêcher JavaScript de tirer vos performances de référencement vers le bas.

Bien qu'il existe de nombreuses options de rendu (par exemple, le pré-rendu), les couvrir toutes dépasse le cadre de cet article SEO. Par conséquent, nous allons couvrir les options de rendu les plus courantes pour aider à fournir aux moteurs de recherche (et aux utilisateurs !) une meilleure expérience :

• Rendu côté serveur
• Rendu dynamique

Rendu côté serveur

Le rendu côté serveur consiste à rendre les pages web sur le serveur avant de les envoyer au client (navigateur ou robot d'exploration), au lieu de compter sur le client pour les rendre.

Ce processus de rendu se déroule en temps réel, et les visiteurs et, par exemple, Googlebot sont traités de la même manière. Le code JavaScript peut toujours être exploité et est exécuté après le chargement initial.

Pour

• Tous les éléments importants pour les moteurs de recherche sont immédiatement disponibles dans la réponse HTML initiale.
• Il fournit un First Contentful Paint (“FCP”) rapide.

Contre

• Le délai d'obtention du premier octet (“TTFB”) est lent, car le serveur doit rendre les pages Web à la volée.

Rendu dynamique

Le rendu dynamique signifie qu'un serveur répond différemment en fonction de l'auteur de la demande. S'il s'agit d'un crawler, le serveur rend le HTML et le renvoie au client, alors qu'un visiteur doit compter sur le rendu côté client.

Cette option de rendu est une solution de contournement et ne doit être utilisée que temporairement. Bien que cela ressemble à du camouflage, Google ne considère pas le rendu dynamique comme du camouflage tant que le rendu dynamique produit le même contenu pour les deux types de requête.

Pour

• Tous les éléments importants pour les moteurs de recherche sont disponibles dans la réponse HTML initiale envoyée aux moteurs de recherche.
• C'est souvent plus facile et plus rapide à mettre en œuvre.

Contre

• Cela rend le débogage des problèmes plus complexe.

Comment puis-je vérifier à quoi ressemblent mes pages rendues ?

Vous pouvez utiliser le test Google Mobile-Friendly  pour récupérer et tester une page. Voilà comment cela se présente quand la page est  rendue :

Ne vous inquiétez pas si votre page est coupée dans la capture d'écran ; c'est tout à fait normal. Vous pouvez également vérifier à quoi ressemblent vos pages rendues en utilisant l'outil d'inspection des URL de Google Search Console.

 

 

FAQ Javascript SEO

Comment JavaScript affecte-t-il le référencement ?

JavaScript peut affecter les éléments suivants de la page et les facteurs de classement qui sont importants pour le référencement :

• Contenu rendu
• Liens
• Images chargées lentement
• Temps de chargement de la page
• Méta-données

Comment vérifier si un site est construit avec JavaScript

Vous pouvez vérifier rapidement si un site Web est construit sur un framework JavaScript en utilisant un outil de recherche de technologie tel que BuiltWith ou Wappalyzer. Vous pouvez également “Inspecter l'élément” ou “Afficher la source” dans le navigateur pour vérifier le code JS. Les frameworks JavaScript les plus populaires que vous pourriez trouver incluent :

• Angular de Google
• React de Facebook
• Vue par Evan You

 

Le référencement Javascript pour la vitesse des pages

Javascript peut également affecter le temps de chargement des pages, qui est un facteur de classement officiel dans l'index mobile-first de Google. Cela signifie qu'une page lente peut potentiellement nuire au classement dans les recherches. Comment pouvons-nous aider les développeurs à atténuer ce problème ?

• En réduisant le JavaScript
• En reportant le JS non critique jusqu'à ce que le contenu principal soit rendu dans le DOM.
• Inlining JS critique
• Servir le JS dans des charges utiles plus petites

 

Enfin, il n'y a pas de doutes que JavaScript peut poser des problèmes pour le crawl et l'indexation du contenu de votre site internet. Mais, si vous arrivez à comprendre pourquoi et en connaissant la meilleure façon de travailler avec le contenu généré de cette manière, vous pouvez réduire considérablement ces problèmes de JavaScript SEO.

Pour conclure

Pour aller plus loin : Dynamic Rendering et SEO : Comment Faire Guide Pratique.

Vous souhaitez augmenter votre trafic organique et engager votre audience de manière efficace ?

Besoin d'aide pour débloquer le trafic SEO sur votre site ? Prendre contact avec nous dès maintenant.