Cómo saber si JavaScript está perjudicando la indexación del sitio

Lectura ejecutiva

Conclusiones principales

• Google utiliza un proceso de 'dos ondas' para JavaScript: primero rastrea el HTML estático, luego pone el JS en la cola del Web Rendering Service (WRS).
• El contenido esencial y los enlaces primarios siempre deben existir en el HTML inicial enviado por el servidor (SSR o SSG).
• Los botones que actúan como enlaces mediante `onClick=window.location` no son leídos por los rastreadores; destruyen el descubrimiento de nuevas páginas.
• Los cuellos de botella de hidratación (Hydration) en los frameworks modernos retrasan la capacidad de la IA y los rastreadores para comprender la jerarquía del sitio.

En los últimos diez años, el desarrollo web ha experimentado una revolución arquitectónica. Pasamos de páginas generadas en el servidor (PHP, Ruby, Python) a Aplicaciones de Página Única (SPA) controladas por frameworks como React, Vue y Angular.

Si bien esto mejoró la transición entre pantallas para el usuario registrado, introdujo uno de los mayores cuellos de botella de adquisición modernos: la dependencia del renderizado del lado del cliente. La creencia de que "Google lee JavaScript perfectamente" animó a los equipos de ingeniería a enviar aplicaciones enteras que, cuando las lee un bot en la primera onda de rastreo, no son más que un bloque vacío que contiene <div id="root"></div>.

Comprender si JavaScript está perjudicando el SEO y el renderizado de su operación no es una tarea subjetiva; es un proceso de depuración (debugging) quirúrgico. Esta guía detalla la evidencia exacta para diagnosticar cuándo su arquitectura front-end está impidiendo que su producto sea encontrado.

---

1. El proceso de dos ondas: Cómo procesa Google el JavaScript

Para diagnosticar la indexación, debe comprender la mecánica de Googlebot. No se comporta como un usuario en un Macbook M3.

1. La primera onda (HTML estático): El rastreador (crawler) realiza una solicitud HTTP. El servidor responde con el código HTML. Googlebot lee este texto sin formato de inmediato. Extrae los enlaces (<a href="...">) y evalúa las metaetiquetas y el texto visible.
2. La cola de renderizado (WRS): Si el HTML está vacío (solo llamadas a archivos .js), Google coloca esa URL en una cola para el Web Rendering Service (WRS).
3. La segunda onda (El renderizado): Horas, días o incluso semanas después, un servidor Headless Chrome en Google toma la URL de la cola, descarga los scripts, ejecuta el JavaScript, construye el DOM (Modelo de Objetos del Documento) final y, solo entonces, indexa el contenido y descubre nuevos enlaces.

Cuando confía por completo en la segunda onda para exponer su contenido (Client-Side Rendering puro), pierde previsibilidad comercial. El diagnóstico de indexación de SPA y contenido dinámico revela que las promociones del Black Friday podrían ni siquiera ser leídas por Googlebot a tiempo para el evento si requieren procesamiento de JS para aparecer.

---

2. Ensayo clínico 1: La prueba de "JavaScript desactivado"

El primer paso de una auditoría de sitio orientada a evidencia es simular las condiciones más adversas del rastreador inicial.

Cómo ejecutar:

1. Abra Google Chrome.
2. Acceda a DevTools (F12).
3. Presione Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows).
4. Escriba "Disable JavaScript" y presione Enter.
5. Vuelva a cargar su Landing Page principal.

Interpretación de la Evidencia:

• Aprobación Quirúrgica: El sitio pierde su formato e interactividad (los carruseles se rompen), pero todo el texto, el título H1, las imágenes de los productos y, de manera crítica, los enlaces en el menú de navegación siguen ahí en formato de texto.
• Falla Crítica (Fuga de ingresos): El sitio muestra una pantalla blanca. Una barra de carga que nunca termina. Un texto genérico de "Por favor, active JavaScript".

Si cae en una falla crítica, su sitio requiere que Google gaste recursos valiosos (computación del WRS) solo para saber de qué habla su página.

---

3. Ensayo clínico 2: Comparación del código fuente frente al DOM renderizado

La prueba de JS desactivado puede ser demasiado drástica. Google sí renderiza JS. La verdadera pregunta es: ¿qué se pierde durante la traducción?

Muchos equipos utilizan métodos híbridos (Next.js, Nuxt) que cargan un esqueleto básico y obtienen datos de precios o reseñas de clientes a través de solicitudes de API del lado del cliente dos segundos después. Si la API es lenta durante el rastreo del bot, estos bloques de contenido vitales no se indexarán. Recuerde, el sitio necesita orden de ejecución, no solo datos puros.

Cómo auditar con precisión:

1. Utilice la herramienta de Inspección de URL en Google Search Console.
2. Ingrese la URL problemática.
3. Haga clic en "Probar URL publicada".
4. Vaya a "Ver página probada" y haga clic en la pestaña "HTML".

Busque bloques de texto (ej. descripciones detalladas de productos) en este HTML probado. Si la descripción del producto aparece en la pantalla de su teléfono móvil, pero no aparece en la pestaña HTML de la Prueba en Vivo de GSC, significa que la ejecución de su JavaScript falló en el momento de la prueba del bot (debido a timeout, un error de CORS bloqueado para el robot o un bloqueo de polyfill).

---

4. El asesino silencioso del Crawl Budget: Enlaces no rastreables

