Skip to content
Enjoy 20% off for 12 months on all plans. Use promo code: HYPERGROWTHClaim it

SEO JavaScript : pourquoi vos pages deviennent invisibles pour Google

Par Toy Wen Da, Cofondateur · Mis à jour le · 13 min de lecture

Traduit de l'original en anglais. Lire en anglais

Le SEO JavaScript consiste à s'assurer que Google et les autres moteurs de recherche peuvent explorer, rendre et indexer un contenu que le navigateur construit avec JavaScript au lieu de l'HTML classique. Google rend les pages lors d'une étape distincte et différée, après l'exploration initiale : un contenu peut donc rester invisible pendant des semaines.

Gros plan sur la page d'accueil de Google affichée sur un écran, avec les options de recherche.

Si vous avez créé votre site avec React ou Vue, ou avec un framework comme Next.js, l'écart entre « exploré » et « rendu » est probablement la première raison pour laquelle des pages restent non indexées. La solution n'est généralement pas compliquée dès que l'on sait où se situe la rupture.

Qu'est-ce que le SEO JavaScript, et pourquoi Google s'y perd-il ?

Le SEO JavaScript est une branche du SEO technique centrée sur un seul problème : rendre les pages construites en JavaScript aussi explorables et indexables que des pages en HTML classique. Un site HTML traditionnel fournit à Google tout ce dont il a besoin en une seule réponse. Un site JavaScript, lui, livre souvent une coquille presque vide et construit le vrai contenu dans le navigateur.

Google sait exécuter le JavaScript, et le dit depuis des années. Mais cela consomme des ressources de calcul, que Google doit répartir entre des milliards de pages. C'est ce rationnement qui pose problème.

Comment Google explore et indexe une page JavaScript

La documentation de Google sur Search Central décrit le rendu comme une étape distincte de l'exploration, et non comme quelque chose qui se produit lors de la première visite. Le processus comporte trois parties :

  1. Exploration : Googlebot demande la page et lit l'HTML brut. Pour une page très dépendante du JavaScript, cet HTML peut ne contenir guère plus qu'un <div id="root"></div> et une balise script.
  2. Rendu : la page entre dans une file d'attente de rendu, où le Web Rendering Service de Google, basé sur un moteur Chromium « evergreen » (toujours à jour), exécute le JavaScript pour construire la page finale.
  3. Indexation : ce n'est qu'une fois le rendu terminé que Google indexe le contenu, les liens et les métadonnées qu'il y trouve.

Le Web Rendering Service tente désormais de rendre près de 100 % des pages HTML explorées par Google. Tenter de rendre une page n'est pas la rendre rapidement. Le délai entre l'exploration et le rendu peut aller de quelques heures sur un site bien établi à plusieurs semaines sur un site de moindre autorité ; pour une nouvelle fiche produit ou un article d'actualité, cela peut signifier passer à côté de la fenêtre de trafic.

Vue détaillée de code HTML et JavaScript affiché sur un écran d'ordinateur.

Le problème de l'indexation en deux temps

Gros plan sur du code JavaScript à l'écran, illustrant la programmation web.

C'est le point qui surprend le plus de propriétaires de sites. Votre page est explorée presque immédiatement, mais le contenu qu'elle renferme n'est vu que bien plus tard, voire jamais.

Étape Ce qui se passe Délai habituel Impact SEO
Exploration initiale Googlebot récupère l'HTML brut et en extrait le texte statique, les liens et les balises Immédiat Seul le contenu indépendant du JS est indexé tout de suite
File d'attente de rendu Chromium exécute le JavaScript et construit la page finale De quelques heures à plusieurs semaines, davantage sur les sites de faible autorité Le contenu, les liens et les données structurées générés par script restent invisibles jusqu'à la fin de cette étape
Échec du rendu Une erreur de script, une ressource bloquée ou un délai dépassé empêche le rendu d'aboutir Imprévisible Le contenu n'est jamais indexé

