Herramienta de Página Vista por Google: Ingresa URL, HTML Renderizado + DOM + H1–H2 Real

Herramienta: Ingresa URL → Descompón el Sitio (SEO + UX + Técnico)

No se trata de un simple “auditoría de sitio / seo audit”. Esta herramienta responde a la siguiente pregunta en una sola página: “¿Cómo ve realmente Google esta página; el usuario qué ve en la primera pantalla?”

Punto crítico desde Google: Googlebot, especialmente en páginas con mucho JavaScript, evalúa a través de HTML renderizado; no es suficiente solo “ver fuente”. 

1) Qué hace

• Escaneo de página / crawler de sitio / auditoría de una sola URL (single page audit): Extrae la URL, lee el estado HTTP y las señales básicas del head.
• Modo “cómo ve Googlebot / view as Googlebot”:
  • HTML renderizado / fuente renderizada genera (DOM que se forma después de JS) y lo muestra en crudo. 
  • Se enfoca en generar una salida similar a view rendered page / view crawled page (captura de pantalla + HTML) con la lógica de “Inspección de URL de Google Search Console”. 
• Vista de texto puro / text only view / simulador de motor de búsqueda: Simplifica el contenido que Google puede “leer” como texto y enlaces. 
• Estructura de encabezados real: A través de la lógica de estructura de encabezados / prueba de etiquetas de encabezado / esquema de encabezados, extrae la jerarquía H1–H2–H3 desde el DOM renderizado (también captura encabezados H que JS cambió posteriormente). 
• Diagnóstico de “empuje hacia abajo” UX (análisis de above the fold / primera pantalla ): Marca las áreas que empujan al usuario hacia abajo: héroe grande, encabezado fijo, banner de cookies, popup, bloques de anuncios, etc. El concepto de “Above the fold” proporciona un marco claro en este punto. 
• Análisis de cambio de diseño / CLS: Marca las áreas que causan saltos en la primera pantalla (cumulative layout shift) basado en DOM; es compatible con el enfoque CLS de Lighthouse. 

2) Por qué “no es una auditoría clásica”

Los informes de análisis SEO técnico clásicos generalmente dan “lista de hallazgos + puntaje”. Tu objetivo es diferente:

• Mostrar la diferencia entre Google y el usuario de manera desnuda en una sola URL.
• Producir el shock de “La página que pensé que era diferente a la que ve Google”. Esta diferencia surge especialmente en temas como renderizado JS, contenido oculto, canonical incorrecto/noindex, H1 añadidos/eliminados posteriormente en el DOM.

3) Entrada / Salida

Entrada:

• Una sola URL (opción: selección de agente de usuario: desktop/móvil; simulación de “renderizado de googlebot”)

Paneles de salida (claros y enfocados en la acción):

1. Instantánea de Página Renderizada (pantalla del usuario + renderizado similar a Google)
2. HTML Renderizado / Árbol DOM (análisis DOM, conteo de nodos, elementos críticos)
3. Texto Puro + Mapa de Enlaces (vista solo de texto, extracción de enlaces internos)
4. Árbol de Estructura de Encabezados (verificador de H1, verificador de encabezados; errores de jerarquía)
5. Señales de Head SEO (control de meta título , control de meta descripción, control de canonical, control de meta tag robots, control de hreflang, control de noindex)
6. Bloques Above the Fold / Below the Fold (lista de áreas que empujan al usuario hacia abajo)
7. Pistas de CLS / LCP (core web vitals, análisis de lcp, análisis de cls; candidatos a recursos que bloquean el renderizado)

4) Cómo marca “áreas innecesarias que empujan al usuario hacia abajo”

La herramienta toma como referencia la primera pantalla (viewport) y captura:

• Área de héroe demasiado grande: Marca si H1 está desconectado del contenido y la primera pantalla es un “escaparate vacío”.
• Análisis de banner de cookies / análisis de popup: Muestra las capas que se superponen al contenido o que ocupan la primera pantalla.
• Análisis de encabezado fijo / análisis de área de anuncios: Lista los bloques fijos que empujan hacia abajo el inicio del contenido real.
• Comportamientos que desencadenan cambios de diseño: Captura áreas que caen en razones de CLS como “evitar insertar nuevo contenido por encima de la línea de pliegue”. 

5) Mejor uso en el mundo real escenarios

• Que la agencia muestre evidencia al cliente de “mira, así lo ve Google” (termina la discusión).
• Capturar problemas de visibilidad causados por SEO de javascript en estructuras como SPA / React / Next.js (diferencia entre html renderizado y código fuente). 
• Realizar revisiones de “casi realidad” incluso en proyectos sin acceso a Search Console (luego verificar con Inspección de URL de GSC). 
• Acelerar el enfoque de “HTML renderizado” de herramientas como Screaming Frog reduciéndolo a una sola página (sin configuración, sin rastreo). 

6) Promesa clara (la “sorpresa” que experimentará el usuario)

• Si el contenido que se cree que está en el DOM no está: No aparece en el texto desnudo → Se entiende que Google no puede recibirlo como texto.
• Si lo que creías que era H1 es H2 (o si JS lo cambia posteriormente): El panel de estructura de encabezados lo muestra desnudo. 
• Si la primera pantalla está “ocupada”: El panel de above the fold proporciona una lista de áreas que empujan al usuario hacia abajo.