Uno de los aspectos que tenemos que tener presentes en un proyecto SEO es cómo los bots “ven” la web. Aunque esto no se puede conocer con total exactitud, sí que existen una serie de herramientas que pueden ayudarnos a hacernos una idea de ello y actuar en consecuencia.
Sólo lo que el bot ‘ve’ puede posicionar.
Conocer cómo un bot ve nuestra web es importante por varios motivos:
- El contenido que los bots “ven” es el que puede posicionar, y en este punto, cuando hablo de contenido me refiero al contenido de una URL en su forma más pura: el código HTML.
El código HTML es examinado por los bots en varias ocasiones y de varias formas: analizan el HTML sin renderizar y también lo analizan una vez se ha renderizado:
Para quien no lo sepa, el HTML sin renderizar es aquel que se recibe del servidor sin procesar CSS o JavaScript. Por el contrario, el código HTML renderizado es aquel que resulta tras el procesado de CSS y JavaScript por parte del navegador o bot. En este último, es posible que se incluyan o eliminen contenidos y/o enlaces presentes en el HTML sin renderizar.
Conociendo lo anterior y de forma muy resumida, Google analiza una URL y su código de de forma similar a:
- El bot obtiene el HTML de la URL (sin renderizar), para explorar su contenido y enlaces. (Añade los enlaces descubiertos a la cola de crawleo)
- La URL es indexada (1ª ola de indexación)
- Los bots obtienen los recursos CSS y JS necesarios para renderizar la web.
- Con estos recursos, el sistema renderiza la web. Los bots examinan el código HTML renderizado, su contenido y enlaces. (Los nuevos enlaces descubiertos se añaden a la cola de crawleo)
- Considerando el contenido de la URL renderizada, esta se vuelve a indexar. (2ª ola de indexación)
Descubre el proceso en detalle en la documentación oficial de JavaScript y SEO de Google (merece la pena).
Dependiendo del código y de cómo este resulte tras su posterior renderizado, el bot “verá” un contenido u otro, y por supuesto, esto afecta a la forma en que la URL se posiciona.
- Nos ayuda a ver cómo se procesa el contenido y apariencia de nuestra página, lo cual nos puede servir para priorizar la carga de los recursos y contenidos más relevantes en la página (algo clave tanto respecto a WPO -Web Page Optimization-, como para UX -experiencia del usuario-)
¿Cómo saber qué ‘ven’ los Bots en nuestras URLs?
Para lograr conocer lo más fielmente posible cómo los bots “ven” el contenido de nuestras URLs, tanto antes como después del renderizado, podemos servirnos de una serie de herramientas que vamos a listar a continuación:
- Inspector de elementos del navegador
- Extensión de Chrome “View Rendered Source”
- Technical SEO Fetch & Render
- Inspector de URL en Google Search Console
- Mobile Friendly Test de Google
- Screaming Frog
- Fetch and render basado en Puppeter de Natzir Turrado
#1. Inspector de elementos del navegador
La primera y más habitual de las herramientas para comprobar y comparar el código HTML pre y post renderizado de una web, es la conocida herramienta “Inspeccionar” o “Herramientas para desarrolladores” presentes de forma nativa en los principales navegadores.
Tomando de referencia a Google Chrome (por ser uno de los navegadores más usados), podemos acceder a esta herramienta pulsando “F12” o la combinación de teclas “Ctrl + Shift + I”:
Pero vamos al grano, ¿dónde veo el código fuente sin renderizar y el código fuente renderizado? Para ello basta con alternar entre la pestaña “Sources” y “Elements”:
- Desde la pestaña “Elements” podemos observar el código renderizado (tal y como lo ha renderizado nuestro navegador, que puede variar respecto a cómo lo renderiza GoogleBot, sobre todo si usamos un navegador distinto a Google Chrome).
- Desde la pestaña “Sources” podremos encontrar el código HTML sin renderizar, tal y como lo obtiene el navegador antes de procesarlo:
Este sistema tiene un “pequeño” inconveniente. Si queremos comparar las diferencias entre el código renderizado y sin renderizar, debemos copiar ambos y hacerlo empleando una herramienta externa como un editor de código enriquecido (por ejemplo, Sublime Text) o herramientas online como DiffCheker. Es una forma sencilla y que apenas requiere recursos, pero debemos tener en cuenta sus limitaciones.
#2. Extensión de Chrome “View Rendered Source”
La extensión View Rendered Source para Google Chrome simplifica aún más el método anterior. Esta extensión nos da lo que queremos de una forma directa y sin floritura: compara y resalta las diferencias entre el código HTML sin renderizar y el código renderizado:
Una vez lo hemos instalado en nuestro navegador, basta con dirigirnos a la URL que queremos analizar y pulsar sobre el icono que se muestra en la barra de extensiones del navegador:
Automáticamente, la extensión nos dirige a una nueva pestaña en el navegador donde se muestran el código sin renderizar, el código renderizado y la comparación del mismo (indicando en verde y rojo qué código se ha incluido o eliminado en el código renderizado respecto al código sin renderizar).
Sin duda, es una de las alternativas más sencilla y rápidas para analizar el código de nuestra web en sus distintos estados, sin embargo, el HTML renderizado que nos ofrece la extensión no tiene por qué coincidir con la versión renderizada del código que interpretan los Bots de Google (u otros).
#3. Technical SEO Fetch & Render
En lo particular, me parecen una auténtica pasada las herramientas de Technicalseo.com (de Max Prin), tanto por su variedad como por las funcionalidades que ofrecen. Entre estas herramientas está la denominada “Fetch & Render”, la cual analiza una URL dada ofreciéndonos información del código sin renderizar y del código renderizado.
Hasta aquí todo normal, pero lo realmente interesante son las distintas opciones que permite configurar como:
- Simular el Bot que explora la URL (permite seleccionar entre una lista de Bots predefinida)
- Obedecer o no al archivo Robots.txt. Así podemos conocer si alguna directiva del fichero Robots.txt está bloqueando el acceso a algún recursos necesario para el renderizado de la web.
- Definir un tiempo de renderizado. Se estima en 5 segundos el tiempo que Google ocupa en renderizar el contenido de una web. Con esta función podemos simular distintos tiempos de renderizado en una URL y determinar cómo afecta al código de la misma..
Como resultado, esta herramienta ofrece 2 pestañas:
- HTML response: es el código sin renderizar y las cabeceras de respuestas que ofrece el servidor de la URL analizada.
- Rendered Page: es el código de la URL tras el renderizado.
Además, también ofrece información sobre los tiempos de respuesta y renderizado de la URL, así como una pequeña captura de pantalla que simula el resultado visual de la URL renderizada:
Sin embargo, no todo el monte es orégano. Fetch and Render nos ofrece tanto el código renderizado como sin renderizar, pero no lo compara ni resalta las diferencias entre ambos, por lo que nuevamente tendremos que recurrir a una herramienta externa como Sublime Text u otros editores de código.
La parte positiva es que nos permite simular el renderizado como GoogleBot y su versión móvil. También como Bing. De esta forma podemos hacernos una idea más aproximada de cómo estos están “viendo” nuestra URL.
#4. Inspector de URL en Google Search Console
Esta herramienta es de las más fieles en cuanto a conocer cómo Google renderiza nuestra URL. Sin embargo, sólo podremos usarla si tenemos acceso al proyecto en Google Search Console (así que podemos descartar si nuestro propósito es observar cómo se comporta una URL de la competencia*).
Basta con incluir la URL en el buscador de Google Search Console:
Una vez analizada, podremos ver el código HTML renderizado desde el apartado “Ver página rastreada”, seleccionado en la barra lateral derecha la pestaña “HTML”:
Eso sí, para comparar el código renderizado y sin renderizar, nuevamente tendremos que recurrir a alguna herramienta externa que nos permita hacer Diff.
*Realmente sí podemos usar esta herramienta para observar cómo Google renderiza una URL de la competencia, aunque de forma indirecta. Para ello debemos:
- Crear una redirección desde una URL de un proyecto que tengamos en Google Search Console hacia la URL de la competencia que queramos analizar.
- Inspeccionar la URL sobre la que hemos aplicado la redirección.
#5. Mobile Friendly Test de Google
Actualizado en diciembre de 2023: Google retiró esta herramienta el 1 de diciembre de 2023. En su lugar, recomienda emplear Lighthouse, aunque dicha herramienta no nos servirá para estimar cómo GoogleBot ve nuestra URL.
El propósito original de esta herramienta no es analizar el código sin renderizar y renderizado; como su nombre indica, Mobile Friendly Test es una herramienta de Google diseñada para comprobar si el código de una URL está optimizado para dispositivos móviles. Sin embargo, una vez analizamos la URL, esta herramienta nos ofrece también información del código HTML renderizado:
¿También hay que comparar el código a mano? En efecto, compañero. La parte positiva es que esta herramienta nos da una idea muy aproximada de cómo Google está viendo el código renderizado de nuestra página (y más concretamente, de cómo lo está viendo con su Bot móvil).
#6. Screaming Frog
Esta herramienta es la navaja suiza de todo profesional del SEO, y por supuesto, para conocer el código de nuestras URLs (sin renderizar y tras el renderizado). Para ello debemos configurar los distintos apartados:
- Configuration → User-Agent. Aquí recomiendo seleccionar Googlebot o GoogleBot Mobile.
- Configuration → Spider → Extraction → HTML → Marca “Store HTML” y “Store Rendered HTML”
- Configuration → Spider → Rendering → JavaScript. Aquí recomiendo establecer los siguientes parámetros:
- Ajax timeout: 5 secs.
- Windows size: Googlebot (Acorde al User Agent elegido)
Una vez configurado, si queremos comprobar una serie de URLs (no toda la web), lo más recomendable es escoger “Mode → List”. Una vez introducidas y crawleadas las distintas URLs, podemos encontrar el resultado desde la pestaña inferior “View Source”: los distintos códigos y la posibilidad de resaltar las diferencias entre ambos.
¿Qué completo y útil, verdad? Pues sí, y es que yo estoy Scream’in love.
#7. Fetch and render basado en Puppeter de Natzir Turrado
Y no puede faltar a nuestra lista de herramientas la que publicó Natzir Turrado en Twitter.
Esta herramienta tendremos que utilizarla desde Google Colab (Natzir compartió el acceso a su proyecto en Colab para que lo copiemos y usemos libremente). De entrada, es algo más compleja de usar, sobre todo si no has usado Colab ni estás familiarizado con el código, sin embargo, es bastante fácil:
- Ejecutamos el código del primer bloque (pulsa sobre el play y espera a que finalice el proceso):
- En el bloque de código inferior podemos configurar los distintos parámetros y URL a analizar. Una vez los hayamos modificado, volvemos a pulsar el “play” para guardar los cambios.
- Por último, en el siguiente bloque sólo nos queda ejecutar el script que hemos editado antes (volvemos a pulsar el play)
- Justo debajo aparecerá el código HTML renderizado:
- También podremos ver el resultado visual del renderizado desde los recursos del proyecto de Colab:
¿Tiene buena pinta, verdad? La única pega es que también tendremos que comparar el código “a pelo”. ¡Pero oye, está más que bien! Este método también obedece las directivas Robots.txt y hace la comprobación de la URL según la última versión de Chromium, lo cual es de agradecer, sobre todo si tenemos en cuenta que desde hace algún tiempo, GoogleBot es «evergreen». ¿Qué quiere decir esto?, pues que cuando el Bot de Google crawlee nuestra página lo hará simulando la última versión de Chromium y en consecuencia, así renderizará.
¡Si es que tenemos una comunidad SEO super colaboradora en España!
Seguro que hay algunas herramientas más que se me han quedado en el tintero, pero al menos estas sirven para hacer un análisis del código de tu web de una forma simple y -salvo en el caso de Screaming Frog- totalmente gratuita. ¡Espero que os sean de ayuda en vuestro camino por mejorar y aprender SEO!
