JavaScript SEO: Lo que debes saber para empezar

Hoy me he decidido escribir algo sobre JavaScript SEO. Este es un tema tan fascinante como desconocido. Llevamos varios años experimentando con la indexación de contenidos en JavaScript y aquí os voy a dar unas cuantas claves para empezar.

Empecemos con lo básico: ¿Por qué JavaScript ocasiona tantos problemas a los crawlers o rastreadores? ¿Dónde está la razón para que sea un problema?

 ¿Cómo se ejecuta el JavaScript?

JavaScript no se ejecuta por el servidor, sino por el navegador (cliente). Este es el gran problema. Para que un rastreador rastree el contenido ejecutado por JavaScript, debe asumir el trabajo de un navegador incluyendo todas las tecnologías y recursos necesarios, como un motor de renderizado para capturar el contenido.

Se puede ver el procedimiento simplificado en el gráfico:

• El navegador envía una petición GET al servidor.
• El servidor ejecuta el script PHP (por ejemplo, cuando se utiliza un CMS).
• El servidor devuelve el código fuente HTML al navegador.
• El navegador ejecuta JavaScript.

Las herramientas que soportan la auditoría también deben contar con estas tecnologías para proporcionar datos válidos.

 Googlebot no renderiza JavaScript

Un gran malentendido que escuchamos muy a menudo sobre el renderizado de JavaScript es la suposición de que el crawler es responsable del renderizado. Pero eso no es así. El renderizado es realizado por el indexador (de Google Caffeine).

Más concretamente, el Web Rendering Service (WRS), que forma parte de Google Caffeine. Y aquí es exactamente donde la segunda gran dificultad que se encuentra en el área de JavaScript SEO.

El flujo de proceso entre el crawler y el indexador:

1. Se descargan archivos HTML.
2. Los datos CSS y JavaScript se descargarán en paralelo.
3. Se utiliza WRS (Web Rendering Service) (parte de  Google Caffeine) para ejecutar JS.
4. WRS renderiza todos los archivos.
5. Ahora Google Caffeine puede indexar el contenido si es necesario.
6. Y en ese momento es cuando Googlebot puede rastrear nuevos enlaces.

¿Por qué es eso un problema? Para que el rastreador pueda introducir el contenido y seguir los enlaces, primero debe pasar los datos al indexador. El indexador renderiza el contenido y lo devuelve a los rastreadores. Sólo ahora el crawler puede ver el contenido y seguir los enlaces. En la página siguiente, el juego comienza de nuevo. Página por página. (muchos procesos)

A diferencia de las páginas convencionales, en las que el crawler rastrea numerosas páginas y, después de rastrear, pasa todo colectivamente al indexador. (pocos procesos)

Este proceso presenta otro desafío a los motores de búsqueda.

 

 ¿Cómo interactúa un crawler con una página web?

Un «headless browser« describe con buena precisión cómo interactúa Googlebot con un sitio web basado en JavaScript por lo que resulta muy útil entender cómo funciona un navegador de este tipo.

Un «headless browser» es un navegador sin componentes visuales. Esto significa que no se muestra contenido al usuario cuando interactúa con una página web ya que lo hace por medio de comandos.

En Google Chrome el modo «headless» está disponible desde la versión 59 para Mac OS y Linux y desde la versión 61 para Windows. Según parece, el Headless Chrome fue desarrollado para el Googlebot.

El Headless Chrome (Modo Headless de Google Chrome) puede utilizarse desde la consola de Windows o el terminal en Mac OS.

Con una serie de comandos se puede realizar la navegación:

1. chrome: Acceso al navegador Google Chrome
2. –headless: Ejecutar Google Chrome en modo headless
3. –disable-gpu: Según Google, este comando sólo es necesario por el momento debido a un problema
4. –dump-dom: Salida del DOM
5. url: Esta url se usa para el comando

Después de introducir estos comandos, el Headless Chrome lee el DOM de la página web especificada y la envía directamente a la consola o terminal. Y a partir de ahí el DOM puede ser insertado y analizado en cualquier programa de texto.

 

 ¿Qué rastreadores son capaces de renderizar JavaScript?

Bartosz Góralwicz de Elephate realizó un interesante experimento para responder a esta pregunta (que publicaba el 17 de mayo de 2017). El objetivo del experimento era averiguar cómo los rastreadores pueden manejarse con frameworks JavaScript. Curiosamente, con la excepción de Google (y Ask que está basado en Google), ningún otro motor de búsqueda es capaz de renderizar JavaScript.

Indexación de contenido JavaScript por GoogleBot

Indexación de JavaScript por otros crawlers

Aparte de este experimento, también se sabe que los crawlers de Facebook, Twitter, LinkedIn o Xing no renderizan actualmente JavaScript. Después de esta experimento y sus conclusiones sólo consideramos las tecnologías de Googlebot para la interacción con JavaScript.

Problemas con Angular JS2 y la indexación por Google

Especialmente los resultados del framework Angular JS 2 plantearon muchas preguntas. Google tiene problemas para rastrear su propio framework? Después de darle muchas vueltas el problema se puedo localizar en un simple error del framework que hacía que Google tuviera problemas con la indexación. Según Google, este error fue corregido el 26 de abril de 2017, lo que a partir de este momento hace que indexe el framework Angular JS 2. Este es otro ejemplo de lo propensos a errores que son los frameworks JavaScript cuando se trata de rastreabilidad e indexabilidad.

 

 ¿Qué tecnologías utiliza Google para renderizar páginas web?

Finalmente en agosto de 2017 Google publicó información más detallada sobre la tecnología de renderizado web. Antes, se sabía poco sobre el renderizado y sólo Google Search Console servía como fuente válida para la depuración y las pruebas. Por lo tanto, los siguientes puntos deben ser observados en la interacción de JavaScript y SEO:

• Google utiliza el Servicio de renderizado web (WRS) para renderizar páginas web. Esta versión de Chrome se basa en el Chrome 41 y data de 2015!
• No hay soporte para el protocolo de transferencia HTTP/2. No debería ser un problema, ya que HTTP/2 es compatible con versiones anteriores.
• No hay soporte para el protocolo WebSocket, IndexedDB y las interfaces WebSQL para el almacenamiento de datos en el navegador.
• El contenido que sólo se muestra después de un consentimiento del usuario tampoco puede ser analizado.
• El contenido del almacenamiento local y los almacenamientos de sesión se eliminan y no se reenvían cookies HTTP cuando se llama a una nueva url.

El punto más importante aquí es que Google utiliza la tecnología Chrome 41 cuando renderiza páginas web. Un estándar que ya tiene 3 años. Por lo tanto, debe tenerse en cuenta que Google sólo admite funciones web de 2015. Las plataformas «caniuse.com» y «Chrome Platform Status» de Google ofrecen exactamente qué funciones se pueden utilizar y más información sobre Chrome 41.

 

Con esta información espero que entiendas la base que hay que conocer a la hora de hacer SEO con frameworks JavaScript.