Análisis de sitios en JavaScript

Introducción a los sitios en JavaScript

Hasta hace unos años, uno de los problemas SEO más habituales era conseguir indexar páginas con contenido generado dinámicamente con JavaScript. Los bots de los buscadores no sabían rastrear ni indexar esos recursos y solo tenían en cuenta el contenido del código fuente HTML estático.

Al mismo tiempo, frameworks como AngularJS, React y Vue.js, las aplicaciones de una sola página (SPA) y las progressive web apps (PWA) evolucionaron, lo que llevó a Google a avanzar mucho hasta entender las páginas como un navegador moderno.

Sin embargo, aunque hoy Google suele poder rastrear e indexar la mayoría del contenido JavaScript, recomienda el renderizado del lado del servidor, el prerrenderizado o el renderizado dinámico en lugar de depender del JavaScript del lado del cliente, porque a los rastreadores todavía les cuesta procesar el JavaScript con éxito o al instante.

Por eso, al analizar un sitio, es fundamental entender las diferencias entre el DOM, una vez que JavaScript ha construido la página, y la respuesta HTML estática.

JavaScript, SEO Spider y algunas advertencias

Screaming Frog te ayuda con su modo «JavaScript Rendering», que integra la librería Chromium para emular lo mejor posible el comportamiento de Googlebot.

Pestaña JavaScript de Screaming Frog con Word Count, los filtros JavaScript en la barra lateral y la vista previa Rendered Page

Para profundizar: en 2019 Google actualizó su Web Rendering Service (WRS), antes basado en Chrome 41, a la última versión estable de Chrome, lo que añadió compatibilidad con más de mil funciones.

Veamos algunos aspectos de los sitios en JavaScript:

1. Activa el «JavaScript Rendering» con cuidado

Entender las diferencias entre el DOM y el HTML estático tras ejecutar el JavaScript es muy importante, pero no te aconsejo activar el modo «JavaScript Rendering» en todos los sitios sin distinción.

El rastreo con JavaScript es más lento y más pesado para el servidor, porque hay que obtener todos los recursos (JavaScript, CSS, imágenes, etc.) para renderizar cada página. En sitios pequeños no importa, pero en grandes portales o e-commerce puede ser un obstáculo en tiempo y RAM.

1. Ten en cuenta los principios y límites del rastreo JavaScript

Todos los recursos de una página (JS, CSS, imágenes) deben estar disponibles para rastrearse, renderizarse e indexarse.

Google sigue exigiendo URL limpias y únicas para cada página, y los enlaces deben estar en etiquetas de anclaje HTML adecuadas (puedes ofrecer un enlace estático y a la vez llamar a una función JavaScript).

Googlebot no interactúa como los usuarios: por ejemplo, no hace clic para cargar eventos adicionales tras el renderizado (un clic, un hover o un scroll).

La captura de la página renderizada se toma cuando se considera que la actividad de red ha terminado, o pasado un umbral de tiempo. Si una página tarda mucho en renderizarse, corre el riesgo de omitirse y de que sus elementos no se vean ni se indexen.

En general Google renderiza todas las páginas, pero no las pone en cola de renderizado si tienen un ‘noindex’ en la respuesta HTTP inicial o en el HTML estático.

Por último, el renderizado de Google está separado de la indexación. Google rastrea primero el HTML estático de un sitio y aplaza el renderizado hasta que tiene recursos.

Cuando empiezas a desarrollar un sitio, conocer estas condiciones es vital para el éxito o el fracaso del proyecto en cuanto a posicionamiento orgánico.

JavaScript del lado del servidor y del cliente

Google desaconseja depender del JavaScript del lado del cliente y recomienda el «progressive enhancement»: construir la estructura y la navegación del sitio solo con HTML y luego mejorar el aspecto y la interfaz con AJAX.

Por eso, si usas un framework JavaScript, Google recomienda el renderizado del lado del servidor, el prerrenderizado o el renderizado híbrido, que pueden mejorar el rendimiento para los usuarios y para los rastreadores.

Con el renderizado del lado del servidor (SSR) y el prerrenderizado, la ejecución del JavaScript genera una primera versión HTML renderizada y lista para rastrear.

El renderizado híbrido (a veces llamado «isomórfico») ejecuta JavaScript en el servidor para la carga inicial y el HTML, y en el cliente para los elementos no críticos y las páginas siguientes.

