Análisis del sitio en Javascript

Cómo analizar los sitios web que tienen contenido Javascript y podrían dificultar el rastreo de los robots de los motores de búsqueda.

Introducción de sitios Javascript

Hasta hace unos años, uno de los problemas más comunes en la optimización SEO era conseguir que las páginas con contenido creado dinámicamente se indexaran mediante Javascript. El problema estaba relacionado con los robots de los motores de búsqueda, que no eran capaces de escanear e indexar estos recursos y sólo tenían en cuenta el contenido del código fuente del HTML estático.

Paralelamente, se ha producido una evolución de frameworks como AngularJS, React, Vue.JS, aplicaciones de página única (SPA) y aplicaciones web progresivas (PWA), que ha llevado a Google a evolucionar significativamente y alcanzar una madurez plena en la comprensión de las páginas web como un navegador moderno.

Sin embargo, aunque hoy en día Google suele ser capaz de escanear e indexar la mayor parte del contenido JavaScript, se recomienda la renderización del lado del servidor, la renderización previa o la renderización dinámica en lugar de confiar en el JavaScript del lado del cliente, ya que sigue siendo difícil para los rastreadores procesar JavaScript con éxito o de forma inmediata.

Por estas razones, es crucial durante el análisis comprender las diferencias entre el DOM después de que JavaScript haya entrado en juego y construido la página web, y la respuesta estática del HTML.

Javascript, la araña seo y algunas contraindicaciones

Para remediar esta necesidad, Screaming Frog viene en tu ayuda con su modo “Renderizado Javascript”, que ha integrado la biblioteca “Chromium” para emular lo mejor posible el comportamiento de la araña de Google.

javascript rendering per seo audit di siti web in Javascript

Visión: en 2019, Google actualizó el Servicio de renderizado web (WRS), que antes se basaba en Chrome 41, con la última versión estable de Chrome, lo que le permitió admitir más de mil funciones adicionales.

1. Consideremos algunos aspectos inherentes a los sitios en Javascript:

  • 1. Activa “Renderizado Javascript” con cuidado

Aunque comprender las diferencias entre el DOM y el html estático tras la ejecución de Javascript es muy importante, desaconsejo activar el modo “Renderizado Javascript” indiscriminadamente para cada sitio web.

El rastreo con JavaScript es más lento y más intensivo para el servidor, ya que hay que recuperar todos los recursos (tanto JavaScript como CSS, imágenes, etc.) para la renderización de cada página web. Esta criticidad es irrelevante para los sitios pequeños, pero para los grandes portales o ecommerce podría convertirse en un obstáculo para tu escaneado en términos de tiempo y Ram.

  • 2. Considera los principios y limitaciones de la exploración Javascript

Todos los recursos de una página (JS, CSS, imágenes) deben estar disponibles para ser escaneados, renderizados e indexados.

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

La Araña de Google no interactúa como los usuarios, por ejemplo, no hace clic en los recursos cargando eventos adicionales después de la renderización (un clic, un hover o un desplazamiento, por ejemplo).

La instantánea de la página renderizada se toma cuando se determina que la actividad de la red ha cesado, o más allá de un umbral de tiempo. Existe el riesgo de que, si una página tarda mucho en procesarse, se omita y los elementos no se vean ni se indexen.

En general, Google renderiza todas las páginas, pero no las pone en cola para ser renderizadas si tienen un “noindex” en la respuesta HTTP inicial o HTML estático.

Por último, la representación de Google es independiente de la indexación. Google escanea inicialmente el HTML estático de un sitio web, y pospone la renderización hasta que no tiene recursos.

Al iniciar el desarrollo de un sitio web, conocer estas condiciones es vital para el éxito o el fracaso del proyecto en términos de posicionamiento orgánico.

Javascript del lado del servidor y del lado del cliente

Google desaconseja confiar en JavaScript del lado del cliente y recomienda desarrollar con “mejora progresiva”, construyendo la estructura y la navegación del sitio utilizando sólo HTML y mejorando después el aspecto y la interfaz del sitio con AJAX.

Por lo tanto, si utilizas un framework JavaScript, Google recomienda la renderización del lado del servidor, la renderización previa o la renderización híbrida, que pueden mejorar el rendimiento para los usuarios y los rastreadores de los motores de búsqueda.

