SEO React : rendu, métadonnées et liens pour une application React qui se positionne

Quiz rapide

Le SEO est-il fait pour vous, et comment commencer ?

Question 1 sur 425%

Les gens cherchent-ils sur Google ce que vous vendez ?

Oui, je penseNon, c'est nouveau ou très spécialiséJe ne sais pas

Le SEO React consiste à rendre une application React explorable, indexable et compréhensible par les moteurs de recherche et les assistants d'IA. React en lui-même est neutre : les problèmes viennent du rendu intégral dans le navigateur. Google confirme dans ses bases du SEO JavaScript qu'il traite les applications JavaScript en trois phases (exploration, rendu, indexation) et que le rendu côté serveur ou le prérendu « reste une excellente idée, car il rend votre site plus rapide pour les utilisateurs et les robots, et tous les robots ne peuvent pas exécuter JavaScript ».

Pourquoi React est-il difficile pour le SEO ?

Une application React créée en monopage livre un fichier HTML qui ne contient guère plus qu'une div racine vide et une balise script. Le navigateur télécharge le JavaScript, l'exécute et construit la page. Un robot qui ne lit que le HTML ne voit rien à indexer : ni titres, ni texte, ni liens.

Googlebot exécute bien JavaScript, mais dans une étape séparée : la page est explorée, mise en file d'attente pour le rendu, rendue dans un Chromium sans interface, et seulement ensuite les liens et le contenu rendus sont exploités. Chaque étape supplémentaire est une occasion d'échec (erreur de script, API bloquée, délai dépassé) et ajoute du retard avant que les nouvelles pages n'apparaissent dans les résultats. Notre guide du SEO JavaScript détaille ce circuit, et notre article sur l'indexation Google explique comment faire indexer les pages plus vite.

Les autres robots sont moins patients. L'analyse de Vercel de décembre 2024, The rise of the AI crawler, conclut qu'« aucun des grands robots d'IA n'exécute actuellement JavaScript », en citant GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot et PerplexityBot. Une page React rendue côté client est invisible pour ChatGPT, Claude et Perplexity, même quand Google l'indexe.

Quelle méthode de rendu choisir pour un site React ?

L'équipe React recommande désormais de démarrer les nouvelles applications avec un framework. En abandonnant Create React App le 14 février 2025, elle écrit dans son annonce que « le rendu serveur peut améliorer le SEO » et qu'il améliore aussi les performances en réduisant le JavaScript à télécharger avant d'afficher le contenu. Les options, de la plus faible à la plus solide pour la recherche :

Sur le rendu dynamique, la documentation de Google est claire : c'était « une solution de contournement et non une solution à long terme », et Google recommande à la place le rendu côté serveur, le rendu statique ou l'hydratation. Si vous choisissez un framework, notre guide du SEO Next.js détaille les modes de rendu, la Metadata API et les sitemaps.

Si la migration est impossible, une application monopage peut tout de même être indexée par Google avec quelques précautions. Notre guide du SEO des applications monopages en liste les conditions ; la suite de cet article s'applique aux deux cas.

Comment définir les titres et les balises meta dans React ?

Depuis React 19 (version stable depuis le 5 décembre 2024), les composants peuvent rendre directement des balises title, meta et link, que React remonte dans le head du document. Les notes de version de React 19 précisent que cette prise en charge native fonctionne « avec les applications uniquement côté client, le SSR en flux et les Server Components ». Avant React 19, des bibliothèques comme react-helmet ou react-helmet-async faisaient ce travail, et elles restent utiles pour remplacer les valeurs par défaut route par route.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Trois règles valent quelle que soit la méthode :

• Un seul titre par page, unique et descriptif. La documentation de React prévient que si plusieurs composants rendent un titre en même temps, « le comportement des navigateurs et des moteurs de recherche est indéfini ». Passez-lui une seule chaîne (un gabarit de chaîne), pas un mélange de texte et de variables.
• Une description et une canonique par URL, générées à partir des données de la page. Un générateur de balises meta aide à les rédiger, et un vérificateur de canonique confirme ce qui est en ligne.
• Des balises Open Graph dans le HTML initial pour les pages partagées, car les robots d'aperçu de liens lisent en général le HTML brut.