En las aplicaciones de React, es extremadamente común encontrar botones que enrutan al usuario internamente a través de un paquete como react-router. Los ingenieros, centrados en la UX, podrían implementar "enlaces" como este:

<span className="boton-comprar" onClick={() => router.push('/producto/xyz')}>
  Ver detalles del producto
</span>

¿Por qué esto destruye su negocio? Googlebot no hace clic en elementos, no interactúa con la página y no se desplaza hacia abajo buscando reacciones. Escanea pasivamente en busca de etiquetas de anclaje válidas con el atributo href. El elemento anterior es un agujero negro. No se transmitirá fuerza de PageRank. El rastreador nunca encontrará la URL /producto/xyz a través de esta página.

Entre los errores más comunes en React y Next.js, la ausencia de etiquetas <a> nativas es el más letal.

La Solución de Ingeniería: Todos los enlaces que se deben seguir necesitan etiquetas <a> HTML5 con un href legítimo. El framework puede interceptar el clic (prevent default) más adelante para evitar la recarga (comportamiento SPA), pero la ruta estática debe estar allí.

import Link from 'next/link'

// Next.js compilará esto en una etiqueta <a> real perfecta para la indexación
<Link href="/producto/xyz" className="boton-comprar">
  Ver detalles del producto
</Link>

---

5. IA y renderizado dinámico (La evolución del diagnóstico)

Mientras debatimos la indexación clásica, la arquitectura moderna sufre una presión paralela. Los motores generativos (LLM), Search Generative Experience (SGE) de Google y los bots de OpenAI rastrean el sitio de manera más pragmática y barata.

Estos rastreadores de nueva generación eluden con frecuencia ejecuciones costosas. Comprender cómo operan los rastreadores de IA, robots y controles revela que la abrumadora mayoría de estas máquinas extrae datos a través de bibliotecas rudimentarias que no renderizan JavaScript.

Si su empresa busca estar presente en respuestas sintéticas del mercado (AEO - Answer Engine Optimization), su contenido "oculto" en JS simplemente no existe para la IA. Las diferencias estructurales entre SEO, GEO y AEO exigen que la carga útil crítica (payload) esté disponible en el HTML sin procesar inicial. El renderizado dinámico impulsado por IA se ha convertido en el estándar de oro: servir un HTML denso y semántico para la máquina y una aplicación interactiva (hidratada) para el humano.

---

6. Diagnóstico de Datos Estructurados (Schema.org) Generados vía JS

Algunas empresas delegan la construcción de metadatos como JSON-LD (Schema.org) por completo a JavaScript, inyectando las etiquetas en el <head> del lado del cliente.

Esto es problemático porque Schema es el lenguaje principal que traduce la intención comercial de su producto (Precio, Disponibilidad, Reseñas). Inyectar a través de JS significa que esta valiosa información puede tardar días en ser validada por la segunda onda de renderizado de Google.

La validación del marcado semántico y Schema para LLMs debe seguir la misma regla que los enlaces primarios: los datos para Product, Organization y FAQPage deben venir en el Código Fuente (Source Code) para garantizar la extracción inmediata en la primera onda de rastreo. Un sitio es una interfaz que traduce el mundo para humanos y máquinas; y la máquina lee mucho más rápido cuando no se ve obligada a ejecutar scripts de compilación.

---

Conclusión y plan de acción

JavaScript no es intrínsecamente malo para el SEO, pero la implementación perezosa sí lo es. Transferir todo el costo de renderizado y compilación desde su servidor a la máquina del cliente y a los rastreadores de Google es una decisión que cuesta muy cara en términos de descubrimiento orgánico y conversión técnica.

Cómo proceder:

1. Audite sus principales rutas comerciales con la herramienta de Inspección de URL de Search Console y verifique la integridad del HTML renderizado.
2. Escanee su base de código (grep) en busca de eventos genéricos onClick que actúen como rutas de navegación. Reemplácelos con enlaces <a>.
3. Migre la lógica pesada de SSR (Server-Side Rendering) o SSG (Static Site Generation) en sus frameworks de JS (como Next.js o Nuxt) para el contenido vital, dejando CSR (Client-Side) solo para los componentes que requieren la interactividad de un usuario que ha iniciado sesión.

La velocidad y la claridad de la indexación no son métricas de vanidad técnica. Son la garantía de que sus oportunidades de ventas están visibles en la red.

Respuestas directas

Preguntas frecuentes

¿Puede Google leer e indexar sitios creados en React o Vue?

Sí, Googlebot tiene un motor Chromium actualizado. Sin embargo, procesar JavaScript cuesta poder de computación. Los sitios muy grandes creados exclusivamente con CSR (Client-Side Rendering) sufren graves retrasos de indexación porque Google los coloca en colas de espera para su renderizado.

¿Cómo verifico lo que Google realmente ve en mi sitio?

Utilice Google Search Console. Vaya a 'Inspección de URL', haga clic en 'Probar URL publicada' y vea la pestaña 'HTML renderizado'. Compare esto con el HTML inicial (Ver código fuente de la página en el navegador). La diferencia entre los dos es donde viven sus problemas de JS.

¿Qué es la 'Hidratación' (Hydration) y por qué afecta al SEO?

Es el proceso mediante el cual el JavaScript 'despierta' el HTML estático en el navegador para que se vuelva interactivo. Si la carga de JS es gigantesca, la página permanece inactiva durante segundos, lo que afecta gravemente métricas como INP y retrasa la comprensión final de la estructura por parte de los bots.