Diferentes métodos para indexar contenido JavaScript - Ajax

Publicado por Lino Uruñuela el 19 de mayo del 2019

_{*Para poder comprobar visualmente desde el inspector de urls de Search Console que se están ejecutando las llamadas Ajax.}

Índice de contenido

Googlebot usando nuevas versiones de Chrome
Métodos para la carga de contenido mediante Ajax
- XMLHttpRequest
- FETCH
Experimento SEO
- Usando método Fetch
- Usando XMLHttpRequest
¿Cómo comprobar los resultados?

A priori debería indexar el contenido con ambos métodos, ya que si no fuese así sería de conocimiento público y se habría comentado ampliamente dada la cantidad de sites que usan estos métodos de una u otra manera.

Diciendo esto puede parecer que este experimento no tiene mucha trascendencia, pero sí la tiene, y mucha, ya que Googlebot se está actualizando, y no sabemos qué novedades habrá en cuanto a cómo Google es capaz de rastrear páginas webs altamente basadas en JavaScript (ya sea puro JavaScript como jQuery como el usado por frameworks como Angular, React o Vue.js).

Googlebot usando nuevas versiones de Chrome

Y es que Google hasta ahora usaba la versión 41 del navegador Chrome, lanzada en abril del 2015, que para que nos hagamos una idea, por esa fechas se usaba Internet Explorer 11, acaba de lanzarse Microsoft Edge... así que estaba un poco desactualizado.

El problema de esto es que Google no usaba muchas de las nuevas funcionalidades que las nuevas versiones de Chrome han ido añadiendo, algunas de ellas muy importantes para la carga de determinados contenidos como para la disposición de los mismos.

En la siguiente imagen podemos ver las funcionalidades que soporta Googlebot en las diferentes versiones, a la izquierda las funciones que Googlebot aceptaba y acepta cuando rastrea el site usando la antigua versión y a la derecha las funcionalidades soportadas con la reciente actualización.

Funciones soportadas por Googlebot usando Chrome 41 y Chrome 74

Debemos dejar claro, que el bot actual por defecto que usa Google es el antiguo, el que usa la versión 41 de Chrome, son muy pocos los accesos que Google realiza con el nuevo Googlebot y no sabremos cuánto tardará en usarlo como predeterminado.

En realidad Googlebot basado en Chrome 41 sí soporta determinadas funcionalidades posteriores al número de su versión, pero no sabemos cuáles. Tal y como nos ha confirmado el propio Google (a través de Martin Splitt) Google está realizando experimentos usando una versión más actual del navegador, aunque en una muestra pequeña para probarlo.

A raíz de las recientes conversaciones y anuncios por parte de Google sobre esta actualización de su rastreador (Googlebot) han surgido varias dudas, las cuales no están claras al 100%, al menos por mi parte, y sobre las que quiero arrojar algo de luz, o al menos intentarlo.

Métodos para la carga de contenido mediante Ajax

Una de las tendencias actuales con el uso de los dispositivos móviles a la hora de cargar ciertos contenidos y/o recursos cuándo el usuario accede a una url de contenido es obtener ciertos elementos usando una carga diferida de estos recursos, es decir, una vez que el HTML inicial ha sido descargado por el navegador, se realiza la carga de otros elementos (ya sea contenido, como recursos javascript, como imágenes) los cuales podrían retrasar mucho la visualización de contenido posterior a estas llamadas, por eso se cargan lo último.

A la hora de realizar esta carga en diferido se pueden usar diferentes métodos, normalmente este método depende del tipo de elemento que vamos a cargar, pero también de qué "tecnología" usemos. Todas ellas se suelen denominar "carga por ajax" aunque no siempre el término es del todo correcto.

Hoy no vamos a entrar en nomenclaturas, ni en todos los métodos posibles de carga en diferido, hoy vamos a intentar comprobar si Google es capaz de obtener diferentes elementos usando dos técnicas.

XMLHttpRequest
XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa

Este método era el usado típicamente hace tiempo, pero con la llegada de librerías como jQuery y posteriormente con FrameWorks como Angular, React o Vue (aunque estas dos últimas son librerías si nos ponemos estrictos) se quedó en desuso.

Aquí documentación y ejemplos de uso

Fetch
El API fetch es un nuevo estándar que viene a dar una alternativa para interactuar por HTTP, con un diseño moderno, basado en promesas, con mayor flexibilidad y capacidad de control a la hora de realizar llamadas al servidor, y que funciona tanto desde window como desde worker

Este otro método tiene varias ventajas sobre el método XMLHttpRequest pero no vamos a entrar en esto, solo queremos comprobar si Google es capaz de ejecutar ambas y si es capaz de indexar el contenido obtenido por ambos métodos.

Tenéis documentación y ejemplos en este enlace.

Experimento SEO: indexando contenido obtenido por XMLHttpRequest y Fetch

A continuación vamos a cargar contenido usando ambos métodos, y vamos a cargar de las dos maneras tanto contenido de texto como imágenes. Decir que estas imágenes no son personas reales sino que son imágenes creadas mediante Inteligencia Artificial en esta web y que me vienen de perlas para determinados experimentos.

Usando XMLHttpRequest

Aquí se mostrará el texto cargado mediante XMLHttpRequest.

Usando Fetch

Y este otro texto es cargado usando fetch

Las urls a las que se llama en cada uno de los métodos son diferentes, para así luego poder comprobar mejor si Googlebot accede a él (usando los logs) y también cómo valora e interpreta Google esas urls usando el Inspector de URLs del nuevo Search Console, que nos podría dar información útil a la hora de intentar saber cómo trata estos métodos Google.

Las llamadas para la ejecución de los dos métodos son realizadas ambas sin necesidad de la interacción del usuario, se realiza en el onReady del documento, ya que como comprobamos Google es capaz de ejecutar JavaScript (y de hecho así lo hace) cuándo se lanza sin necesidad de ningún evento o acción por parte del usuario.

¿Cómo comprobar los resultados?

Para saber si Google es capaz de indexar (y por lo tanto poder posicionar) páginas que carguen contenido usando alguno de estos métodos JavaScript, podremos hacer una búsqueda por las palabras entrecomilladas en el encabezado de cada método.

Esta manera de comprobar si Google accede e indexa estos contenidos no es del todo fiable, podría ser "forzado" para su indexación, ya sea por sitemaps, por enlaces desde este site como otros sites que copien / fusilen este código, y otras mucha maneras.

La forma más fiable será analizando los logs y comprobando que Google accede a los archivos que contienen el HTML solicitado, y también si Google accede a las imágenes que hay en ese HTML.

Analizando los logs podremos obtener una respuesta más fiable que simplemente comprobando si aparece esta url en los resultados de Google al buscar alguna de las dos palabras que hay entre paréntesis

Así que ya sabéis, atentos a cuando publique los resultados, espero que en una semana podamos ver algo

¿Alguna idea / sugerencia / corrección sobre este experimento?

Comentar