Al servir el renderizado del lado del servidor (SSR) y el pre-renderizado, la ejecución JavaScript de las páginas proporciona una versión HTML inicial renderizada y lista para escanear.

El renderizado híbrido (a veces denominado “isomórfico”) identifica una versión del renderizado que ejecuta Javascript del lado del servidor para la carga inicial de la página y HTML y Javascript del lado del cliente para los elementos no críticos y las páginas posteriores.

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

Alternativamente, puedes optar por utilizar el renderizado dinámico.

Esto puede ser especialmente útil cuando no es posible realizar cambios en la base de código del front-end. El renderizado dinámico pasa del renderizado del lado del cliente para los usuarios al contenido pre-renderizado para los motores de búsqueda.

Tiempos de rastreo de Google

Aunque optar por las tres soluciones anteriores resuelve la mayoría de los problemas de rastreo, es bueno tener en cuenta un aspecto adicional.

Google tiene un proceso de indexación en dos fases, en el que inicialmente escanea e indexa el HTML estático, y luego vuelve más tarde, cuando hay recursos disponibles, para renderizar la página y escanear e indexar el contenido y los enlaces del HTML renderizado.

El tiempo necesario entre el rastreo y la renderización también podría ser muy largo (hasta 7 días) y esta condición es un problema para los sitios que dependen de contenidos que por su propia naturaleza tienen características de actualidad o simplemente caducan (por ejemplo, sitios de noticias, eventos, etc.); mientras que el tiempo medio (declarado en la Chrome Dev Summit de 2019) es de 5 segundos.

Cómo identificar Javascript

Identificar un sitio construido con un framework JavaScript puede ser bastante sencillo, sin embargo, diagnosticar secciones, páginas o simplemente elementos más pequeños que se adaptan dinámicamente mediante JavaScript puede ser mucho más difícil. Al establecer una Auditoría Seo, es una buena práctica determinar inmediatamente si hay presencia de Javascript e intentar comprender si el sitio puede tener problemas durante los distintos rastreos del Agente de Usuario.

Hay varias formas de saber si el sitio está construido utilizando un framework JavaScript, veamos algunas de ellas:

  • 1. Identificar Javascript con Screaming Frog

Por defecto, el Seo Spider escanea utilizando el “antiguo esquema de escaneo AJAX”, lo que significa que JavaScript está desactivado, y sólo escanea HTML sin procesar.

Si el sitio sólo utiliza JavaScript del lado del cliente, entonces sólo obtendrás como resultado de tu escaneo la página de inicio con una respuesta 200 con unos cuantos archivos “Javascript y CSS”.

Como puedes ver, la pestaña “Enlaces externos” tampoco tiene hipervínculos, ya que no están renderizados en html sin procesar y no pueden ser vistos por la araña Seo.

analisi oulinks con screaming frog

Aunque esto suele ser una señal de que el sitio web utiliza un framework JavaScript, con renderización del lado del cliente, no te dice si existen también otras dependencias JavaScript en el sitio.

Por ejemplo, un sitio web puede tener JavaScript sólo para cargar productos en páginas de categorías, o actualizar elementos de título.

Entonces, ¿cómo encontrarlos fácilmente?

> > Para identificar el JavaScript de forma más eficaz, es necesario cambiar al modo de renderizado de JavaScript (“Config Spider Rendering”) y escanear el sitio, o una muestra de modelos de todo el sitio.

La Araña SEO escaneará tanto el HTML original como el renderizado para identificar las páginas que tienen contenido o enlaces sólo disponibles del lado del cliente y señalar otras dependencias clave.

filtri della scheda Javascript previsti su screaming frog

Para ayudarte a navegar por los problemas habituales de los sitios Javascript del lado del cliente, tienes una lista completa de filtros que te guiarán en la definición de tu Auditoría Seo.

El Seo Spider te avisará si hay algún contenido que sólo se encuentre en el HTML renderizado después de que el JavaScript entre en juego, dándote una visión completa del comportamiento del sitio web.

En este ejemplo, el 100% del contenido sólo está en el HTML renderizado, ya que el sitio se basa totalmente en JavaScript.

