React et SEO : SSR, SSG, hydration et erreurs courantes
React peut tuer votre SEO si mal configuré. Le rendering, le routing, l'hydration : autant de pièges. Voici la méthode pour faire du React SEO friendly.
Au sommaire
Rendering : CSR vs SSR vs SSG vs ISR
| Type | Description | SEO |
|---|---|---|
| CSR (Client-Side) | Rendu côté navigateur | Mauvais |
| SSR (Server-Side) | Rendu côté serveur à chaque requête | Excellent |
| SSG (Static) | Pré-rendu au build | Excellent |
| ISR (Incremental) | SSG + revalidation périodique | Excellent |
Next.js : la solution par défaut
- SSR/SSG natifs
- App Router (Next 13+) avec RSC (React Server Components)
- Image optimization automatique
- Métadonnées dynamiques par page
- Sitemap auto-généré
- Performance native solide
Comment Googlebot crawle React
Googlebot exécute du JavaScript depuis 2019 (V8). Mais :
- Il y a un délai entre le crawl et le rendu (jusqu'à plusieurs jours)
- Le budget de rendu est limité
- Les erreurs JS bloquent le rendu
- Le contenu visible doit l'être au premier paint
Conclusion : préférer SSR ou SSG.
Erreurs fréquentes en React SEO
- Site CSR sans SSR (Google rame)
- Métadonnées title/meta non dynamiques
- Liens en
onClickau lieu de<a href> - Pas de schema.org
- Hydration errors
- Sitemap statique non généré
- Pas de robots.txt
- 404 mal gérées (redirige vers home par défaut)
Checklist React SEO
- SSR ou SSG (Next.js, Remix, Gatsby)
- Métadonnées dynamiques par route
- Schema.org JSON-LD par page
- Liens en <Link> ou <a> (pas onClick)
- Sitemap.xml généré
- Robots.txt configuré
- 404 propres avec status HTTP
- Performance LCP < 2.5s
- Hydration sans erreur
- Test Googlebot via Search Console URL Inspection
Vous voulez aller plus loin sur ce sujet ? Demandez un audit gratuit en 48 h pour évaluer votre situation actuelle et identifier vos prochains leviers prioritaires.