Google defiende el acceso r√°pido a cualquier sitio web, aquel que no marea al usuario con recorridos imposibles, pero tampoco a sus robots.

No quiere barreras que impidan las necesarias labores de rastreo e indexación del contenido, dos de los pilares fundamentales en SEO.

En ocasiones, SEO, Google y Javascript se entienden a la perfecci√≥n, pero tambi√©n surgen problemas para la √≥ptima indexaci√≥n del contenido. ¬ŅLa consecuencia directa? Los problemas en el renderizado de la web.

David Navarro (@d7anace) te explica en este vídeo un concepto básico y de enorme importancia para el posicionamiento en buscadores de un proyecto.

La relevancia del renderizado de una web obliga a comprobar que tus p√°ginas est√°n siendo bien visualizadas e indexadas por Google, adem√°s de identificar posibles deficiencias.

Sigue leyendo porque darás con las respuestas en este artículo.

¬ŅQu√© es el renderizado de una p√°gina web?

El renderizado es la representación gráfica del contenido de una página, es decir, el proceso necesario para mostrar una página web en un navegador.

Gracias a la transformación de los documentos html y otros recursos de una web, conseguimos que una página ofrezca un contenido dinámico al usuario, con un estilo concreto y la posibilidad de interactuar con esa página.

Toda esa conversión de la versión de solo texto de una web a su representación visual interactiva es obra del renderizado.

Versión solo texto

renderizado

Renderizado de la p√°gina web

renderizado p√°gina web

Entre los lenguajes de programación más utilizados destaca el JavaScript o JS, que combina HTML y CSS, una apuesta que obliga a que el SEO técnico entre en juego.

El motivo no es otro que optimizar al m√°ximo las webs en JavaScript para que los motores de b√ļsqueda como Google indexen sus p√°ginas sin bloqueos que dificulten ese renderizado.

¬ŅPor qu√© el renderizado de una web es importante en SEO?

David lo explica a la perfección en el vídeo:

¬ęGoogle necesita ver tu web como lo hace el usuario. Si no lo consigue, empeorar√° tu experiencia de usuario y perjudicar√° el posicionamiento en buscadores del proyecto¬Ľ.

La visualización de la representación gráfica de una web por parte de Google permite identificar archivos CSS o JavaScript que están siendo bloqueados por el archivo robots.txt, así como otras incidencias que impiden un óptimo renderizado.

Y, como ya hemos subrayado, si Google no ve ese contenido e incluso le impedimos el acceso, afectar√° de forma negativa al posicionamiento del proyecto.

No obstante, los problemas de renderizado de una web tienen solución y existen diversidad de herramientas para detectarlos y ver cómo están afectando tanto al SEO como a la velocidad de carga (WPO) de la web y, por ende, a la experiencia de usuario (UX).

Principales problemas de renderizado de una p√°gina web

Para mejorar la optimizaci√≥n del contenido JavaScript para los motores de b√ļsqueda, revisa estos 3 puntos:

RASTREO ‚Üí RENDERIZADO ‚Üí INDEXACI√ďN

Entre los problemas de renderizado m√°s comunes que puedes encontrar en este proceso, destacan con fuerza los siguientes:

1 – Bloqueo de recursos de la web en el archivo robots.txt

Si en el archivo robots.txt est√°s bloqueando al acceso del robot de Google a contenido clave para su posicionamiento, est√°s exponiendo tu web a problemas de renderizado.

problemas renderizado seo

Por este motivo, utiliza la herramienta Probador de Robots.txt disponible en Google Search Console para comprobar si tu archivo est√° impidiendo el acceso a URL concretas.

problemas de renderizado de una web

2 – Bloqueo de IP de Google para evitar el acceso al contenido

En este caso, el problema se agrava porque no solo afectaría al renderizado sino al rastreo de la página web.

Desde el Centro de B√ļsqueda de Google puedes verificar si el robot de Google est√° rastreando correctamente el proyecto.

Ten presente que hay hostings que bloquean IP en nuestros proyectos. Un cortafuegos con un nivel alto de restricción puede estar detrás de que Google no lea esa web, de ahí la necesidad de controlarlo.

Te recomendamos que sigas el consejo de Google:

  1. Identifica la IP que está accediendo a tu servidor y haz una petición de DNS invertida con el comando host.
  2. Comprueba que el nombre de dominio es googlebot.com o google.com.
  3. Haz una petición de DNS normal con el nombre de dominio obtenido en el paso 1, usando el comando host en el nombre de dominio.
  4. Confirma que es la misma dirección IP de acceso original que aparece en tus registros.
google-rastreo-mi-web

Fuente: Google

¬ŅQu√© herramientas necesitas para detectar problemas en el renderizado de tu sitio web?

1 – Google Search Console

Utiliza esta potente herramienta de Google que te aporta información clave sobre el rastreo y la indexación de tu web.

Entre los datos aportados, destaca la información sobre aquellos elementos no pueden ser mostrados y, por tanto, Google no consigue renderizar ni indexar.

  • Entra en tu propiedad de dominio en Google Search Console.
  • Dir√≠gete a Inspecci√≥n de URL e introduce el dominio.
  • Cargada la p√°gina con el mensaje ¬ęLa URL est√° en Google¬Ľ, clica sobre ¬ęProbar URL publicada¬Ľ.
  • Finalizado el test, accede a ¬ęVer p√°gina probada¬Ľ.
  • Selecciona la pesta√Īa ¬ęCaptura de pantalla¬Ľ donde ver√°s el renderizado de esa p√°gina.

renderizado-google-search-console

En este punto, si compruebas que no se aplica ning√ļn estilo y visualizas la p√°gina del mismo modo que en la versi√≥n solo texto que explic√°bamos al inicio del art√≠culo, revisa los posibles bloqueos de recursos de la web CSS y JS.

2 – Technical SEO

Desde la sección Rendering, la herramienta gratuita Technical SEO te ayuda a identificar posibles deficiencias de renderizado web.

Introduce el dominio, seleccionado como User Agent ¬ęGooglebot smartphone¬Ľ, y clica sobre ¬ęObey robots.txt¬Ľ y ¬ęRender¬Ľ.

technical-seo-renderizado

Resuelto el análisis, la herramienta ofrece tanto el código html de la página como el renderizado.

technical-seo-renderizado-web-herramienta

A su vez, da información de los elementos que están bloqueados y, por tanto, no se visualizan en la representación gráfica de la página.

Verifícalos para tratar de corregirlos si de verdad están generando problemas de renderizado.

3 РPrueba de optimización para móviles

Suma a tu lista de herramientas de renderizado la Prueba de optimización para móviles, con la que también podrás saber cómo Google está viendo tu página en dispositivos móviles.

Con una interfaz similar a la de Google Search Console, desde Ver P√°gina Probada >> Captura de pantalla dispondr√°s de la web renderizada.

Además, tras el análisis, la página te informará si la URL aportada está optimizada para móviles.

prueba-optimizacion-moviles

Conclusión

Ya lo avanzábamos al inicio de este artículo: el renderizado web destaca entre los aspectos más determinantes para el buen posicionamiento en buscadores de un sitio web.

Ahora que ya sabes qué hay tras este concepto, los principales problemas, las herramientas para su detección y las posibles soluciones, te animamos a que siempre tengas controlado que tanto los usuarios como Google observan tu web del mismo modo.

Seguro que el esfuerzo tendr√° como recompensa m√°s victorias SEO en las SERP de Google.