Muchos frameworks JavaScript como React o Angular Universal permiten el renderizado del lado del servidor e híbrido.

Como alternativa, puedes usar el renderizado dinámico.

Es especialmente útil cuando no puedes modificar el código del front-end. El renderizado dinámico sirve el renderizado del lado del cliente a los usuarios y contenido prerrenderizado a los buscadores.

Los tiempos de rastreo de Google

Aunque estas tres soluciones resuelven la mayoría de los problemas de rastreo, conviene tener en cuenta otro aspecto.

Google indexa en dos fases: primero rastrea e indexa el HTML estático y después vuelve, cuando hay recursos disponibles, para renderizar la página y rastrear e indexar el contenido y los enlaces del HTML renderizado.

Pipeline de Googlebot para rastreo, renderizado e indexación: Crawl Queue, Crawler, Processing, Render Queue, Renderer e Index — El pipeline de Googlebot. Fuente: Google Search Central.

El tiempo entre rastreo y renderizado puede ser muy largo (hasta 7 días), lo que es un problema para los sitios cuyo contenido es urgente por naturaleza o caduca (p. ej. sitios de noticias o de eventos); el tiempo medio (anunciado en el Chrome Dev Summit de 2019) es de 5 segundos.

Cómo identificar el JavaScript

Identificar un sitio construido con un framework JavaScript puede ser bastante sencillo, pero diagnosticar secciones, páginas o solo pequeños elementos adaptados dinámicamente con JavaScript puede ser mucho más complicado. Al empezar una auditoría SEO, conviene saber enseguida si hay JavaScript y si el sitio puede tener problemas en los rastreos de los distintos user agents.

Hay varias formas de saber si un sitio está hecho con un framework JavaScript:

1. Identificar el JavaScript con Screaming Frog

Por defecto, SEO Spider rastrea con el «antiguo esquema de rastreo AJAX»: el JavaScript está desactivado y solo rastrea el HTML sin procesar.

Si el sitio usa solo JavaScript del lado del cliente, tu rastreo devolverá solo la home con respuesta 200 y unos pocos archivos JavaScript y CSS.

Rastreo de angular.io sin renderizado JavaScript en Screaming Frog: solo la home y los archivos JS y CSS — Sin renderizado, el Spider solo encuentra la home y los recursos.

Como ves, la pestaña «Outlinks» tampoco tiene hipervínculos, porque no están en el HTML sin procesar y SEO Spider no puede verlos.

Pestaña Outlinks de Screaming Frog con solo enlaces JavaScript y CSS y ningún hipervínculo

Aunque suele ser señal de que el sitio usa un framework JavaScript renderizado en el cliente, no te dice si hay otras dependencias JavaScript en el sitio.

Por ejemplo, un sitio podría usar JavaScript solo para cargar los productos en las páginas de categoría o para actualizar los titles.

¿Cómo encontrarlas fácilmente?

Para identificar el JavaScript de forma más eficiente, pasa al modo de renderizado JavaScript (1Configuration›2Spider›3Rendering) y rastrea el sitio, o una muestra de plantillas de todo el sitio.

SEO Spider rastreará tanto el HTML original como el renderizado para identificar las páginas con contenido o enlaces disponibles solo en el cliente y señalar otras dependencias clave.

Menú de filtros de la pestaña JavaScript de Screaming Frog SEO Spider 24.3, de Pages with Blocked Resources a Pages with Chrome Issues — Los 18 filtros de la pestaña JavaScript de SEO Spider 24.3.

Para orientarte entre los problemas habituales de los sitios con JavaScript del lado del cliente, tienes una lista completa de filtros que guiarán tu auditoría SEO.

SEO Spider te señalará el contenido que solo está en el HTML renderizado tras ejecutar el JavaScript, para una visión completa del comportamiento del sitio.

Filtro Contains JavaScript Content de Screaming Frog con la columna JS Word Count % al 100 %

En este ejemplo, el 100 % del contenido está solo en el HTML renderizado, porque el sitio se basa totalmente en JavaScript.

Aquí el análisis se ha centrado en el número de palabras del contenido, pero también puedes encontrar, por ejemplo, las páginas con enlaces presentes solo en el HTML renderizado y corregirlas siguiendo las indicaciones de Google.

