Introducción

El buscador Google ha crecido hasta tal punto que, desde el 15 de octubre de 2015, es capaz de leer páginas web como cualquier browser lo haría. Esto repercute en cómo se escriben las aplicaciones web, ya que permite delegar más responsabilidades en el cliente y menos en el servidor. Así, es posible ahora simplificar el código en el servidor, construyendo la interfaz y la adquisición de datos solamente con código de cliente; es decir, desacoplando el backend del frontend. Sin embargo, esta nueva característica de Google será una verdadera ventaja si no afecta en absoluto al SEO de la página. El objetivo de este estudio fue, por tanto, determinar cuál es el auténtico soporte que brinda el bot de Google a las páginas que están construidas 100% por JavaScript en cliente.

Para garantizar que el desacople no penaliza el SEO de la página, desarrollé un proyecto web, alquilaraparcamiento.com, que se genera 100% en JavaScript. Lo importante no es la aplicación en sí -- que no es más que una app con vistas, home, listado, detalle, etc. --, sino el hecho de que está siendo creada en el cliente mediante ReactJS. En concreto, interesa determinar si el bot de Google lee el html generado por ReactJS, tanto el que se genera en una primera fase (en la imagen, en rojo), como el que se genera después de realizar una llamada a una API externa (en la imagen, en azul).

A continuación, realicé una serie de experimentos en los que solo he variado la forma en que son adquiridos los datos. Para valorar el resultado de cada experimento, he analizado si el bot de Google lee el html utilizando la sección "Explorar como Google" de la webmasters' tools console.

Experimento 1

Para el primer experimento utilicé el último estándar de adquisición de datos, Fetch. ReactJS genera los links en la función componentDidMount después de que la llamada de Fetch sea satisfactoria. Por lo tanto, si el bot de Google soporta Fetch, entonces la consola debería mostrar que carga todos los links de la base de datos. Los datos son todos adquiridos mediante una petición Fetch a una base de datos totalmente falsa.

Si Google puede interpretar correctamente JavaScript y, con ello, ReactJS, debería verse la interfaz de la home del proyecto. Además, si es capaz de realizar subsecuentes peticiones Fetch una vez cargado el JavaScript, debería verse el listado de links en esa misma home.

Al cabo de una semana de tener corriendo la web, la consola de webmasters' tools mostraba lo siguiente:

Google no tiene ningún problema para interpretar todo el JavaScript que es enviado con la página, ya que la imagen muestra correctamente el html generado en una primera fase por ReactJS. Sin embargo, no realiza la petición Fetch y, por tanto, no observamos el listado de links en el footer de la página.

Experimento 2

El experimento 1 indicaba que el bot de Google, aunque es capaz de de ejecutar complejas operaciones en JavaScript, no puede usar la nueva API, Fetch. Por lo tanto, en este segundo experimento utilicé, en su lugar, Ajax para realizar el data-fetching necesario para que la página sea indexada por Google. La lógica detrás de este cambio es que es posible que el bot no realice peticiones Fetch porque es una API demasiado nueva. Por el contrario, Ajax lleva más de 10 años circulando.

Todos los usos de Fetch fueron sustituidos por llamadas Ajax (uso Axios para simplificar el código). Una vez realizado el cambio y "deployado" en producción, dejé pasar unos días y volví a observar cómo el bot interpreta la página:

Como puede verse en la imagen, se obtiene exactamente el mismo resultado que en el experimento 1: el bot de Google tampoco realiza llamadas a la API.

Experimento 3

En su conjunto, los experimentos 1 y 2 dejaron claro que el bot de Google no es capaz de realizar peticiones externas en una primera fase. En consecuencia, en este siguiente experimento probé forzar la carga inicial de datos y poner como condición necesaria que esta se realice correctamente antes de renderizar la interfaz. Así, no se llamará a ReactDom.render hasta que la llamada Ajax se haya completado.

Luego de que este nuevo código estuvo online unos días, se vuelve a consultar WMT para ver cómo interpreta la página el bot de Google.

En este caso, el bot la interpreta como una página totalmente en blanco. Esto es porque, al no haber realizado ninguna llamada Ajax, nunca se ha llegado a iniciar el "pintado" de la interfaz.

Conclusiones

Luego de casi un mes con la página online, el total de URLs indexadas es 1, la home.

La última versión del bot de Google es capaz de interpretar JavaScript (por complejo que este sea) sin ningún problema. Es más, como todo el código está compilado con Babel, podemos estar seguros de que tiene soporte total para ES5. Sin embargo, es totalmente incapaz de hacer cualquier petición de datos que sea necesaria para entregar la interfaz adecuadamente. Esto significa que todos los elementos de la página que estén relacionados con SEO han de ser, o bien datos estáticos en el JavaScript, o bien ser inferidos usando la URL de la página. Pero en ningún caso pueden ser obtenidos del backend en runtime.

Estos resultados implican, además, que en las páginas hechas 100% en JavaScript, será necesario recurrir a diferentes estrategias o soluciones para garantizar que toda la información sensible es interpretada por el bot de Google. Algunas de ellas son el pre-rendering o el isomorfismo.

Aunque los resultados no fueron los esperados, es importante destacar la importancia de conocer con precisión los límites del actual bot de Google.

Puedes acceder a todo el código usado en este experimento en su repositorio de Github.

Si te ha gustado este post, difunde la palabra. Tampoco dudes en dejar comentarios u observaciones. ¡Gracias! :)

Suscríbete a mi lista de correo

* Campos obligatorios