En este caso, el examen se centró en el número de palabras encontradas en el contenido de las páginas, pero también puedes encontrar, por ejemplo, referencias a páginas con enlaces sólo en el HTML renderizado y remediarlas siguiendo las instrucciones de Google.

analisi links scoperti dopo renderizzazione javascript

Esta función de Screaming Frog también es muy útil para comprobar si las metaetiquetas u otros elementos Seo están presentes en el html estático o sólo se sirven y/o modifican una vez ejecutado el Javascript.

  • 2. Desactivar Javascript en el navegador

Una alternativa para comprender la naturaleza de los sitios web es desactivar Javascript directamente en el navegador y volver a cargar la página. Si aparece en blanco, no hay duda de que el sitio web se diseñó con Javascript.

  • 3. Buscar Javascript directamente en el código fuente

La tercera solución es hacer clic con el botón derecho en el sitio web y ver el código fuente examinando el contenido Html, si hay texto, enlaces o señales de las librerías de los distintos frameworks JS.

Siguiendo este proceso estás viendo código antes de que sea procesado por el navegador que coincidirá con lo que escanea la Araña Seo, cuando no está en modo de renderizado JavaScript.

Si intentas buscar unos elementos pero no obtienes ninguna aparición en el código fuente, es de suponer que se generan dinámicamente en el DOM y sólo se mostrarán en el código renderizado.

esempio source code sito web

<> En este caso, el cuerpo de la etiqueta está completamente vacío, una clara señal de que el sitio tiene JS.

  • 4. Auditar el código renderizado

La primera pregunta que debes hacerte es: ¿qué diferencia hay entre el código renderizado y la fuente HTML estática? Para averiguarlo, basta con hacer clic con el botón derecho y utilizar “inspeccionar elemento” en Chrome para ver el HTML renderizado. A menudo puedes ver el nombre del Framework JS en el código renderizado, como “React” en el ejemplo siguiente.

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. Esto es lo que verá la Araña Seo cuando esté en modo de renderizado JavaScript.

> Haciendo clic en el elemento HTML inicial y luego en “copiar HTML externo” puedes comparar el código fuente renderizado con el original.

Javascript Crawl con Screaming Frog

Una vez definida la presencia de JS y comprendidas las trampas, puedes comenzar tu Auditoría Seo con Screaming Frog configurándolo en modo de renderizado JavaScript. Esto te permite explorar sitios web y frameworks dinámicos y ricos en JavaScript, como Angular, React y Vue.js.

  • 1. > > Para escanear un sitio web JavaScript, abre la Araña Seo, haz clic en ‘Configuración Renderizado Araña’ y cambia ‘Renderizado’ a ‘JavaScript’.
Rendering Javascript con il seo spider screaming frog
  • 2. Configurar el agente de usuario y el tamaño de la ventana

Configura el agente de usuario

> > Configuración Cabecera HTTP Usuario-Agente

Y el tamaño de la ventana

> > Configuración Renderizado Spider

Por defecto, la ventana gráfica está configurada como “Google Mobile: Smartphone”, siguiendo la orientación “Mobile Index First” del motor de búsqueda.

  • 3. Comprueba los recursos y enlaces externos

> Asegúrate de que los recursos como imágenes, CSS y JS están marcados en “Araña de configuración”. Si los recursos están en un subdominio diferente, o en un “dominio raíz” distinto, activa también “comprobar enlaces externos”, de lo contrario no se escanearán y, por tanto, no se renderizarán.

configurazione crawl per siti Js
  • 4. Escanea
crawl di sito in javascript
  • 5. Ver la pestaña Javascript

Con la pestaña JavaScript, dispones de 15 filtros que te ayudarán a considerar las dependencias de JavaScript y a aislar los problemas más comunes.

