Apprendre
Debug JavaScript SEO : HTML rendu, hydratation et liens crawlables
Un guide de debug SEO pour React, Vue, Nuxt et Next.js : comment Google rend le JavaScript, pourquoi contenu et liens disparaissent et comment les rendre crawlables.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Comment Google rend réellement le JavaScript
Google traite une page JavaScript en deux vagues. Il crawle d’abord la réponse HTML brute ; puis, quand les ressources de rendu sont disponibles, il exécute la page dans un Chromium headless et indexe le DOM rendu. L’écart entre ces vagues explique la subtilité des problèmes de JavaScript SEO : la page marche parfaitement dans votre navigateur, mais le crawler a indexé autre chose — ou rendu en retard, ou pas du tout.
L’habitude la plus importante est d’arrêter de faire confiance au « code source ». Ce qui compte, c’est le HTML rendu : ce qui existe dans le DOM après l’exécution du JavaScript, car c’est ce que Google indexe. La plupart des bugs de JS SEO ne sont qu’un écart entre les deux.
Les défaillances qui cachent le contenu aux crawlers
- Contenu monté seulement après un fetch de données côté client, donc HTML initial et rendu vides, et le rendu peut expirer avant son arrivée.
- Liens construits en <span> ou <div> avec onclick ou URLs javascript: — Google ne suit que les <a href>, ces pages sont indécouvrables.
- Métadonnées (title, canonique, robots, hreflang) posées par du JavaScript client, susceptibles d’être manquées ou d’arriver après la première vague.
- Routage basé sur l’History API sans URLs rendues serveur, si bien que les pages profondes n’ont pas de point d’entrée crawlable.
- Bloquer Googlebot des bundles JS ou CSS dans robots.txt, l’empêchant de rendre la page.
Comment vérifier le HTML rendu
Déboguer le JS SEO, c’est surtout comparer ce que vous livrez à ce que voit le crawler.
- Utilisez l’Inspection d’URL → « Tester l’URL en direct » → HTML rendu et capture ; c’est le rendu de Google, pas celui de votre navigateur.
- Comparez la réponse brute (curl ou « code source ») au DOM rendu (Elements) — le contenu présent dans le DOM mais absent de la réponse dépend du JS.
- Désactivez JavaScript dans DevTools et rechargez : ce qui disparaît est invisible à la première vague et à risque si le rendu tarde.
- Vérifiez que title, canonique et robots existent dans le HTML rendu et correspondent à votre intention.
- Confirmez que les liens internes sont de vrais <a href> dans le DOM, pas des gestionnaires de clic.
Comment rendre un site JavaScript crawlable
- Rendez côté serveur ou pré-rendez le contenu et les métadonnées pour qu’ils existent dans le HTML initial — SSR (Next.js, Nuxt), génération statique ou hydratation sur sortie serveur.
- Émettez de vrais liens <a href> pour chaque route à crawler et indexer.
- Posez les balises SEO critiques (title, canonique, robots, hreflang) côté serveur, pas après l’hydratation.
- Ne bloquez jamais les ressources JS/CSS dans robots.txt ; Google en a besoin pour rendre.
- Gardez la sortie rendue stable et rapide — un rendu qui expire est traité comme si le contenu n’existait pas.
Les erreurs qui aggravent le JS SEO
- Croire que « Google rend le JavaScript » signifie que tout schéma JS est sûr — le rendu est différé, budgété et peut échouer.
- Tester les balises SEO dans les DevTools du navigateur au lieu du HTML rendu de Google.
- Utiliser un soft 404 (statut 200 avec une coquille SPA vide) pour des routes inexistantes.
- Servir à Googlebot un contenu différent de celui des utilisateurs pour « aider » le rendu — c’est du cloaking.
Comment valider la correction
Relancez l’Inspection d’URL et confirmez que le HTML rendu contient désormais le contenu, les bonnes balises canonique et robots, et des liens crawlables. Puis suivez le rapport d’indexation les jours suivants pour confirmer l’entrée des URLs dans l’index.
Dans DomainLens, traitez le HTML rendu comme la vérité : il récupère et lit la page comme un crawler, donc un title, une canonique ou un lien qui n’existe qu’après l’hydratation apparaît comme manquant — exactement comme Google peut le voir.