Todos los escenarios/ Desarrollador
Un sitio en JavaScript: qué ve un buscador antes y después del render
El sitio pasó a React, Vue u otro framework, y algunas páginas salieron del índice o aparecen con un title equivocado. En el navegador todo va bien, porque el navegador ejecuta JavaScript. Un buscador lee primero el HTML original, y necesitas saber qué le falta y qué cambia JavaScript.
- Quién
- Desarrollador front-end, tech lead, SEO técnico
- Sitio
- Una SPA o un sitio renderizado en el cliente, en parte o del todo
- Qué duele
- Páginas fuera del índice, snippets vacíos, enlaces que el buscador no ve
- Qué necesitas
- Las páginas donde el HTML y la versión renderizada difieren, y en qué
Pasos en Molfar
Renderiza todas las páginas
«Renderizado de JavaScript» en los ajustes de rastreo tiene tres modos. Automático solo renderiza las páginas con poco texto en el HTML original, así que no comparará una página con texto pero con un canonical cambiado por JavaScript. Para un sitio con framework elige «Todas las páginas»: más lento, pero cada página se lee dos veces.
Ajustes · Rastreo — documentación (en inglés)
En la captura: Ajustes de renderizado de JavaScript Espera el contenido que llega tarde
«Leer una página renderizada» decide cuándo una página está lista: cuando deja de cambiar, o cuando además la red queda en silencio. Lo segundo es para páginas que piden su texto tras cargar, como catálogos y reseñas.
Ajustes · Rastreo — documentación (en inglés)
En la captura: Pestaña JavaScript Encuentra texto que no está en el HTML
En la pestaña JavaScript, «Texto solo tras JavaScript» muestra páginas cuyo HTML original está casi vacío y cuya versión renderizada tiene texto. «JavaScript cambia el texto más del 20 %» encuentra páginas donde las dos versiones difieren mucho. Las columnas «Palabras (HTML original)» y «Cambio por JS, %» dicen cuánto. «Imágenes que solo aparecen al desplazarse» encuentra imágenes cuya dirección escribe un script solo cuando entran en la vista, sin alternativa en el HTML.
JavaScript — documentación (en inglés)En la captura: Pestaña JavaScript Comprueba qué cambia JavaScript en el head
Lo más peligroso es que JavaScript reescriba las señales para el índice. «El canonical cambia tras JavaScript», «Meta robots cambia tras JavaScript» y lo mismo para title, H1 y description muestran esas páginas, y la columna del canonical muestra los dos valores. Google indica que un noindex en el HTML original puede detener el renderizado, así que un script no puede quitarlo. Al lado, «Enlaces internos solo tras JavaScript»: enlaces que el buscador solo ve tras renderizar.
JavaScript — documentación (en inglés)En la captura: Pestaña JavaScript Abre una página de tres maneras
En el inspector de página, el panel de código tiene tres vistas: HTML original, Tras JavaScript y Añadido por JavaScript. La última muestra solo lo que el HTML no tenía: el fragmento exacto que debería enviar el servidor.
Inspector de página — documentación (en inglés)
En la captura: Tabla de todas las páginas con el inspector Compruébalo tras la publicación
Cuando el servidor envíe el texto, el canonical y los enlaces en el HTML, rastrea con los mismos ajustes y compara en Historial: las páginas deberían salir de los filtros de la pestaña JavaScript.
Historial — documentación (en inglés)
En la captura: Historial de rastreos
Lo que obtienes
Páginas vacías sin JavaScript
Las páginas cuyo texto solo existe tras renderizar, con las palabras antes y después.
Señales que cambia JavaScript
Canonical, meta robots, title, H1 y description distintos entre el HTML y la página renderizada.
Enlaces e imágenes para el servidor
Enlaces internos que solo aparecen tras JavaScript, imágenes sin alternativa en el HTML y los fragmentos que conviene renderizar en el servidor.
Conviene saber
- Molfar renderiza con su propio Chromium integrado. Google también renderiza con Chromium, con sus propios límites de tiempo y recursos, así que el resultado es parecido, no idéntico.
- En Automático solo se comparan las páginas que se renderizaron; la comparación completa necesita «Todas las páginas».
- El desplazamiento que encuentra esas imágenes solo se hace en páginas renderizadas: una página leída como HTML original no se desplaza. El loading="lazy" nativo está bien y no se cuenta.
- Renderizar es bastante más lento que leer HTML; en un sitio grande empieza por una muestra de secciones.
Preguntas
- ¿Qué modo para una SPA?
- «Todas las páginas», y «cuando además la red queda en silencio» en «Leer una página renderizada»: cada página se lee dos veces, con el contenido que llega por peticiones.
- ¿Puedo revisar una página sin rastrear?
- Sí. URL audit muestra si JavaScript cambia la página, junto con las demás comprobaciones de una dirección.
- ¿Puede revisarlo un agente?
- Sí. Por MCP puede iniciar un rastreo con el modo de renderizado que necesite, y la auditoría de una dirección devuelve las dos versiones de la página.