filtri della scheda Javascript previsti su screaming frog
  • Páginas con recursos bloqueados: identifica todas las páginas con recursos (como imágenes, JavaScript y CSS) bloqueados por robots.txt. Esta condición puede ser un problema porque los motores de búsqueda pueden no ser capaces de acceder a recursos críticos para renderizar las páginas con precisión. Recomiendo actualizar el archivo robots.txt para permitir que se escaneen todos los recursos críticos y se utilicen para representar el contenido del sitio. Los recursos que no sean críticos (por ejemplo, la incrustación de Google Maps) pueden ignorarse.
  • Contiene enlaces JavaScript : el filtro muestra las páginas que contienen hipervínculos que sólo se descubren en el HTML renderizado después de ejecutar JavaScript. Estos hipervínculos no están en HTML crudo. Es una buena práctica considerar la inclusión de enlaces importantes del lado del servidor en el HTML estático.
  • Contiene contenido JavaScript: muestra todas las páginas que contienen cuerpo de texto sólo en HTML renderizado después de ejecutar JavaScript. Google es capaz de renderizar las páginas y sólo ver el contenido del lado del cliente, considera incluir el contenido importante del lado del servidor en el HTML sin procesar.
  • Noindex sólo en HTML original: todas las páginas que contienen una etiqueta noindex en HTML estático pero no en HTML renderizado. Cuando Googlebot encuentra una etiqueta noindex, se salta la renderización y ejecución de JavaScript. Como Googlebot se salta la ejecución de JavaScript, utilizar JavaScript para eliminar el “noindex” en el HTML renderizado no funcionará.
  • Nofollow sólo en HTML original: identifica las páginas que contienen un atributo nofollow en HTML estático, y no en HTML renderizado. Esto significa que no se seguirán los hipervínculos que haya en el HTML sin procesar antes de la ejecución de JavaScript. Elimina “nofollow” si los enlaces deben ser seguidos, escaneados e indexados.
  • Sólo canónico en HTML renderizado: devuelve todas las páginas que contienen una etiqueta sólo canónico en el HTML renderizado después de ejecutar JavaScript. Recomiendo incluir un enlace canónico en el HTML estático (o cabecera HTTP) para garantizar que Google pueda verlo y evitar depender únicamente del canónico en el HTML renderizado.
  • Desajuste canónico:identifica las páginas que contienen un enlace canónico diferente en el HTML estático que en el HTML renderizado tras la ejecución de JavaScript. Esta condición puede causar señales confusas y puede provocar un comportamiento no deseado por parte del motor de búsqueda.
  • Título de página sólo en HTML renderizado: Devuelve las páginas que contienen un título de página sólo en el HTML renderizado después de ejecutar JavaScript. Esto significa que un motor de búsqueda tiene que procesar la página para verlos. Considera la posibilidad de incluir el contenido importante del lado del servidor en el HTML sin procesar.
  • Título de página actualizado por JavaScript: identifica las páginas cuyos títulos han sido modificados por JavaScript. Esto significa que el título de la página en HTML estático es diferente del título de la página en HTML renderizado. Considera la posibilidad de incluir contenido importante del lado del servidor en HTML estático.
  • Meta descripción sólo en HTML renderizado: Devuelve las páginas que contienen una meta descripción sólo en el HTML renderizado después de ejecutar JavaScript.
  • Meta descripción actualizada por JavaScript: todas las páginas que tienen meta descripciones modificadas por JavaScript. Esto significa que la meta descripción en HTML estático es diferente de la meta descripción en HTML renderizado.
  • H1 sólo en HTML renderizado: páginas que contienen un h1 sólo en el HTML renderizado después de ejecutar JavaScript. Esto significa que un motor de búsqueda debe renderizar la página para tener en cuenta el encabezamiento. Considera la posibilidad de incluir encabezamientos del lado del servidor en el HTML estático.
  • H1 Actualizado por JavaScript: páginas que tienen h1s modificados por JavaScript. Esto significa que el h1 en HTML crudo es diferente del h1 en HTML renderizado.
  • Utiliza URLs del antiguo esquema de rastreo AJAX: identifica las URLs que todavía utilizan el antiguo esquema de rastreo AJAX (una URL que contiene un fragmento hash #!) que quedó oficialmente obsoleto en octubre de 2015. Considera el renderizado en el servidor o el pre-renderizado cuando sea posible, y el renderizado dinámico como solución alternativa.
  • Utiliza la etiqueta meta fragmento del antiguo esquema de rastreo AJAX: incluye las URL que incluyen una etiqueta meta fragmento que indica que la página sigue utilizando el antiguo esquema de rastreo AJAX que quedó oficialmente obsoleto en octubre de 2015. El consejo es actualizar las URL para seguir la evolución de JavaScript en los sitios web actuales. Considera el renderizado en el servidor o el pre-renderizado cuando sea posible, y el renderizado dinámico como solución alternativa. Si el sitio sigue teniendo por error la antigua etiqueta meta fragmento, hay que eliminarla.
  • 6. Supervisar los recursos bloqueados

Vigila todo lo que aparezca bajo el filtro “Páginas con recursos bloqueados” en la pestaña “Javascript”.

Los recursos bloqueados también pueden mostrarse para cada página en la pestaña “Página renderizada”, junto a la pantalla renderizada en el panel inferior de la ventana. En casos graves, si un sitio JavaScript bloquea completamente los recursos JS, entonces el sitio simplemente no será escaneado.

Los recursos bloqueados también pueden verse en la pestaña “Código de respuesta”.

> Códigos de respuesta Recurso bloqueado

> > Las páginas y los recursos individuales bloqueados también pueden exportarse en bloque con el informe “Exportación en bloque de enlaces internos de recursos bloqueados por código de respuesta para desbloquearlos y optimizarlos”.

  • 7. Ver páginas renderizadas

Con Screaming Frog es posible mostrar la página rastreada renderizada en la pestaña “Página renderizada” que aparece dinámicamente en la parte inferior de la interfaz de usuario cuando se rastrea en modo de renderizado JavaScript.

En caso de que la página no se cargue, considera la posibilidad de intervenir sobre el tiempo de espera AJAX directamente en la configuración de Seo Spider.

La visualización de la página renderizada es vital a la hora de analizar lo que un bot de búsqueda moderno es capaz de ver, y es especialmente útil cuando se revisa en la puesta en escena, donde no es posible utilizar la funcionalidad nativa de Google “Fetch & Render” a través de Search Console.

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

  • 8. Comparar HTML en bruto y renderizado

Es posible que desees almacenar y mostrar HTML y HTML renderizado dentro de la Araña Seo cuando trabajes con JavaScript.

> > > Configuración Extracción Spider Almacenar Html/Renderizar Html

Marcando las opciones adecuadas “Almacenar HTML” y “Almacenar HTML renderizado” puedes comparar fácilmente las dos versiones y poder comparar las diferencias para asegurarte de que el contenido o los enlaces críticos están presentes en el DOM.

comparazione raw e rendered pages

Esto es súper útil para una variedad de escenarios, como depurar las diferencias entre lo que se ve en un navegador y en la Araña SEO, o simplemente al analizar cómo se ha renderizado el JavaScript, y si ciertos elementos están dentro del código.

Si se ha activado el filtro “Contenido JavaScript” para una página, es posible cambiar de “HTML” a “Contenido visible” para identificar exactamente qué contenido textual está sólo en el HTML renderizado.

  • 9. Identificar enlaces sólo JavaScript

Otra comprobación importante se refiere a los enlaces que sólo están presentes en el texto renderizado. Mediante el filtro “Contiene enlaces JavaScript”, puedes identificar qué hipervínculos se descubren tras ejecutar JavaScript.

Una vez que hayas recopilado los datos, simplemente haz clic en una URL de la ventana superior, luego en la pestaña inferior “Enlaces salientes” y selecciona “HTML renderizado” como filtro.

dettagli pagine renderizzate
  • 10. Configurar el tiempo de espera de AJAX

Dependiendo de tus respuestas de rastreo, puedes elegir el ajuste de tiempo de espera, que por defecto está fijado en 5 segundos. Esta función es muy útil en caso de problemas en la renderización de páginas con el Seo Spider.

> > Configuración Renderizado Spider

configurazione dell'AJAX timeout con screaming frog

El tiempo de espera de 5 segundos suele estar bien para la mayoría de los sitios web, y normalmente Googlebot es más flexible en el sentido de que se ajusta en función del tiempo que tarda una página en cargar el contenido, teniendo en cuenta la actividad de la red y realizando mucho almacenamiento en caché.

Pestañas relacionadas: Pestaña inferior | Barra lateral | Informe

Rastrear sitios Javascript Video Tutorial

React vs. Google

Ficha Seo Spider