SEO en React: renderizado, metadatos y enlaces para una app React que posiciona

Quiz rápido

¿Es el SEO para ti y cómo empezar?

Pregunta 1 de 425%

¿La gente busca en Google lo que vendes?

Sí, creo que síNo, es nuevo o muy de nichoNo lo sé

El SEO en React consiste en hacer que una aplicación React sea rastreable, indexable y comprensible para los buscadores y los asistentes de IA. React en sí es neutral: los problemas vienen de renderizarlo todo en el navegador. Google confirma en sus conceptos básicos de SEO para JavaScript que procesa las aplicaciones JavaScript en tres fases (rastreo, renderizado e indexación) y que el renderizado en el servidor o el prerrenderizado «sigue siendo una gran idea, porque hace que tu sitio sea más rápido para los usuarios y los rastreadores, y no todos los bots pueden ejecutar JavaScript».

¿Por qué React es difícil para el SEO?

Una app React creada como aplicación de una sola página entrega un archivo HTML que apenas contiene un div raíz vacío y una etiqueta script. El navegador descarga el JavaScript, lo ejecuta y construye la página. Un rastreador que solo lee el HTML no ve nada que indexar: ni encabezados, ni texto, ni enlaces.

Googlebot sí ejecuta JavaScript, pero en un paso aparte: la página se rastrea, entra en la cola de renderizado, se renderiza en un Chromium sin interfaz y solo entonces se usan los enlaces y el contenido renderizados. Cada paso adicional es una ocasión de fallo (un error de script, una API bloqueada, un tiempo de espera) y añade retraso antes de que las páginas nuevas aparezcan en los resultados. Nuestra guía de SEO para JavaScript detalla este proceso, y nuestro artículo sobre la indexación en Google explica cómo indexar páginas más rápido.

Otros bots son menos pacientes. El análisis de Vercel de diciembre de 2024, The rise of the AI crawler, concluyó que «ninguno de los grandes rastreadores de IA renderiza JavaScript actualmente», citando a GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot y PerplexityBot. Una página React renderizada en el cliente es invisible para ChatGPT, Claude y Perplexity, aunque Google la indexe.

¿Qué enfoque de renderizado conviene a un sitio React?

El equipo de React recomienda ahora empezar las apps nuevas con un framework. Al retirar Create React App el 14 de febrero de 2025, escribió en su anuncio que «el renderizado en el servidor puede mejorar el SEO» y que también mejora el rendimiento al reducir el JavaScript que hay que descargar antes de ver el contenido. Las opciones, de la más débil a la más sólida para la búsqueda:

Sobre el renderizado dinámico, la documentación de Google es clara: «era una solución provisional y no una solución a largo plazo», y Google recomienda en su lugar el renderizado en el servidor, el renderizado estático o la hidratación. Si vas a elegir un framework, nuestra guía de SEO en Next.js detalla los modos de renderizado, la Metadata API y los sitemaps.

Si migrar no es posible, Google puede indexar igualmente una aplicación de una sola página con algo de cuidado. Nuestra guía de SEO para aplicaciones de una sola página enumera las condiciones; el resto de este artículo vale para ambos casos.

¿Cómo se definen títulos y metaetiquetas en React?

Desde React 19 (estable desde el 5 de diciembre de 2024), los componentes pueden renderizar directamente etiquetas title, meta y link, y React las sube al head del documento. Las notas de la versión React 19 indican que este soporte nativo funciona «con apps solo de cliente, SSR en streaming y Server Components». Antes de React 19, bibliotecas como react-helmet o react-helmet-async hacían ese trabajo, y siguen siendo útiles para sustituir valores por defecto en cada ruta.

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>
    </>
  )
}

Tres reglas se aplican sea cual sea el método:

• Un solo título por página, único y descriptivo. La documentación de React advierte que si varios componentes renderizan un título a la vez, «el comportamiento de los navegadores y buscadores no está definido». Pásale una sola cadena (una plantilla literal), no una mezcla de texto y variables.
• Una descripción y una canónica por URL, generadas a partir de los datos de la página. Un generador de metaetiquetas ayuda a redactarlas y un verificador de canónicas confirma lo que está publicado.
• Etiquetas Open Graph en el HTML inicial para las páginas que se comparten, porque los bots de vista previa de enlaces suelen leer el HTML sin procesar.

