Pourquoi les single page apps peinent dans les résultats de recherche et comment y remédier : SSR, génération statique ou prérendu, titres par route avec React 19 ou react-helmet-async, vraies URL, soft 404, sitemaps, inspection d'URL et un vérificateur de code source.
Les single page apps envoient souvent aux moteurs de recherche une coquille HTML presque vide et construisent la page plus tard en JavaScript. Google sait exécuter le JavaScript, mais avec un délai, et d'autres robots peuvent ne pas le faire. La solution : servir du vrai HTML pour chaque URL grâce au rendu côté serveur, à la génération statique ou au prérendu, avec un titre, une description et une URL canonique uniques sur chaque route.
Les trois corrections qui comptent le plus
Ce site est lui-même une single page app React qui prérend chaque page publique au moment du build, donc voici les vérifications que nous effectuons sur nos propres pages. Collez le code source d'une page dans le vérificateur pour voir ce qu'un robot reçoit avant toute exécution de JavaScript.
Oui. Google exécute le JavaScript, mais les pages attendent dans une file de rendu et tout ce qui ne se charge pas est manqué. Les autres moteurs de recherche et les robots d'aperçu de liens font moins de rendu, voire aucun, donc servir du HTML est le choix le plus sûr.
Non. Next.js facilite le rendu côté serveur et la génération statique, mais une SPA de type Vite ou Create React App peut prérendre ses routes publiques au moment du build et obtenir le même HTML explorable.
Pas pour les balises de base. React 19 affiche les éléments title, meta et link depuis n'importe quel composant et les déplace dans le head. react-helmet-async reste utile avec React 18 et les versions antérieures.
Pas quand les robots et les personnes reçoivent le même contenu. Le prérendu ne fait qu'enregistrer la page que vos utilisateurs verraient de toute façon. Cela devient du cloaking si le HTML servi aux robots dit autre chose.
Façons de donner du vrai HTML aux robots
React 19 permet à n'importe quel composant d'afficher des balises title, meta et link ; React les déplace dans le head du document. Chaque route définit les siennes.
Enveloppez l'application une fois dans HelmetProvider, puis définissez les balises page par page. La version async est sûre pour le rendu côté serveur et le prérendu.
Google ignore tout ce qui suit un # pour déterminer ce qu'est une URL. Utilisez l'History API (BrowserRouter, createBrowserRouter) pour que chaque vue ait son propre chemin.
Les robots suivent les éléments a dotés d'un href. Un gestionnaire de clic sur une div leur est invisible. Les composants Link des routeurs produisent une vraie ancre.
Une application uniquement côté client répond à chaque URL avec un statut 200, donc une page inexistante ressemble à une vraie. Ajoutez un noindex à la vue introuvable, ou servez un vrai 404 depuis le serveur ou l'étape de prérendu.
Listez chaque URL publique une seule fois, avec son adresse canonique. Générez-le à partir de la même liste de routes que celle de votre application, pour qu'ils ne divergent jamais.
Besoin qu'on écrive les balises pour vous ? Essayez le
Vérificateur de code source
Collez le HTML obtenu avec Afficher le code source de la page pour vérifier ce qu'un robot reçoit.
Code source de la page (l'exemple est une coquille de SPA vide typique)
Checklist SEO pour SPA
Titre
"{title}" ({n} caractères)
Aucun titre dans le HTML
Meta description
{n} caractères
Manquant
Lien canonique
Titre principal (h1)
Aucun h1 avant l'exécution du JavaScript
Texte visible
{n} mots dans le body avant l'exécution du JavaScript
Liens explorables
{n} éléments a avec un vrai href
Titre Open Graph (aperçus de liens)
Indexation autorisée
meta robots : {robots}
Aucune meta robots (indexable)
Commencer gratuitement · Sans carte bancaire