Plusieurs facteurs poussent une page vers le bas de cette fourchette : des bundles JavaScript volumineux, des scripts bloqués dans le fichier robots.txt, des erreurs JavaScript non interceptées, des scripts tiers qui ne se chargent pas, et une faible autorité du site. Le budget de crawl est réparti de façon inégale : les sites plus grands ou plus récents attendent donc souvent plus longtemps dans la file.

Rendu côté client ou côté serveur : lequel choisir ?

Utilisez le rendu côté serveur (SSR) ou la génération de site statique (SSG) plutôt que le rendu côté client (CSR) pour toute page que vous voulez voir indexée. Avec le CSR, Google doit attendre la file de rendu. Avec le SSR ou le SSG, Google reçoit un HTML terminé dès la première requête, sans aucune attente.

Approche Comment le contenu parvient au navigateur Adéquation SEO Meilleurs usages
Rendu côté client (CSR) Le navigateur (ou Googlebot) exécute le JavaScript pour construire la page après le chargement Faible pour les pages publiques ; dépend de la file de rendu Tableaux de bord avec connexion, outils internes
Rendu côté serveur (SSR) Le serveur construit l'HTML complet à chaque requête Solide ; le contenu est dans la première réponse Fiches produit, blogs, pages de destination
Génération de site statique (SSG) L'HTML est pré-construit au moment du déploiement Solide, et le plus rapide à servir Sites vitrines, documentation, portfolios
Régénération statique incrémentale (ISR) Pages statiques actualisées à intervalle régulier ou à la demande Solide Catalogues e-commerce, contenus fréquemment mis à jour
Instantanés pré-rendus pour les robots Un instantané HTML distinct n'est servi qu'aux robots Acceptable comme solution transitoire, pas comme correctif durable Anciens sites en CSR en cours de migration

Google a indiqué que servir aux robots un instantané pré-rendu n'est pas du cloaking, tant que les robots et les utilisateurs finissent par voir un contenu équivalent. Il précise toutefois clairement qu'il doit s'agir d'un contournement temporaire. Faire fonctionner deux chemins de rendu en parallèle ajoute de la complexité, et il faut les maintenir synchronisés indéfiniment.

La plupart des équipes de développement finissent par adopter une approche hybride : SSR ou SSG pour tout ce que les moteurs de recherche ou les moteurs de réponse IA doivent trouver, et CSR pour les expériences avec connexion, où l'indexation n'a jamais été l'objectif. Un projet Next.js fait ce choix page par page, et les détails sont abordés dans ce guide des réglages SEO de Next.js.

Gros plan sur du code HTML et JavaScript à l'écran dans Visual Studio Code.

Les signes d'un problème de SEO JavaScript sur votre site

Code JavaScript coloré à l'écran, illustrant les concepts de programmation et de développement logiciel.

Nul besoin d'un développeur pour repérer les premiers signaux d'alerte. Cherchez ces schémas dans Google Search Console et dans vos outils d'analyse :

  • Des pages restent en « Découverte : actuellement non indexée » (Discovered, currently not indexed) pendant des semaines après leur publication.
  • Dans Search Console, la vue rendue d'une page ne contient pas du texte, des liens ou des images pourtant bien visibles dans le navigateur.
  • Les liens internes construits avec des gestionnaires JavaScript onClick au lieu de vraies balises <a href> n'apparaissent pas comme « liés depuis » dans Search Console.
  • Les balises title ou les meta descriptions affichées dans les résultats de recherche ne correspondent pas à ce qui figure sur la page.
  • Les données structurées injectées côté client ne sont pas validées par le test des résultats enrichis (Rich Results Test).
  • Une pagination construite à partir de l'état JavaScript plutôt que d'URL uniques empêche l'exploration des pages plus profondes.

Quand plusieurs de ces signes apparaissent ensemble, la cause est presque toujours un écart de rendu, et non un problème de contenu ou de mots-clés. Un audit SEO technique qui compare l'HTML rendu et l'HTML brut vous le confirmera rapidement.

Ce qui doit figurer dans votre HTML initial

Quelle que soit la part de JavaScript qui enrichit ensuite la page, certains éléments doivent exister dans la première réponse HTML. Sans eux, Google risque de considérer la page comme quasi vide lors de l'exploration, même si la version rendue paraît complète.

