Aprender
Debugging de JavaScript SEO: HTML renderizado, hidratación y enlaces rastreables
Una guía de depuración SEO para React, Vue, Nuxt y Next.js: cómo Google renderiza JavaScript, por qué desaparecen contenido y enlaces y cómo hacerlos rastreables.
Ejecuta una auditoría nueva en DomainLens y usa el informe como lista de prioridades.
Cómo renderiza Google realmente el JavaScript
Google procesa una página JavaScript en dos olas. Primero rastrea la respuesta HTML en bruto; luego, cuando hay recursos de renderizado, ejecuta la página en un Chromium headless e indexa el DOM renderizado. El hueco entre esas olas explica lo sutil de los problemas de JavaScript SEO: la página funciona perfecta en tu navegador, pero el crawler indexó otra cosa — o renderizó tarde, o nada.
El hábito más importante es dejar de confiar en «Ver código fuente». Lo que importa es el HTML renderizado: lo que existe en el DOM tras ejecutar JavaScript, porque eso es lo que Google indexa. La mayoría de los bugs de JS SEO son solo un desajuste entre ambos.
Los fallos que ocultan contenido a los crawlers
- Contenido que solo se monta tras un fetch de datos en cliente, así el HTML inicial y renderizado quedan vacíos y el renderizado puede caducar antes de llegar.
- Enlaces creados como <span> o <div> con onclick o URLs javascript: — Google solo sigue <a href>, esas páginas son indescubribles.
- Metadatos (title, canonical, robots, hreflang) puestos por JavaScript de cliente, que pueden perderse o llegar tras la primera ola.
- Enrutado basado en la History API sin URLs renderizadas en servidor, así las páginas profundas no tienen punto de entrada rastreable.
- Bloquear a Googlebot los bundles de JS o CSS en robots.txt, impidiéndole renderizar la página.
Cómo revisar el HTML renderizado
Depurar JS SEO es sobre todo comparar lo que envías con lo que ve el crawler.
- Usa Inspección de URLs → «Probar URL en directo» → HTML renderizado y captura; es el render de Google, no el de tu navegador.
- Compara la respuesta en bruto (curl o «código fuente») con el DOM renderizado (Elements) — el contenido en el DOM pero no en la respuesta depende del JS.
- Desactiva JavaScript en DevTools y recarga: lo que desaparece es invisible para la primera ola y está en riesgo si el render se retrasa.
- Comprueba que title, canonical y robots meta existen en el HTML renderizado y coinciden con tu intención.
- Confirma que los enlaces internos son <a href> reales en el DOM, no manejadores de clic.
Cómo hacer rastreable un sitio JavaScript
- Renderiza en servidor o pre-renderiza el contenido y los metadatos para que existan en el HTML inicial — SSR (Next.js, Nuxt), generación estática o hidratación sobre salida de servidor.
- Emite enlaces <a href> reales para cada ruta que quieras rastrear e indexar.
- Pon las etiquetas SEO críticas (title, canonical, robots, hreflang) en servidor, no tras la hidratación.
- Nunca bloquees recursos JS/CSS en robots.txt; Google los necesita para renderizar.
- Mantén la salida renderizada estable y rápida — un render que caduca se trata como si el contenido no existiera.
Errores que empeoran el JS SEO
- Suponer que «Google ya renderiza JavaScript» significa que cualquier patrón JS es seguro — el render es diferido, presupuestado y puede fallar.
- Probar las etiquetas SEO en las DevTools del navegador en vez del HTML renderizado de Google.
- Usar un soft 404 (estado 200 con una cáscara SPA vacía) para rutas que no existen.
- Servir a Googlebot contenido distinto al de los usuarios para «ayudar» al render — eso es cloaking.
Cómo validar la corrección
Vuelve a ejecutar la Inspección de URLs y confirma que el HTML renderizado ahora contiene el contenido, las etiquetas canonical y robots correctas y enlaces rastreables. Luego revisa el informe de indexación los días siguientes para confirmar que las URLs entran al índice.
En DomainLens, trata el HTML renderizado como la verdad: obtiene y lee la página como un crawler, así que un title, canonical o enlace que solo existe tras la hidratación aparece como ausente — exactamente como Google puede verlo.