Auditoría SEO para React
Descubre lo que Google se pierde en tu app de React
DeepAudit AI es una auditoría SEO con navegador real y un escáner SEO de JavaScript creado para aplicaciones de React. Ejecuta el mismo entorno de Chromium que usa Googlebot, espera la hidratación y te muestra exactamente lo que el índice realmente ve.
Gratis. Sin registro. 60 segundos por URL.
React rompe las herramientas SEO genéricas
La mayoría de las herramientas SEO analizan la respuesta HTML inicial y puntúan la página a partir de ahí. Ese modelo funcionaba cuando los sitios web eran archivos HTML renderizados en el servidor. Para una app de React renderizada en el cliente, la respuesta HTML inicial es un <div id="root"></div> vacío con una etiqueta de script. La herramienta informa de un análisis limpio porque no hay nada en la página que señalar. Mientras tanto, Googlebot está fallando en silencio al indexar tu contenido real.
Google indexa las apps de JavaScript en dos pasadas. La primera pasada lee el HTML inicial y pone la página en cola para su renderizado. La segunda pasada ejecuta JavaScript con un presupuesto de renderizado e indexa lo que ve.
Los rastreadores de IA detrás de ChatGPT, Claude y Perplexity no hacen una segunda pasada en absoluto. Descargan tu HTML inicial y se detienen, así que una app de React que se renderiza en el cliente es invisible para ellos. Nuestro Estudio de Visibilidad de IA de 368 sitios encontró que las versiones renderizadas en el cliente eran las de peor desempeño, y 1 de cada 4 sitios ocultaba contenido esencial a los rastreadores que no renderizan. Esta auditoría comprueba ambas cosas: lo que Google renderiza y lo que un rastreador de IA realmente recibe.
Las páginas que superan el presupuesto — hidratación lenta, paquetes grandes, importaciones dinámicas de contenido crítico, errores de hidratación que abortan el renderizado — nunca logran que su contenido real se indexe. Se quedan en Search Console con errores de contenido escaso o simplemente nunca posicionan.
Una auditoría SEO con navegador real soluciona esto renderizando la página exactamente como lo hace Googlebot. DeepAudit AI ejecuta tu URL en una instancia headless de Chromium, espera a que la red se estabilice, captura el DOM posterior a la hidratación y lo compara con la respuesta HTML inicial.
Cada diferencia es un riesgo potencial de indexación. Las mostramos junto con el anti-patrón específico de React responsable — rutas solo en CSR, desajustes de hidratación, metadatos definidos en useEffect, H1 con carga diferida — y las ubicaciones exactas del código para corregirlas.
Catálogo de fallos SEO de React
Ocho formas en que React rompe la indexación en silencio
Estos son los anti-patrones específicos que vemos con más frecuencia en apps de React en producción. Algunos son sutiles: un H1 con carga diferida parece una mejora de rendimiento hasta que te das cuenta de que cayó del lado equivocado del presupuesto de renderizado de Google. Otros son estructurales: un router que usa onClick en lugar de atributos href reales limitará en silencio tu superficie indexable a lo que el sitemap liste explícitamente.
DeepAudit AI detecta los ocho. El siguiente panel explica cómo funciona la detección de cada uno.
Rutas solo en CSR que Google nunca termina de renderizar
Páginas donde todo el árbol de contenido depende de la ejecución de JavaScript en el cliente. Googlebot ve un <div id='root'></div> vacío en la primera pasada, pone la página en cola para una segunda pasada y con frecuencia se rinde antes de que se complete la hidratación. Síntoma: páginas indexadas con contenido escaso o genérico; techos de posicionamiento muy por debajo de los equivalentes en SSR.
Desajustes de hidratación que sobrescriben el contenido indexado
Cuando el servidor renderiza un DOM y el cliente renderiza otro distinto, React reemplaza la salida del servidor durante la hidratación. Google ya ha guardado en caché la versión del servidor. Resultado: el fragmento de búsqueda muestra tu contenido de reserva ("Cargando...", títulos predeterminados, meta vacías) en lugar de la página real. A menudo lo causan Date.now(), Math.random(), mutaciones en useEffect o APIs exclusivas del navegador que se filtran al renderizado.
Etiquetas de título y meta definidas dentro de useEffect o React Helmet
Cualquier metadato modificado después del renderizado inicial es invisible para el índice de la primera pasada. React Helmet solo funciona cuando se usa con un renderizador de servidor; en una app de CSR define los metadatos demasiado tarde. El HTML de la primera pasada contiene tu predeterminado <title>App</title> para siempre, sin importar lo que hagan tus rutas en el cliente.
Contenido visible sin desplazamiento con carga diferida
Los componentes importados con React.lazy() o dynamic() retrasan el renderizado hasta que se descarga el chunk. Cuando este patrón envuelve tu H1, el texto principal o el contenido primario, el first contentful paint se mueve por debajo del pliegue — y el límite del presupuesto de renderizado a veces se activa antes de que llegue el chunk. El contenido indexable se vuelve intermitente.
Navegación interna que no produce enlaces <a href> reales
React Router con onClick={() => navigate(...)} en elementos <button> crea una transición de ruta que Google no puede seguir. El alcance del rastreo se reduce a las URLs que aparecen en el sitemap y los enlaces entrantes; todo lo demás se cae del índice. La solución es usar obligatoriamente <Link> o <a> con atributos href reales que también funcionen como manejadores de clic.
Datos estructurados inyectados después de la hidratación
El esquema JSON-LD añadido a través de useEffect o un gestor de etiquetas de terceros se ejecuta después del renderizado de la primera pasada. El analizador de datos estructurados de Google lee la primera pasada; el esquema no está. La elegibilidad para resultados enriquecidos cae a cero en silencio. El esquema debe estar en la respuesta HTML inicial, no añadido en el cliente.
Exportación estática que omite rutas impulsadas por API
next export y pipelines de exportación estática similares generan un archivo HTML por cada ruta conocida. Las rutas que dependen de la obtención de datos en tiempo de ejecución renderizan con contenido de reserva obsoleto o devuelven un 404 por completo. Con frecuencia rompe páginas de detalle de blog, páginas de producto y páginas de ciudad dinámicas — justo la cola larga de la que depende el SEO.
Componentes de imagen sin dimensiones explícitas
Las etiquetas <img> o next/image sin width y height obligan al navegador a desplazar el diseño en cada paint. Las puntuaciones de CLS se disparan, los Core Web Vitals fallan y Google posiciona la página por debajo de lo que justifica la calidad del contenido. React hace que esto sea trivialmente fácil de pasar por alto porque el componente de imagen parece inofensivo.
Cómo funciona la detección
Navegador real, comparación de dos pasadas, cada señal
DeepAudit AI está construido sobre un entorno headless de Chromium — el mismo motor de navegador que usa Googlebot. Cada auditoría ejecuta tu URL con una carga completa de página con ejecución de JavaScript, detección de inactividad de red y una compuerta de espera de hidratación. Capturamos tres instantáneas: la respuesta HTML inicial en bruto, el DOM en el first contentful paint y el DOM completamente hidratado después de que React termina de montarse.
Comparar esas tres instantáneas es de donde proviene la señal específica de React. Las rutas solo en CSR se detectan cuando la respuesta HTML inicial no contiene contenido semántico — cuerpo vacío, solo el nodo de montaje — pero el DOM posterior a la hidratación tiene la página real.
Los desajustes de hidratación aparecen cuando el DOM posterior a la hidratación difiere estructuralmente de la instantánea del first contentful paint, lo que indica que React reemplazó el contenido renderizado en el servidor.
Las etiquetas de título y meta definidas en useEffect o React Helmet aparecen como una diferencia entre el head del HTML inicial y el head del documento final.
El contenido visible sin desplazamiento con carga diferida se detecta rastreando qué elementos del DOM aparecen dentro del viewport en el primer paint frente a después de que cargan los chunks dinámicos.
La auditoría de enlaces internos inspecciona cada elemento interactivo en el árbol renderizado. Los botones o divs con manejadores onClick que realizan navegación pero carecen de un atributo href real se marcan como invisibles para el rastreo.
La cobertura de exportación estática se comprueba cruzando el sitemap descubierto con las rutas realmente renderizadas durante un análisis profundo, revelando rutas que existen en el código pero nunca producen un archivo HTML estático.
Cada auditoría también ejecuta la batería estándar: una auditoría completa de Core Web Vitals (LCP, CLS, INP) medida en las mismas condiciones que usan los datos de campo de Google, validación de datos estructurados frente a la especificación de JSON-LD, auditoría de dimensiones de imagen para prevenir el CLS y una lista de verificación completa de SEO on-page.
Las señales específicas de React se superponen sobre esa base, así que obtienes un solo informe que cubre tanto el SEO genérico como los modos de fallo específicos de React.
Mira lo que Google ve en tu app de React
Introduce cualquier URL y DeepAudit AI ejecuta la auditoría SEO con navegador real completa, el escáner SEO de JavaScript y la auditoría de Core Web Vitals en una sola pasada. Comparación de hidratación, detección de CSR, validación de esquema y un informe en PDF descargable. Sin registro, sin tarjeta de crédito, 60 segundos.
Iniciar auditoría SEO gratuitaPreguntas frecuentes
Preguntas de SEO para React, respondidas
¿Por qué las apps de React necesitan una auditoría SEO diferente?
Las herramientas SEO genéricas analizan la respuesta HTML inicial. Las apps de React renderizan la mayor parte de su contenido en el cliente después de que se ejecuta JavaScript, así que los rastreadores genéricos ven una cáscara vacía y se pierden todos los problemas SEO reales. Una auditoría SEO para React necesita una auditoría SEO con navegador real que ejecute JavaScript, espere la hidratación e inspeccione el DOM completamente renderizado — igual que lo hace Googlebot.
¿Googlebot realmente renderiza las apps de React?
Sí, pero en un índice de dos pasadas. Google indexa primero la respuesta HTML inicial y luego pone la página en cola para una segunda pasada que ejecuta JavaScript y renderiza el DOM. La segunda pasada funciona con un presupuesto de renderizado. Las páginas que no superan el presupuesto — JS lento, errores de hidratación, importaciones dinámicas de contenido crítico — nunca logran que su contenido renderizado se indexe. Nuestro escáner SEO de JavaScript simula ambas pasadas para que veas lo que Google realmente indexa.
¿Qué es la hidratación y por qué importa para el SEO?
La hidratación es cuando React adjunta los manejadores de eventos al HTML renderizado en el servidor, convirtiendo una página estática en una app interactiva. Un desajuste de hidratación ocurre cuando el HTML renderizado en el servidor difiere de lo que renderiza el cliente. Google ve primero la versión renderizada en el servidor y puede usarla como contenido indexado — incluso si tu contenido real solo aparece después de la hidratación. Nuestro escáner compara el HTML del servidor con el DOM posterior a la hidratación y marca los desajustes.
¿Puede posicionar en Google una app de React solo en CSR?
A veces, pero con un techo mucho más bajo. Las rutas renderizadas puramente en el cliente dependen por completo del presupuesto de renderizado de Google y de la ejecución de JavaScript. Suelen tener tasas de rastreo más bajas, retrasos de indexación más largos y peores Core Web Vitals que los equivalentes renderizados en el servidor o generados estáticamente. Si tu app de React usa solo CSR para las páginas de contenido, nuestra auditoría te dirá exactamente qué rutas están en riesgo.
¿Cuál es la diferencia entre el SSR de Next.js y el CSR de React para el SEO?
Next.js con SSR o generación estática produce HTML completamente renderizado en el servidor, así que Google indexa el contenido real en la primera pasada sin esperar la ejecución de JavaScript. React puro (Create React App, Vite, etc.) con enrutamiento en el cliente produce una cáscara vacía que depende del renderizado de la segunda pasada. El SSR es notablemente mejor para el SEO; el CSR solo funciona para apps donde la mayor parte de tu tráfico está autenticado o detrás de un inicio de sesión.
¿Cómo detecta la auditoría SEO para React las etiquetas meta faltantes?
Muchas apps de React definen las etiquetas de título y meta dentro de useEffect o React Helmet, que solo se ejecutan después de JavaScript. Nuestra auditoría SEO con navegador real captura tanto la respuesta HTML inicial como el DOM posterior a la hidratación, y luego los compara. Si las etiquetas meta existen después de la hidratación pero no antes, la página se marca: el índice de la primera pasada de Google ve los valores predeterminados vacíos, no tus metadatos reales.
¿La auditoría SEO para React también comprueba los Core Web Vitals?
Sí. Cada análisis incluye una auditoría completa de Core Web Vitals — Largest Contentful Paint, Cumulative Layout Shift e Interaction to Next Paint — medidos en las mismas condiciones que usa el conjunto de datos CrUX de Google. El rendimiento y el SEO están estrechamente ligados en las apps de React porque la hidratación lenta y los grandes paquetes de JavaScript perjudican directamente el LCP y el INP.
¿Cuánto tarda la auditoría SEO para React?
Alrededor de 60 segundos por URL en una auditoría de una sola página. El análisis profundo rastrea hasta 50 rutas de tu sitemap y ejecuta la batería completa en cada una — normalmente de 5 a 10 minutos en total. Sin registro, sin tarjeta de crédito, con un informe en PDF descargable al final.
Relacionado
Las apps de JavaScript y las SPA necesitan el mismo enfoque
React es uno de varios frameworks que ocultan problemas de indexación detrás de la hidratación. La misma auditoría cubre Vue, Angular, Svelte y cualquier aplicación de una sola página.
La auditoría de React alimenta el lado técnico de nuestro trabajo de marketing digital. Mira todos los servicios.
Auditoría SEO para SPA
Las aplicaciones de una sola página en React, Vue, Angular y Svelte comparten los mismos modos de fallo de indexación. El escáner de DeepAudit AI los detecta con una sola auditoría.
- Detección independiente del framework
- Vue / Angular / Svelte / Solid
- El mismo motor de comparación de hidratación
Renderizado de JavaScript y SEO
La base técnica: cómo funciona realmente el índice de dos pasadas de Google, qué significa el presupuesto de renderizado en la práctica y cómo diseñar la arquitectura para ello.
- Recorrido del índice de dos pasadas
- Compensaciones entre SSR, SSG y CSR
- Diagnóstico del presupuesto de renderizado
Empieza
Audita tu app de React
Introduce cualquier URL. DeepAudit AI ejecuta la auditoría SEO con navegador real, el escáner SEO de JavaScript y la auditoría de Core Web Vitals. Obtienes la comparación entre lo que ve el índice de la primera pasada de Google y lo que tu app hidratada realmente renderiza, con los anti-patrones específicos de React identificados y las ubicaciones del código señaladas.