Élément Pourquoi il compte pour le SEO JavaScript Risque s'il dépend uniquement du JS
Balise title et meta description Signal essentiel de classement et de taux de clic Peut ne pas apparaître dans les résultats de recherche pendant des semaines
Titres H1, H2 et H3 Donnent à Google la structure thématique de la page Indexation retardée, éligibilité aux extraits perdue
Texte principal Établit la pertinence et la profondeur thématique La page paraît vide lors de la première exploration
Liens internes (<a href>) Le chemin d'exploration que Googlebot suit vers les autres pages Les pages liées peuvent ne jamais être découvertes
Données structurées (JSON-LD) Éligibilité aux résultats enrichis et aux citations dans les réponses d'IA Exclues totalement des résultats enrichis
Balises canoniques Évitent la confusion liée au contenu dupliqué La mauvaise version de l'URL est indexée

Lancez un audit du balisage schema en parallèle de vos vérifications de rendu. Le JSON-LD injecté uniquement par du JavaScript côté client est l'un des éléments qui disparaissent le plus souvent de la version indexée par Google.

Core Web Vitals : là où le JavaScript fait le plus de dégâts

Un JavaScript lourd retarde l'indexation, mais il ralentit aussi la page pour les vrais visiteurs, ce qui joue contre vous comme facteur de classement. Les Core Web Vitals de Google mesurent le type de lenteur que provoquent des scripts non optimisés.

Indicateur Ce qu'il mesure Seuil « bon » Cause JavaScript courante
Largest Contentful Paint (LCP) La rapidité d'affichage du contenu principal Moins de 2,5 secondes De gros bundles JS retardent le rendu du contenu visible
Interaction to Next Paint (INP) La réactivité de la page aux clics et aux appuis Moins de 200 millisecondes De longues tâches JavaScript bloquent le fil principal du navigateur
Cumulative Layout Shift (CLS) L'ampleur des sauts de mise en page pendant le chargement Moins de 0,1 Des éléments injectés tardivement par JavaScript déplacent le contenu

L'INP a remplacé le First Input Delay comme Core Web Vital officiel en mars 2024, un changement présenté dans la documentation web.dev de Google. Il mesure la réactivité de façon plus stricte et plus réaliste que son prédécesseur, et il pénalise les scripts à l'exécution longue que les sites très chargés en JavaScript ont tendance à embarquer.

Un objectif souvent cité est un bundle initial compressé de moins de 200 Ko, avec toute tâche de plus de 50 millisecondes découpée en morceaux plus petits pour ne pas bloquer le fil principal. Google n'impose aucun de ces deux chiffres comme seuil strict, mais les deux correspondent de près aux sites qui réussissent confortablement les Core Web Vitals. Une courte liste de contrôle couvre l'essentiel du travail :

  • Différez les scripts qui ne sont pas nécessaires au premier affichage.
  • Éliminez du bundle le JavaScript inutilisé.
  • Découpez les longues tâches pour que le fil principal reste disponible pour les clics et les appuis.
  • Corrigez les erreurs de script et débloquez les ressources que le fichier robots.txt cache actuellement à Googlebot.

Pourquoi c'est encore plus important pour les sites SaaS et B2B

Les plateformes SaaS, les portails d'entreprise et les places de marché technologiques sont souvent conçus dès l'origine comme des applications JavaScript. L'indexation retardée des pages produit, les données structurées invisibles et de faibles Core Web Vitals les pénalisent tous en même temps, et font passer le site derrière ses concurrents sur les recherches à forte intention, celles où les contrats se gagnent ou se perdent.

L'erreur habituelle est de faire partager à un site marketing et à une application produit une seule base de code rendue côté client. Une organisation plus sûre rend les pages publiques (tarifs, fonctionnalités, documentation, blog) sur le serveur ou à la compilation, et garde le CSR pour l'application avec connexion, où l'indexation n'a pas d'importance.

Les solutions selon votre plateforme