Filtro Contains JavaScript Links de Screaming Frog con los enlaces descubiertos solo tras el renderizado JavaScript

Esta función de Screaming Frog también es muy útil para comprobar si las meta etiquetas u otros elementos SEO están en el HTML estático o solo se sirven y/o modifican tras ejecutar el JavaScript.

1. Desactivar JavaScript en el navegador

Otra forma de entender la naturaleza de un sitio es desactivar JavaScript directamente en el navegador y recargar la página. Si aparece en blanco, no hay duda de que el sitio se ha hecho con JavaScript.

Ajustes de Chrome DevTools con la opción Disable JavaScript activada — Desactiva JavaScript desde las DevTools de Chrome.

1. Buscar JavaScript en el código fuente

La tercera opción es hacer clic derecho en la página y ver el código fuente, comprobando si el HTML tiene texto, enlaces o rastros de las librerías de los frameworks JS.

Así ves el código antes de que lo procese el navegador, que coincide con lo que rastrea SEO Spider cuando no está en modo de renderizado JavaScript.

Si buscas un elemento y no aparece en el código fuente, probablemente se genera dinámicamente en el DOM y solo se verá en el código renderizado.

Código fuente de un sitio con un contenedor app vacío y los archivos JavaScript que generan el contenido

Aquí la etiqueta <body> está totalmente vacía: señal clara de que el sitio usa JS.

1. Auditar el código renderizado

La primera pregunta es: ¿cuánto difiere el código renderizado del código fuente HTML estático? Para saberlo, haz clic derecho y usa «Inspeccionar» en Chrome para ver el HTML renderizado. A menudo verás el nombre del framework JS en el código renderizado, como ‘React’ en el ejemplo de abajo.

Chrome DevTools con el menú Copy › Copy outerHTML sobre el elemento html para copiar el código renderizado — Copy › Copy outerHTML sobre el elemento html.

Verás que el contenido y los hipervínculos están en el código renderizado pero no en el código fuente HTML original. Es lo que verá SEO Spider en modo de renderizado JavaScript.

Haciendo clic en el elemento HTML de apertura y luego en «Copy › outerHTML» puedes comparar el código renderizado con el original.

Rastrear JavaScript con Screaming Frog

Confirmada la presencia de JS y entendidas sus trampas, puedes empezar tu auditoría SEO con Screaming Frog en modo de renderizado JavaScript. Así podrás rastrear sitios dinámicos llenos de JavaScript y frameworks como Angular, React y Vue.js.

1. Para rastrear un sitio JavaScript, abre SEO Spider, ve a 1Configuration›2Spider›3Rendering y cambia ‘Rendering’ a ‘JavaScript’.
1. Configura el User-Agent y el Window Size

Configura el user agent en 1Configuration›2User-Agent.

Y el tamaño de la ventana en 1Configuration›2Spider›3Rendering.

Por defecto, el viewport está en «Googlebot Mobile: Smartphone», siguiendo el mobile first indexing del buscador.

Crawl Config › Spider › Rendering de Screaming Frog SEO Spider 24.3 con renderizado JavaScript, AJAX Timeout y Window Size Googlebot Mobile: Smartphone — La ventana Spider › Rendering: motor JavaScript, timeout y dispositivo simulado.

1. Revisa los recursos y los enlaces externos

Asegúrate de que los recursos como imágenes, CSS y JS estén marcados en 1Configuration›2Spider›3Crawl. Si los recursos están en otro subdominio o en un dominio raíz distinto, activa también los enlaces externos en 1Configuration›2Spider›3Crawl›4External Links; si no, no se rastrearán ni, por tanto, se renderizarán.

Crawl Config › Spider › Crawl de Screaming Frog SEO Spider 24.3 con Images, CSS, JavaScript y SWF activados en Resource Links — Crawl y Store de imágenes, CSS y JavaScript son necesarios para el renderizado.

1. Lanza el rastreo

Rastreo de un sitio en JavaScript en Screaming Frog con Crawl Data y la vista previa Rendered Page

1. Consulta la pestaña JavaScript

La pestaña JavaScript tiene 18 filtros que te ayudan a tener en cuenta las dependencias JavaScript y aislar los problemas más habituales.