¿Qué errores de enrutado y enlaces bloquean la indexación?

Google afirma que «solo puede descubrir tus enlaces si son elementos HTML a con un atributo href» y desaconseja usar fragmentos de URL para cargar contenidos distintos. La mayoría de los fallos de SEO en React vienen de detalles de enrutado:

Para ver lo que renderiza Google, usa la herramienta de inspección de URLs de Search Console y consulta el HTML de la página probada, o pasa tus plantillas clave por un verificador de indexabilidad.

¿Cómo se gestionan el sitemap y los datos estructurados en React?

React no trae sitemap integrado. Genera sitemap.xml en el build a partir de tus rutas y datos (o con la función de sitemap de tu framework), incluye solo URL canónicas que respondan 200 y referencia el archivo en robots.txt. Para un sitio estático pequeño basta un generador de sitemap XML.

Los datos estructurados siguen la misma regla que los metadatos: renderiza el script JSON-LD con la página, a partir de los mismos datos, idealmente en el servidor. Google puede leer un JSON-LD inyectado por JavaScript tras el renderizado, pero el marcado que falta en el HTML inicial falta también para los rastreadores que no renderizan. Usa Article para los artículos, Product en e-commerce, Organization en todo el sitio y BreadcrumbList para las páginas profundas.

¿Cómo afecta el rendimiento al SEO en React?

Los paquetes de JavaScript grandes perjudican las Core Web Vitals: el navegador debe descargar, analizar e hidratar el código antes de que la página responda, lo que pesa en el Largest Contentful Paint y el Interaction to Next Paint, sobre todo en móvil. El anuncio del equipo de React sobre Create React App señala que el renderizado en el servidor envía menos JavaScript y un documento HTML completo, lo que acelera el First Contentful Paint y puede reducir el INP. Palancas útiles: dividir el código por ruta con React.lazy, servir imágenes con dimensiones explícitas, cargar en diferido los componentes bajo la parte visible y auditar los scripts de terceros.

¿Qué debe incluir una lista de control de SEO en React?

1. Cada URL indexable devuelve HTML completo (renderizado en el servidor o prerrenderizado), comprobado con curl.
2. Un título, una descripción y una canónica autorreferenciada únicos por URL.
3. Rutas basadas en el historial, sin URL con almohadilla, y cada enlace interno renderizado como un a con href.
4. Códigos de estado reales: 404 para páginas inexistentes, 301 o 308 para páginas movidas.
5. Un sitemap.xml generado con los mismos datos que las rutas y declarado en robots.txt.
6. JSON-LD renderizado con la página y validado con la prueba de resultados enriquecidos.
7. Scripts, estilos y API necesarios para el renderizado permitidos en robots.txt.
8. Código dividido por ruta y Core Web Vitals monitorizadas con usuarios reales.

¿Cómo hacer visible un sitio React en las respuestas de las IA?

El GEO (optimización para motores generativos) empieza por el acceso. Como los rastreadores de IA recogen el HTML sin procesar, una página React debe entregar su texto, sus encabezados y su JSON-LD sin JavaScript para ser leída, resumida y citada. Una auditoría de rastreabilidad para IA muestra lo que estos bots reciben de tus páginas. La segunda condición es un contenido que merezca ser citado: páginas que respondan a una pregunta por sección, con fuentes, cifras y definiciones claras.

Esa parte de contenido es la que automatiza Sorank, nuestro producto. Sorank es un software de SEO y GEO en autopilot: su generador de artículos de blog redacta y publica 20, 60 o 120 artículos al mes con fuentes, enlaces internos e imágenes, y se conecta por webhook a sitios a medida, como un sitio React o Next.js. Su SEO Chat responde en una conversación a tus preguntas sobre el rendimiento de tu sitio en la búsqueda.

En pocas palabras: sirve HTML desde el servidor, da a cada URL su propio título, descripción y canónica, y usa enlaces reales. Así React posiciona como cualquier otro sitio y los asistentes de IA pueden leerlo. Para alimentar ese sitio con artículos pensados para Google y las IA, consulta los planes de Sorank, desde 49 € al mes con 3 días de prueba gratis.