¡Muy buenas querido lector! Ya estoy una semana más por aquí con un post SEO que te va a encantar. Hoy te hablo del renderizado web y su impacto en el SEO.
Si pensabas que el SEO era solo hacer un keyword research y tener una página web bonita, siento decirte que no es suficiente. Tan importante como optimizar el contenido es que Google pueda verlo correctamente.
En este post te explico qué es el renderizado, cómo lo hace Google, qué tipos existen, los problemas más habituales y cómo comprobar si tu página web se renderiza bien. ¡Vamos con ello!
Resumen rápido
- El renderizado es el proceso por el que un navegador o un buscador convierte el código de una página (HTML, CSS y JavaScript) en la página visual que ve el usuario.
- Si Google no puede renderizar bien tu página web, puede no ver parte del contenido, los enlaces o los datos estructurados.
- Los problemas más habituales son recursos bloqueados, contenido que depende de JavaScript y bloqueos del servidor a Googlebot.
- Compruébalo con la herramienta de inspección de URLs de Search Console y la Prueba de resultados enriquecidos.
¿Qué es el renderizado de una página web?
El renderizado es el proceso de transformar el código de una página web (HTML, CSS y JavaScript) en la representación visual e interactiva que ve el usuario en su pantalla.
Cuando visitas una página, el navegador descarga el HTML, aplica los estilos CSS, ejecuta el JavaScript y «pinta» el resultado final. Google hace algo muy parecido para entender qué contenido muestra realmente cada URL.
Si una página web no se renderiza bien, lo que ve Google puede parecerse a esto:
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
¿Cómo renderiza Google una página web?
Google procesa las páginas en tres fases principales:
- Rastreo: el bot de Google descarga el HTML de la URL.
- Renderizado: un navegador Chrome actualizado ejecuta el JavaScript y genera la versión final de la página.
- Indexación: Google analiza el contenido renderizado y decide si lo añade a su índice. Te lo explico en qué es indexar.
El renderizado consume muchos recursos, así que Google puede tardar en procesar el JavaScript de algunas páginas. Por eso, cuanto más contenido importante haya en el HTML inicial, mejor.
¿Por qué el renderizado es importante para el SEO?
Google posiciona lo que es capaz de ver. Si tu página no se renderiza correctamente:
- Google puede no ver parte del contenido y posicionarlo peor o no posicionarlo.
- Puede no descubrir enlaces internos que dependen de JavaScript.
- Puede no leer los datos estructurados, los títulos o las etiquetas canonical si se inyectan mal.
- Puede interpretar mal la experiencia móvil si los estilos no cargan.
Además, muchos rastreadores de buscadores con IA no ejecutan JavaScript, por lo que el contenido que solo aparece tras renderizar puede ser invisible para ellos. Si te interesa aparecer en respuestas de IA, te lo explico en qué es el GEO.
La buena noticia es que los problemas de renderizado se detectan con relativa facilidad y, en la mayoría de páginas web WordPress bien construidas, no suelen ser graves.
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
Tipos de renderizado web
| Tipo | Cómo funciona | Impacto en SEO |
|---|---|---|
| SSR (Server-Side Rendering) | El servidor envía el HTML ya generado con el contenido | Muy bueno: Google ve el contenido desde el principio |
| SSG (Static Site Generation) | Las páginas se generan de antemano como HTML estático | Muy bueno y muy rápido |
| CSR (Client-Side Rendering) | El navegador recibe un HTML casi vacío y el contenido se genera con JavaScript | Arriesgado: depende de que Google ejecute bien el JavaScript |
| Híbrido o hidratación | El servidor envía el HTML y JavaScript añade la interactividad | Bueno si el contenido principal está en el HTML |
| Renderizado dinámico | Se sirve HTML prerenderizado a los bots y JavaScript a los usuarios | Solución temporal que Google ya no recomienda |
WordPress, por defecto, genera el HTML en el servidor, así que parte con ventaja. Los problemas suelen aparecer en aplicaciones hechas con frameworks JavaScript sin renderizado en servidor o en plugins que cargan contenido de forma dinámica.
Problemas de renderizado más habituales
Recursos bloqueados en el robots.txt
Si tu archivo robots.txt bloquea archivos CSS o JavaScript necesarios, Google no podrá renderizar la página correctamente.
Puedes revisar tu archivo en el informe de robots.txt de Search Console, que sustituyó al antiguo probador de robots.txt.
Bloqueo de recursos por el servidor o el firewall
Algunas reglas de seguridad del hosting, CDN o firewall bloquean las peticiones de Googlebot a ciertos archivos, sobre todo si hay protección antibots muy agresiva.
Cuando ocurre, la captura de Google muestra una página sin estilos o incompleta:
Bloqueo de las IPs de Google
En casos más graves, el hosting o el firewall bloquean directamente a Googlebot. Esto ya es un problema de rastreo: Google no puede ni acceder a la página. Revisa el rastreo en Search Console y consulta cómo verificar el tráfico de Googlebot.
Contenido que depende de JavaScript
- Textos o productos que se cargan tras una petición que falla o tarda demasiado.
- Contenido que solo aparece al hacer clic o scroll, como pestañas cargadas bajo demanda.
- Enlaces creados con eventos JavaScript en lugar de etiquetas
<a href>. - Metadatos o canonicals inyectados con JavaScript que contradicen los del HTML inicial.
Lazy loading mal implementado
Si el lazy loading depende de que el usuario haga scroll, Google puede no ver esas imágenes o contenidos. Utiliza el lazy loading nativo o implementaciones compatibles.
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
Herramientas para comprobar el renderizado de tu página web
Inspección de URLs de Google Search Console
Es la herramienta más fiable, porque muestra cómo ve Google realmente tu URL:
- Accede a tu Google Search Console.
- Introduce la URL en el inspector de URLs de la parte superior.
- Pulsa en «Probar URL publicada».
- Pulsa en «Ver página probada».
- Revisa las pestañas HTML (código renderizado), Captura de pantalla y Más información (recursos no cargados y errores de JavaScript).
PD. La captura de pantalla a veces muestra fallos puntuales que no existen realmente. Lo más importante es revisar la pestaña HTML: si el contenido está en el código renderizado, Google lo ve.
Prueba de resultados enriquecidos
La Prueba de resultados enriquecidos utiliza el mismo sistema de renderizado y te permite ver el HTML renderizado y una captura de cualquier URL, incluso de páginas web que no son tuyas.
Sustituye a la antigua Prueba de optimización para móviles, que Google retiró en 2023 y con la que antes se comprobaba el renderizado:
Fetch & Render de TechnicalSEO.com
La herramienta gratuita Fetch & Render simula el rastreo con distintos user agents. Introduce la URL, selecciona «Googlebot Smartphone», marca «Obey robots.txt» y «Render», y pulsa «Fetch & Render».
Te mostrará una captura, el código HTML, el tiempo de renderizado y los recursos bloqueados.
Comprobaciones rápidas desde el navegador
- Compara el código fuente con el código inspeccionado: pulsa Ctrl+U para ver el HTML original y F12 para ver el DOM renderizado. Si tu contenido principal solo aparece en el segundo, depende de JavaScript.
- Desactiva JavaScript en las herramientas de desarrollador de Chrome y recarga la página para ver qué contenido desaparece.
- Busca un fragmento de texto exacto en Google con el comando
site:tudominio.com "frase"para comprobar si está indexado.
Cómo solucionar los problemas de renderizado
- No bloquees archivos CSS ni JavaScript en el robots.txt.
- Revisa las reglas de tu firewall, CDN y hosting para que no bloqueen a Googlebot.
- Incluye el contenido principal, los enlaces y los metadatos en el HTML inicial.
- Utiliza renderizado en servidor (SSR o SSG) si trabajas con frameworks JavaScript.
- Utiliza enlaces HTML reales con
<a href>. - Evita que el contenido importante dependa de interacciones del usuario.
- Reduce el JavaScript innecesario, lo que además mejora las Core Web Vitals.
Conclusiones sobre el renderizado web y el SEO
Ya no basta con tener una página web optimizada a nivel SEO: también tiene que ser visible correctamente para Google, y cada vez más, para los buscadores con IA.
Mi recomendación: si tras un cambio en tu página web has sufrido una caída de tráfico o crees que Google no ve bien tu contenido, revisa el renderizado con la inspección de URLs de Search Console. Y si trabajas con JavaScript, asegúrate de que lo importante esté en el HTML desde el principio.
En cada auditoría SEO que realizo compruebo que las páginas se rendericen correctamente para Google. Si quieres que revise la tuya, estaré encantado de ayudarte.
Ahora te toca a ti, querido lector. ¿Tu página web se renderiza correctamente? ¡Te leo en los comentarios!
Preguntas frecuentes sobre el renderizado web
¿Qué es el renderizado web?
Es el proceso por el que un navegador o un buscador convierte el código de una página web, HTML, CSS y JavaScript, en la representación visual e interactiva que ve el usuario.
¿Cómo afecta el renderizado al SEO?
Si Google no puede renderizar bien una página, puede no ver parte del contenido, los enlaces internos o los datos estructurados, lo que perjudica la indexación y el posicionamiento.
¿Google ejecuta JavaScript?
Sí, Google renderiza las páginas con una versión actualizada de Chrome y ejecuta JavaScript. Sin embargo, el renderizado puede retrasarse o fallar, por lo que es recomendable que el contenido importante esté en el HTML inicial.
¿Qué diferencia hay entre SSR y CSR?
Con SSR o renderizado en servidor, el servidor envía el HTML con el contenido ya generado. Con CSR o renderizado en cliente, el navegador recibe un HTML casi vacío y genera el contenido con JavaScript. SSR es más seguro para el SEO.
¿Cómo saber cómo ve Google mi página web?
Con la herramienta de inspección de URLs de Google Search Console: prueba la URL publicada y revisa el HTML renderizado, la captura de pantalla y los recursos que no se han podido cargar.
¿Sigue existiendo la prueba de optimización para móviles de Google?
No. Google la retiró en 2023. Para comprobar el renderizado de una URL puedes utilizar la inspección de URLs de Search Console o la Prueba de resultados enriquecidos.
¿Los buscadores con IA ven el contenido cargado con JavaScript?
Muchos rastreadores de buscadores con IA no ejecutan JavaScript, por lo que el contenido que solo aparece tras renderizar puede no ser visible para ellos. Es recomendable incluir el contenido principal en el HTML inicial.