La bonne solution dépend de ce sur quoi vous construisez.

  • Les thèmes Shopify s'appuient sur JavaScript pour le filtrage, le choix des variantes et les mises à jour du panier. C'est globalement sans problème pour le SEO tant que les titres, les descriptions et les balises canoniques des produits restent dans l'HTML rendu côté serveur. Les réglages à vérifier sont détaillés dans ce guide SEO Shopify.
  • Wix a nettement amélioré sa gestion du rendu, mais les sections interactives générées par l'éditeur peuvent encore retarder l'indexation si elles chargent leur contenu de façon asynchrone. Parcourez les réglages concernés dans ce guide SEO Wix.
  • Les applications Lovable sont souvent créées par défaut comme des applications React monopages, ce qui les place dans le territoire du CSR, sauf configuration contraire. Ce guide du SEO pour les sites Lovable explique comment faire indexer le contenu d'un blog sur un site créé à partir d'un seul prompt.
  • Les sites WordPress sont généralement déjà conçus HTML d'abord, mais les thèmes très chargés en JavaScript, les constructeurs de pages et certains plugins réintroduisent le risque de rendu. Les correctifs sont présentés dans ce guide des réglages SEO de WordPress.
  • Les sites basés sur Git, créés avec des générateurs de sites statiques et déployés via GitHub, adoptent en général le SSG par défaut, qui est le choix de rendu le plus sûr. Les particularités du déploiement et de l'indexation sont dans ce guide du SEO pour les sites déployés sur GitHub.
  • Next.js vous donne le plus de contrôle, en vous laissant choisir SSR, SSG ou ISR page par page. Les métadonnées, les sitemaps et le fichier robots.txt comptent autant que le mode de rendu, et le guide SEO de Next.js les aborde.

La recherche par IA change la donne

Le SEO JavaScript était autrefois une préoccupation propre à Google. La plupart des robots d'IA, y compris ceux qui alimentent ChatGPT, Claude et Perplexity, n'exécutent pas du tout le JavaScript. Gemini fait figure d'exception notable, car il utilise la technologie de rendu de Google, même si elle est décrite comme expérimentale et à ne pas considérer comme acquise.

Une page qui dépend du JavaScript côté client pour afficher son contenu peut donc être invisible pour les moteurs de réponse IA, même si Googlebot finit par la voir. Pour pouvoir être citée dans les réponses générées par l'IA, le contenu doit exister dans l'HTML brut. Le même principe traverse l'optimisation pour les moteurs de réponse : écrivez la réponse là où n'importe quel robot, conçu par un humain ou par une IA, peut la lire.

Comment tester et surveiller votre SEO JavaScript

Vous pouvez vérifier sans tâtonner si Google voit votre page comme vous le souhaitez.

  1. Comparez l'HTML brut et l'HTML rendu. Affichez le code source pour la version brute, puis placez-le à côté de ce que Chrome DevTools montre une fois la page entièrement chargée. De grands écarts révèlent une dépendance au rendu.
  2. Utilisez l'outil d'inspection d'URL de Search Console. Il affiche la capture d'écran rendue et l'HTML utilisés par Google, ainsi que les éventuelles erreurs de console JavaScript rencontrées.
  3. Explorez le site avec JavaScript désactivé. Un mode d'exploration « texte seul » montre ce que voit un robot qui ne rend pas les pages, ce qui compte vu le nombre de robots d'IA qui ignorent le JavaScript.
  4. Surveillez les fichiers journaux du serveur dans la durée. Examiner la fréquence d'exploration sur une période de trois à six mois montre si les modèles de pages importants sont revisités assez souvent, et si les correctifs de rendu ont ensuite amélioré l'activité d'exploration.
  5. Relancez un audit technique après tout changement majeur de framework. Une migration vers un nouveau framework est le moment où des régressions de rendu s'installent sans qu'on les remarque ; un audit SEO technique avant et après les détecte tant qu'elles sont peu coûteuses à corriger.

Pouvez-vous corriger le SEO JavaScript vous-même ?

En partie, oui. Vérifier si vos balises title et vos titres apparaissent dans l'HTML brut prend cinq minutes et un clic sur « afficher le code source ». Ajouter l'attribut defer aux scripts non critiques, éliminer le JavaScript inutilisé et s'assurer que les liens internes utilisent de vraies balises <a href> sont autant de changements qu'un propriétaire de site peut demander à un développeur sans refonte.

