La web de React + Vite hecha con IA: una página bonita que los rastreadores apenas ven

Vite es una herramienta de build y React una biblioteca de interfaz; ninguno de los dos tiene un aspecto propio. El aspecto llega con los valores por defecto.

• La combinación de siempre: React, Vite, Tailwind, un kit de componentes como shadcn/ui y un set de iconos, elegidos porque es como los modelos más veces los han visto juntos.
• Todo en un solo bundle. La landing y la app comparten árbol de componentes, así que el texto de marketing se escribe y se revisa como parte de la app, lo que en la práctica significa casi nada.
• Texto escrito para nadie, porque el encargo iba de funciones.

Esto es fácil de cambiar. El problema de renderizado de abajo decide si alguien llega a leer el texto.

IntentGrid reescribe el texto visible para cada visitante: titulares, cuerpo de texto, descripciones de funciones y etiquetas de los botones, según cómo llegó. Adapta el texto que ya tienes, y los nombres de marca, los precios, las fechas y las cifras se quedan como están escritos. Necesita que ese texto exista en el HTML que recibe.

No toca tu código, tu bundle ni tu hosting, no ejecuta JavaScript por ti y no cambia el diseño. En una página cuyo HTML es un elemento raíz vacío, no hay nada que reescribir.

Hoy la parte que funciona es una demo que muestra una copia reescrita de una URL pública en un espacio aislado en intentgrid.ai; la adaptación en tu propio dominio es acceso anticipado y se configura sitio por sitio, a mano. Cómo funciona explica el mecanismo completo.

Una app de React con Vite por defecto sirve index.html para cada ruta: el head que escribiste, un elemento raíz vacío y un script de módulo. La demo descarga ese archivo y elimina el script, así que recibe la cáscara y la vista previa vuelve casi en blanco. Cualquier rastreador que no ejecute JavaScript, incluidos muchos rastreadores de IA, recibe la misma cáscara. Google renderiza JavaScript, así que normalmente puede indexar la página igualmente, con algo de retraso.

El enrutado en el cliente añade una segunda trampa. Un enlace profundo como /pricing solo funciona si tu hosting envía todas las rutas a index.html; si no, la página carga bien cuando llegas a ella haciendo clic y devuelve un 404 cuando alguien abre el enlace directamente. Abre un enlace profundo en una ventana privada para comprobarlo.

Prerrenderiza las rutas de marketing. Un paso de prerrenderizado en el build convierte la landing y la página de precios en HTML estático, mientras la app sigue siendo una aplicación de una sola página. Suele ser el cambio más pequeño.

Pasa la landing a un sitio estático. Pon las páginas de marketing en un framework centrado en lo estático, como Astro, o en HTML plano, y deja la app de React en su propia ruta o subdominio.

Adopta el renderizado en el servidor. Un framework de React con renderizado en el servidor lo resuelve para todas las páginas, a costa de una migración. Compensa en un sitio con mucho contenido, y rara vez para una sola landing.

Misma maquetación, mismos precios, mismas afirmaciones. Cada versión usa únicamente lo que ya dice la página original: en este caso inventado, soporte para RAW, nada que instalar y edición desde el móvil. En un build renderizado en el cliente, ninguno de estos titulares llegaría a la demo hasta que el texto esté en el HTML.

Por orden:

• Escribe un título y una meta description de verdad en index.html. En una app renderizada en el cliente suele ser el único texto que llegan a ver los rastreadores y las vistas previas de enlaces.
• Mete la landing en el HTML, con una de las tres vías de arriba.
• Asegúrate de que los enlaces profundos funcionan cuando se abren directamente, para que los enlaces compartidos a /pricing o /docs no den un 404.
• Reescribe tú el hero. Después pídele a tu herramienta de IA que liste todos los demás titulares y etiquetas de botones, y reescribe los que podrían pertenecer a cualquier producto.
• Cambia el tema del kit de componentes, la fuente y una sección de serie, para que la página deje de parecer la plantilla de arranque.

Por qué todos los sitios generados acaban en los mismos valores por defecto se explica en por qué los sitios vibe coded se parecen.