Quelles erreurs de routage et de liens bloquent l'indexation ?

Google indique qu'il « ne peut découvrir vos liens que s'il s'agit d'éléments HTML a dotés d'un attribut href » et déconseille d'utiliser les fragments d'URL pour charger des contenus différents. La plupart des échecs de SEO React viennent de détails de routage :

Pour voir ce que Google rend, utilisez l'outil d'inspection d'URL de Search Console et affichez le HTML de la page testée, ou passez vos modèles de page clés dans un vérificateur d'indexabilité.

Comment gérer le sitemap et les données structurées dans React ?

React n'a pas de sitemap intégré. Générez sitemap.xml au build à partir de vos routes et de vos données (ou avec la fonction sitemap de votre framework), n'y listez que des URL canoniques qui répondent 200, et référencez-le dans robots.txt. Un générateur de sitemap XML suffit pour un petit site statique.

Les données structurées suivent la même règle que les métadonnées : rendez le script JSON-LD avec la page, à partir des mêmes données, idéalement sur le serveur. Google peut lire un JSON-LD injecté par JavaScript après le rendu, mais un balisage absent du HTML initial est absent pour les robots qui ne font pas de rendu. Utilisez Article pour les articles, Product en e-commerce, Organization sur tout le site et BreadcrumbList pour les pages profondes.

Quel est l'effet des performances sur le SEO React ?

Les gros paquets JavaScript dégradent les Core Web Vitals : le navigateur doit télécharger, analyser et hydrater le code avant que la page ne réagisse, ce qui pèse sur le Largest Contentful Paint et l'Interaction to Next Paint, surtout sur mobile. L'annonce de l'équipe React sur Create React App rappelle que le rendu serveur envoie moins de JavaScript et un document HTML complet, ce qui accélère le First Contentful Paint et peut réduire l'INP. Leviers utiles : découper le code par route avec React.lazy, servir des images aux dimensions explicites, charger en différé les composants sous la ligne de flottaison et auditer les scripts tiers.

Que doit contenir une liste de contrôle SEO React ?

1. Chaque URL indexable renvoie un HTML complet (rendu serveur ou prérendu), vérifié avec curl.
2. Un titre, une description et une canonique vers elle-même uniques par URL.
3. Des routes basées sur l'historique, aucune URL à dièse, et chaque lien interne rendu comme un a avec href.
4. De vrais codes HTTP : 404 pour les pages manquantes, 301 ou 308 pour les pages déplacées.
5. Un sitemap.xml généré à partir des mêmes données que les routes, déclaré dans robots.txt.
6. Un JSON-LD rendu avec la page, validé avec le test des résultats enrichis.
7. Les scripts, styles et API nécessaires au rendu autorisés dans robots.txt.
8. Un code découpé par route et des Core Web Vitals suivis sur les vrais utilisateurs.

Comment rendre un site React visible dans les réponses des IA ?

Le GEO (optimisation pour les moteurs génératifs) commence par l'accès. Comme les robots des IA récupèrent le HTML brut, une page React doit livrer son texte, ses titres et son JSON-LD sans JavaScript pour être lue, résumée et citée. Un audit d'explorabilité par les IA montre ce que ces robots reçoivent de vos pages. La seconde condition, c'est un contenu digne d'être cité : des pages qui répondent à une question par section, avec sources, chiffres et définitions nettes.

C'est ce volet contenu qu'automatise Sorank, notre produit. Sorank est un logiciel SEO et GEO en autopilote : son générateur d'articles de blog rédige et publie 20, 60 ou 120 articles par mois avec sources, liens internes et images, et il se connecte aux sites sur mesure, comme un site React ou Next.js, par webhook. Son SEO Chat répond en conversation à vos questions sur les performances de votre site dans la recherche.

En résumé : servez du HTML depuis le serveur, donnez à chaque URL son titre, sa description et sa canonique, et utilisez de vrais liens. React se positionne alors comme n'importe quel site, et les assistants d'IA peuvent le lire. Pour alimenter ce site en articles conçus pour Google et les IA, consultez les offres Sorank, à partir de 49€ par mois avec 3 jours offerts.