Faire passer une application CSR en SSR, ou mettre en place des instantanés pré-rendus comme solution provisoire, est un chantier plus important. Il faut généralement un développeur qui connaît votre framework, car une mauvaise mise en œuvre peut casser les fonctionnalités que vous cherchez à préserver. Si l'architecture de rendu est soupçonnée, faites appel à un développeur avant que quiconque ne touche au code de production, et appuyez-vous sur un plan SEO structuré pour ordonner les correctifs afin que l'un n'annule pas l'autre.

Où cela s'inscrit dans votre travail SEO global

Un site qui a des problèmes de rendu présente souvent aussi des lacunes en visibilité locale, en données structurées ou en santé technique générale. Si vous desservez des zones précises, associez vos correctifs de rendu à des pages de SEO local construites autour des quartiers où vous voulez être bien classé. Si votre framework génère aussi des URL dupliquées ou des balises canoniques incohérentes, ce que font couramment les routeurs côté client, traitez-le dans la même passe technique au lieu d'en faire plus tard un projet à part.

Questions fréquentes

Google pénalise-t-il les sites JavaScript ?

Non. Google ne pénalise pas un site parce qu'il utilise du JavaScript. Le problème est indirect : si le JavaScript retarde le rendu ou masque du contenu, les pages sont indexées tardivement ou pas du tout, ce qui ressemble à un problème de classement mais relève en réalité de l'indexation.

Combien de temps Google met-il à indexer une page JavaScript ?

Cela varie beaucoup. Les sites bien établis et de forte autorité peuvent voir le rendu s'effectuer en quelques heures, tandis que les sites plus récents ou de moindre autorité peuvent attendre des semaines pour que la même page franchisse la file d'attente, d'après la description que Google donne lui-même du processus.

React est-il mauvais pour le SEO ?

React en lui-même, non, mais une application React rendue entièrement côté client, oui. Associer React à un framework qui prend en charge le rendu côté serveur ou la génération statique, comme Next.js, supprime l'essentiel du risque.

Quelle est la différence entre le SSR et le pré-rendu ?

Le SSR construit l'HTML complet sur le serveur à chaque requête, en temps réel. Le pré-rendu génère à l'avance un instantané HTML statique (ou à la première requête d'un robot) et sert cette version en cache aux robots d'exploration. Il coûte moins cher à exploiter, mais doit être actualisé pour rester exact.

Les chatbots d'IA comme ChatGPT lisent-ils le contenu JavaScript ?

En général, non. La plupart des robots d'IA n'exécutent pas le JavaScript : un contenu qui n'apparaît qu'après l'exécution d'un script leur est donc généralement invisible. Gemini, de Google, fait exception car il utilise l'infrastructure de rendu de Google, mais il reste considéré comme un cas marginal.

Faites vérifier votre rendu avant qu'il ne vous coûte davantage de positions

Les problèmes de SEO JavaScript sont discrets. Les pages ne génèrent pas d'erreurs, elles n'apparaissent simplement pas, et rien dans votre tableau de bord ne signale un retard de rendu tant que vous ne savez pas où regarder. Le moyen le plus rapide de savoir où vous en êtes est de comparer ce que Google rend avec ce que votre site sert. Contactez l'équipe et obtenez un exemple de rapport SEO qui montre ce qui se passe sur vos pages en ce moment.

Ressources / Références

  1. Search Central
  2. web.dev
Voyez ce que cela donne sur votre propre siteCollez une URL et SearchBlueprint la note avec le même moteur de contenu que celui qui a noté cet article, puis vous indique les correctifs à apporter, dans l'ordre où ils rapportent le plus.Obtenir votre plan gratuit

Sources

À propos de l'auteur

SearchBlueprint a recherché, rédigé et noté cet article avec la chaîne de production de contenu que nos clients utilisent sur leurs propres sites. La note affichée dans la signature est celle que notre moteur de contenu a attribuée à cette page avant sa publication. Rien ici n'est relu à la main, et c'est tout l'intérêt : c'est le résultat du produit, publié là où chacun peut le vérifier.