← Retour au lexique
⚙️ SEO Technique

JavaScript SEO

Le JavaScript SEO concerne l'optimisation des sites utilisant JavaScript pour le rendu, afin que Google puisse correctement crawler et indexer leur contenu.

Définition

Le JavaScript SEO désigne l’ensemble des pratiques visant à s’assurer que les sites web utilisant JavaScript pour le rendu de leur contenu sont correctement crawlés, rendus et indexés par les moteurs de recherche.

Avec la montée des frameworks JavaScript (React, Vue, Angular), le JavaScript SEO est devenu une compétence technique essentielle.

Le problème avec JavaScript

Rendu côté client

Les applications JavaScript modernes génèrent souvent le contenu dans le navigateur (client-side rendering). Le HTML initial envoyé au serveur est presque vide.

Ce que Google voit

Quand Googlebot arrive sur une page :

  1. Il télécharge le HTML initial
  2. Il doit exécuter le JavaScript pour voir le contenu
  3. Cette exécution nécessite des ressources et du temps

Files d’attente de rendu

Google utilise un processus en deux vagues :

  1. Première vague : Indexation du HTML brut
  2. Seconde vague : Rendu JavaScript (peut prendre des jours/semaines)

Types de rendu

Client-Side Rendering (CSR)

Le JavaScript génère le contenu dans le navigateur.

  • Problème SEO : Google doit attendre le rendu
  • Exemples : Applications React/Vue/Angular par défaut

Server-Side Rendering (SSR)

Le serveur génère le HTML complet avant de l’envoyer.

  • Avantage SEO : Contenu immédiatement visible
  • Exemples : Next.js, Nuxt.js

Static Site Generation (SSG)

Les pages sont pré-générées au moment du build.

  • Avantage SEO : HTML statique, performances optimales
  • Exemples : Gatsby, Astro, Next.js (mode static)

Hydratation

Le serveur envoie du HTML pré-rendu, puis JavaScript “hydrate” la page pour la rendre interactive.

Problèmes courants

Contenu non indexé

Le contenu généré par JavaScript peut ne pas être vu par Google si :

  • Le rendu échoue
  • Les ressources JS sont bloquées
  • Le timeout est atteint

Liens JavaScript

Les liens générés dynamiquement ou utilisant des événements JavaScript au lieu de balises <a href> peuvent ne pas être suivis.

Contenu lazy-loaded

Le contenu chargé au scroll peut ne pas être vu par Google qui ne scrolle pas comme un humain.

Métadonnées dynamiques

Les balises title et meta générées par JavaScript peuvent ne pas être prises en compte à temps.

Auditer le JavaScript SEO

Test d’inspection d’URL

Dans Search Console, utilisez l’outil d’inspection pour voir :

  • Le HTML brut
  • Le HTML après rendu
  • Les ressources bloquées
  • Les erreurs JavaScript

Google Cache

Vérifiez la version en cache de vos pages pour voir ce que Google a réellement indexé.

Test mobile-friendly

L’outil de test d’optimisation mobile montre le rendu de la page.

Site: query

Recherchez site:votresite.com pour voir ce qui est indexé.

Solutions techniques

Passer au SSR ou SSG

La solution la plus fiable : générer le HTML côté serveur.

Frameworks recommandés :

  • Next.js (React)
  • Nuxt.js (Vue)
  • Angular Universal
  • Astro (multi-framework)

Dynamic Rendering

Servir du HTML pré-rendu aux bots et du JavaScript aux utilisateurs.

  • Utilisez des services comme Rendertron ou Prerender.io
  • Google l’accepte mais ne le recommande pas comme solution à long terme

Optimiser le rendu client

Si vous restez en CSR :

  • Minimisez le JavaScript critique
  • Évitez les erreurs JavaScript
  • Ne bloquez pas les ressources dans robots.txt
  • Utilisez les liens <a href> standards

Lazy loading intelligent

Pour le contenu lazy-loaded :

  • Utilisez l’Intersection Observer API
  • Fournissez des liens de pagination comme fallback
  • Testez ce que Google voit

Bonnes pratiques

Liens

Utilisez toujours <a href="/page"> pour les liens, jamais onclick ou router.push seul.

Métadonnées

Assurez-vous que title et meta sont dans le HTML initial ou générées très tôt.

Contenu critique

Le contenu principal doit être dans le HTML initial ou rendu très rapidement.

Robots.txt

Ne bloquez pas les fichiers JavaScript et CSS nécessaires au rendu.

Sitemap

Soumettez un sitemap à jour pour aider Google à découvrir vos pages.

Monitoring

Surveillez régulièrement l’indexation dans Search Console.

Tester avant déploiement

Checklist

  • Le contenu apparaît dans l’outil d’inspection d’URL
  • Les liens sont des <a href> standards
  • Les métadonnées sont correctes après rendu
  • Pas d’erreurs JavaScript dans la console
  • Les ressources ne sont pas bloquées

Conclusion

Le JavaScript SEO est un défi technique réel, mais pas insurmontable. La meilleure approche est de privilégier le rendu côté serveur (SSR) ou la génération statique (SSG) quand c’est possible. Si vous devez utiliser du rendu côté client, auditez régulièrement ce que Google voit réellement et optimisez pour minimiser les dépendances au JavaScript pour le contenu critique.