React et Next.js peuvent être excellents pour le SEO... ou catastrophiques. Tout dépend de l'implémentation. Trop de développeurs créent des sites techniquement impressionnants mais invisibles sur Google. Ce guide vous montre comment éviter ce piège.
Le problème fondamental : JavaScript et SEO
Par défaut, une application React classique (Create React App) génère une page HTML quasiment vide. Tout le contenu est rendu côté client via JavaScript. Le problème ? Google doit exécuter ce JavaScript pour "voir" votre contenu.
Même si Googlebot exécute le JS depuis 2015, cette approche pose plusieurs risques :
- Indexation retardée (Google met votre page en file d'attente de rendu)
- Budget crawl gaspillé sur le rendu JavaScript
- Contenu dynamique parfois manqué ou mal interprété
- Autres moteurs (Bing, Baidu) moins performants sur le JS
La solution : servir du HTML pré-rendu via SSR (Server-Side Rendering) ou SSG (Static Site Generation).
Les 3 modes de rendu Next.js expliqués
SSG (Static Site Generation)
Le HTML est généré au moment du build. Parfait pour les pages qui changent rarement : articles de blog, pages produits stables, documentation.
Avantages SEO : temps de chargement minimal, contenu 100% crawlable, excellent pour les Core Web Vitals.
SSR (Server-Side Rendering)
Le HTML est généré à chaque requête. Idéal pour les pages avec données temps réel : prix dynamiques, stock en temps réel, contenu personnalisé.
Avantages SEO : contenu toujours à jour, HTML complet dès la première requête.
ISR (Incremental Static Regeneration)
Le meilleur des deux mondes : pages statiques qui se régénèrent en arrière-plan après un intervalle défini. Configurez un revalidate de 60 secondes et votre contenu reste frais sans sacrifier les performances.
Avantages SEO : performance du SSG + fraîcheur du SSR.
Checklist SEO technique pour Next.js
1. Métadonnées dynamiques
Chaque page doit avoir un title et une description uniques. Avec l'App Router, utilisez generateMetadata() :
- Title : 50-60 caractères, mot-clé principal en début
- Description : 150-160 caractères, incitation au clic
- Open Graph : titre, description, image pour les partages sociaux
2. Sitemap dynamique
Next.js 13+ supporte les sitemaps natifs via app/sitemap.ts. Générez automatiquement la liste de toutes vos pages avec leurs dates de modification. Soumettez-le dans Google Search Console.
3. Balises canoniques
Évitez le duplicate content avec des balises canonical sur chaque page. Crucial si vous avez :
- Des URLs avec paramètres de tracking (?utm_source=...)
- Des pages de pagination
- Des versions HTTP/HTTPS ou www/non-www
4. Images optimisées avec next/image
N'utilisez jamais <img> directement. Le composant next/image offre :
- Lazy loading automatique
- Formats modernes (WebP, AVIF) servis automatiquement
- Redimensionnement responsive
- Prévention du Cumulative Layout Shift (CLS)
5. Core Web Vitals
Les Core Web Vitals sont des facteurs de ranking depuis 2021. Visez un score Lighthouse > 90 :
- LCP (Largest Contentful Paint) < 2.5s : optimisez le chargement du hero
- FID (First Input Delay) < 100ms : réduisez le JavaScript bloquant
- CLS (Cumulative Layout Shift) < 0.1 : réservez l'espace pour les images/pubs
Les erreurs SEO courantes à éviter
- Utiliser Create React App pour un site vitrine — zéro SEO par défaut
- Oublier les meta tags sur les pages internes — chaque page compte
- Charger des polices sans font-display: swap — impact sur le LCP
- Images non compressées — utilisez next/image
- Ignorer les erreurs 404 — configurez des redirections
- Pas de robots.txt ni sitemap — basics souvent oubliés
Conclusion
Un site React bien optimisé peut surpasser n'importe quel site WordPress en SEO. La clé : choisir le bon mode de rendu et respecter les fondamentaux techniques. Next.js vous donne tous les outils — à vous de les utiliser correctement.
Votre site React a besoin d'un audit SEO ? Contactez-moi pour une analyse personnalisée. Je vous aiderai à identifier les optimisations prioritaires pour améliorer votre visibilité sur Google.