Le site React + Vite construit par IA : une jolie page que les robots voient à peine

Vite est un outil de build et React une bibliothèque d'interface ; ni l'un ni l'autre n'a d'allure. L'allure arrive avec les choix par défaut.

• Le duo habituel : React, Vite, Tailwind, un kit de composants comme shadcn/ui et un jeu d'icônes, choisis parce que les modèles les ont le plus souvent vus ensemble.
• Tout dans un seul bundle. La landing page et l'application partagent un même arbre de composants, donc le texte marketing est écrit et relu comme une partie de l'application, c'est-à-dire, en pratique, à peine.
• Un texte écrit pour personne, parce que le brief portait sur les fonctionnalités.

Tout cela se change facilement. Le problème de rendu ci-dessous décide si quelqu'un lira le texte tout court.

IntentGrid réécrit le texte visible pour chaque visiteur : titres, corps de texte, descriptions de fonctionnalités et libellés des boutons, selon la façon dont il est arrivé. Il adapte le texte que vous avez déjà, et les noms de marque, les prix, les dates et les chiffres restent tels qu'ils sont écrits. Il a besoin que ce texte existe dans le HTML qu'il reçoit.

Il ne touche ni à votre code, ni à votre bundle, ni à votre hébergement, il n'exécute pas le JavaScript à votre place, et il ne change pas le design. Sur une page dont le HTML se résume à un élément racine vide, il n'y a rien à réécrire.

Aujourd'hui, la partie qui fonctionne est une démo qui affiche une copie réécrite d'une URL publique dans un bac à sable sur intentgrid.ai ; l'adaptation sur votre propre domaine est en accès anticipé, mise en place site par site à la main. Comment ça marche détaille le mécanisme en entier.

Une application React Vite par défaut sert index.html pour chaque route : la section head que vous avez écrite, un élément racine vide et un script de type module. La démo récupère ce fichier et retire le script, donc elle reçoit la coquille et l'aperçu revient presque vide. Tout robot qui n'exécute pas le JavaScript, dont beaucoup de robots d'IA, reçoit la même coquille. Google exécute le JavaScript, donc il peut en général quand même indexer la page, avec un certain délai.

Le routage côté client ajoute un second piège. Un lien profond comme /pricing ne fonctionne que si votre hébergeur renvoie chaque chemin vers index.html ; sinon, la page se charge bien quand on y arrive en cliquant, et renvoie une 404 quand quelqu'un ouvre le lien directement. Ouvrez un lien profond dans une fenêtre de navigation privée pour vérifier.

Pré-rendez les routes marketing. Une étape de pré-rendu au moment du build rend la landing page et la page de prix en HTML statique, tandis que l'application reste une application monopage. C'est en général le plus petit changement.

Déplacez la landing page vers un site statique. Mettez les pages marketing dans un framework pensé d'abord pour le statique, comme Astro, ou en HTML brut, et gardez l'application React sur son propre chemin ou sous-domaine.

Passez au rendu côté serveur. Un framework React avec rendu serveur règle le problème pour chaque page, au prix d'une migration. Cela vaut le coup pour un site riche en contenu, rarement pour une seule landing page.

Même mise en page, mêmes prix, mêmes promesses. Chaque version n'utilise que ce que la page d'origine dit déjà : dans ce cas inventé, la prise en charge du RAW, l'absence d'installation et la retouche sur téléphone. Sur un build rendu côté client, aucun de ces titres n'atteindrait la démo tant que le texte n'est pas dans le HTML.

Dans l'ordre :

• Écrivez une vraie balise title et une vraie meta description dans index.html. Pour une application rendue côté client, c'est souvent le seul texte que les robots et les aperçus de liens verront jamais.
• Faites entrer la landing page dans le HTML, par l'une des trois voies ci-dessus.
• Vérifiez que les liens profonds fonctionnent quand on les ouvre directement, pour que les liens partagés vers /pricing ou /docs ne tombent pas sur une 404.
• Réécrivez le hero vous-même. Puis demandez à votre outil d'IA de lister tous les autres titres et libellés de boutons, et réécrivez ceux qui pourraient appartenir à n'importe quel produit.
• Changez le thème du kit de composants, la police et une section standard, pour que la page cesse de ressembler au kit de démarrage.

Les raisons pour lesquelles chaque site généré aboutit aux mêmes choix par défaut sont détaillées dans pourquoi les sites vibe codés se ressemblent.