Pages with Blocked Resources: identifica todas las páginas con recursos (imágenes, JavaScript, CSS) bloqueados por el robots.txt. Puede ser un problema, porque los buscadores podrían no acceder a los recursos necesarios para renderizar bien las páginas. Te aconsejo actualizar el robots.txt para que todos los recursos críticos se puedan rastrear y usar en el renderizado. Los recursos no críticos (por ejemplo, un embed de Google Maps) se pueden ignorar.
Contains JavaScript Links: páginas con hipervínculos descubiertos en el HTML renderizado solo tras ejecutar el JavaScript. Estos enlaces no están en el HTML sin procesar; conviene incluir los enlaces importantes del lado del servidor en el HTML estático.
Contains JavaScript Content: todas las páginas cuyo texto principal solo está en el HTML renderizado tras ejecutar el JavaScript. Google puede renderizar las páginas y ver el contenido del lado del cliente, pero plantéate incluir el contenido importante del lado del servidor en el HTML sin procesar.
Noindex Only in Original HTML: páginas con noindex en el HTML estático pero no en el renderizado. Cuando Googlebot encuentra un noindex se salta el renderizado y la ejecución del JavaScript; por eso, usar JavaScript para quitar el ‘noindex’ en el HTML renderizado no funcionará.
Nofollow Only in Original HTML: páginas con un atributo nofollow en el HTML estático y no en el renderizado. Significa que los enlaces del HTML sin procesar, antes de ejecutar el JavaScript, no se seguirán. Quita el ‘nofollow’ si los enlaces deben seguirse, rastrearse e indexarse.
Canonical Only in Rendered HTML: páginas con etiqueta canonical solo en el HTML renderizado tras ejecutar el JavaScript. Te aconsejo incluir un enlace canónico en el HTML estático (o en la cabecera HTTP) para que Google lo vea, sin depender solo del HTML renderizado.
Canonical Mismatch: páginas con un enlace canónico distinto en el HTML estático y en el renderizado tras el JavaScript. Puede enviar señales contradictorias y provocar comportamientos no deseados del buscador.
Page Title Only in Rendered HTML: páginas con title solo en el HTML renderizado tras el JavaScript. Un buscador tiene que renderizar la página para verlo. Plantéate incluir el contenido importante del lado del servidor en el HTML sin procesar.
Page Title Updated by JavaScript: páginas cuyo title modifica JavaScript, es decir, distinto en el HTML estático y en el renderizado. Plantéate incluir el contenido importante del lado del servidor en el HTML estático.
Meta Description Only in Rendered HTML: páginas con meta description solo en el HTML renderizado tras el JavaScript.
Meta Description Updated by JavaScript: páginas cuya meta description modifica JavaScript, por lo que es distinta en el HTML estático y en el renderizado.
H1 Only in Rendered HTML: páginas con h1 solo en el HTML renderizado tras el JavaScript. Un buscador tiene que renderizar la página para tener en cuenta el encabezado. Plantéate incluir los encabezados del lado del servidor en el HTML estático.
H1 Updated by JavaScript: páginas cuyo h1 modifica JavaScript, es decir, distinto en el HTML sin procesar y en el renderizado.
Uses Old AJAX Crawling Scheme URLs: URL que siguen usando el antiguo esquema de rastreo AJAX (una URL con un fragmento #!), oficialmente obsoleto desde octubre de 2015. Plantéate el renderizado del lado del servidor o el prerrenderizado cuando sea posible, y el renderizado dinámico como solución alternativa.
Uses Old AJAX Crawling Scheme Meta Fragment Tag: URL con una meta etiqueta fragment que indica que la página sigue usando el antiguo esquema de rastreo AJAX, obsoleto desde octubre de 2015. Actualiza las URL para seguir la evolución del JavaScript en los sitios actuales. Plantéate el renderizado del lado del servidor o el prerrenderizado, y el renderizado dinámico como alternativa. Si el sitio conserva por error la antigua meta etiqueta fragment, elimínala.
Pages with JavaScript Errors: páginas con errores JavaScript detectados en la consola de Chrome durante el renderizado. Para verlos, activa «Enable JavaScript Error Reporting» en 1Configuration›2Spider›3Rendering.
Pages with JavaScript Warnings: páginas con avisos JavaScript en la consola de Chrome.
Pages with Chrome Issues: páginas con problemas señalados por Chrome durante el renderizado, como recursos bloqueados o problemas de seguridad.
1. Vigila los recursos bloqueados

Vigila todo lo que aparezca en el filtro «Pages with Blocked Resources» de la pestaña «JavaScript».

Filtro Pages with Blocked Resources en la pestaña JavaScript de Screaming Frog

Los recursos bloqueados también se ven para cada página en la pestaña ‘Rendered Page’, junto a la captura renderizada en el panel inferior. En casos graves, si un sitio JavaScript bloquea por completo sus recursos JS, simplemente no se rastreará.

Recursos bloqueados por el robots.txt en la ventana inferior de Screaming Frog con la vista previa Rendered Page con error

También puedes ver cada recurso bloqueado en la pestaña «Response Codes», en 1Response Codes›2Blocked Resource.

Las páginas y los recursos bloqueados se pueden exportar en bloque con 1Bulk Export›2Response Codes›3Blocked Resource Inlinks, para desbloquearlos y optimizarlos.

Bulk Export › Response Codes › Blocked Resource Inlinks en Screaming Frog

1. Visualiza las páginas renderizadas

Con Screaming Frog puedes ver la página renderizada en la pestaña ‘Rendered Page’, que aparece en la parte inferior de la interfaz cuando el rastreo se hace en modo de renderizado JavaScript.

Pestaña Rendered Page de la ventana inferior de Screaming Frog con la captura de la página renderizada

Si el renderizado de las páginas no se carga, plantéate ajustar el timeout de AJAX directamente en la configuración de SEO Spider.

Ver la página renderizada es vital para analizar lo que puede ver un bot de búsqueda moderno, y es especialmente útil al revisar un sitio en staging, donde no puedes usar la prueba en directo de la herramienta de inspección de URL de Search Console.

Si has puesto el user agent y el viewport en Googlebot Smartphone, verás exactamente cómo se renderiza cada página en móvil, por ejemplo.

1. Compara el HTML sin procesar y el renderizado

Al trabajar con JavaScript puedes querer guardar y ver el HTML y el HTML renderizado en SEO Spider, desde 1Configuration›2Spider›3Extraction.

Marcando las opciones «Store HTML» y «Store Rendered HTML» podrás comparar fácilmente las dos versiones y sus diferencias, para asegurarte de que el contenido crítico y los enlaces están en el DOM.

Comparación entre Original HTML y Rendered HTML en la pestaña View Source de Screaming Frog con Show Differences

Es muy útil en muchos casos, como depurar las diferencias entre lo que se ve en un navegador y en SEO Spider, o simplemente analizar cómo se ha renderizado el JavaScript y si ciertos elementos están en el código.

Si el filtro «Contains JavaScript Content» se ha activado en una página, puedes pasar del filtro ‘HTML’ a ‘Visible Content’ para ver exactamente qué texto está solo en el HTML renderizado.

Comparación del Visible Content entre Original HTML y Rendered HTML en la pestaña View Source de Screaming Frog

1. Identificar los enlaces solo JavaScript

Otro control importante son los enlaces presentes solo en el código renderizado. Con el filtro «Contains JavaScript Links» puedes ver qué hipervínculos se descubren tras ejecutar el JavaScript.

Con los datos recogidos, basta con hacer clic en una URL de la ventana superior, luego en la pestaña inferior «Outlinks» y elegir «Rendered HTML» como filtro.

Pestaña Outlinks de Screaming Frog filtrada por los enlaces presentes solo en el Rendered HTML

1. Configurar el AJAX Timeout

Según las respuestas de tu rastreo, puedes elegir el timeout, que por defecto es de 5 segundos. Es muy útil si SEO Spider tiene problemas para renderizar las páginas, desde 1Configuration›2Spider›3Rendering.

Ajuste del AJAX Timeout en la configuración del renderizado de Screaming Frog

El timeout de 5 segundos suele ir bien para la mayoría de los sitios, y Googlebot suele ser más flexible: se adapta al tiempo que tarda una página en cargar el contenido, teniendo en cuenta la actividad de red y usando mucha caché.

Pestañas relacionadas: Pestañas inferiores | Barra lateral | Informes

Análisis de sitios en JavaScript.