Técnico
Renderizado con JavaScript: cuándo Google no ve tu contenido
Si el texto solo aparece después de ejecutar un programa, puede no verse nunca. Cómo comprobarlo en un minuto y qué hacer si tu web depende del renderizado.
- Lectura 10 min
- Publicado
- Jesús Iturbide consultor SEO
- Cómo reviso estos artículos
En corto
Google ejecuta JavaScript, pero no siempre, no de inmediato y no todos los buscadores ni asistentes lo hacen igual. Si tu contenido principal solo existe después de ejecutar código, estás asumiendo un riesgo evitable. Se comprueba en un minuto viendo la página sin ejecutar guiones y se resuelve sirviendo el contenido ya montado.
Del enlace al resultado
- Un enlace lleva a la página
- Se descarga y se lee
- Entra en el índice
- Compite por salir
Es un tema que se plantea en términos absolutos, y ninguno de los dos extremos es cierto: ni «Google no lee JavaScript», que hace años que no es verdad, ni «da exactamente igual», que tampoco lo es.
Lo que hay es un coste y un riesgo, y conviene saber cuál se está asumiendo antes de elegir cómo se construye la web.
Las dos fases
| Primera lectura | Renderizado | |
|---|---|---|
| Qué ve | El código tal como llega del servidor | La página ya montada, como la ve una persona |
| Cuándo | Inmediato | Después, a veces con retraso |
| Coste | Bajo | Alto |
| Garantía | Siempre ocurre | No para todas las páginas de un sitio grande |
| Otros sistemas | Todos lo hacen | Bastantes no lo hacen o lo hacen a medias |
Cómo comprobarlo en un minuto
Desactiva JavaScript en el navegador
En las opciones de sitio, y recarga la página. Lo que veas es lo que hay en la primera lectura.
Mira el código fuente sin ejecutar
La opción de ver el código original, no el inspector, que muestra la página ya montada.
Busca tu texto principal
Si el contenido de la página no está ahí, depende del renderizado.
Usa la inspección de Search Console
Muestra el HTML que se obtuvo y una captura de cómo se vio: es la comprobación definitiva.
Repítelo en una ficha o artículo
No solo en la portada: a veces el problema está solo en las plantillas internas.
Lo que más falla
Los enlaces, el punto crítico
Un enlace tiene que ser un enlace con su dirección visible en el código. Un botón que ejecuta una función para cambiar de página funciona para una persona y no existe para quien solo lee el código. Es la causa de muchas secciones huérfanas en webs modernas por lo demás bien construidas.
Lo mismo con la paginación de un listado: si la página dos solo se alcanza pulsando un botón que carga más elementos, los productos del final no se descubren.
Las soluciones, de mejor a peor
| Enfoque | Qué hace | Cuándo |
|---|---|---|
| Generación estática | El HTML se construye antes y se sirve montado | Lo ideal para contenido que no cambia a cada segundo |
| Renderizado en servidor | El servidor monta la página en cada petición | Cuando hay contenido dinámico o personalizado |
| Hidratación con contenido en el HTML | El texto está y el código solo añade interactividad | La opción razonable para casi todo |
| Renderizado solo en cliente | Todo se construye en el navegador | Aplicaciones internas, no webs que deban posicionar |
Lo que no arregla el problema
Cuándo es urgente
Si tu web es una tienda o un sitio de contenido y el texto principal no está en la primera lectura, es urgente: estás dependiendo de una segunda fase que puede tardar o no llegar para todas las páginas, y quedándote fuera de los sistemas que no la hacen.
Si es una aplicación interna, un panel o una herramienta detrás de un acceso, no importa nada: esas páginas no tienen que posicionar.
Qué hacer si ya está construida así
Un caso: el catálogo invisible
Qué preguntar antes de encargar una web
Como esto se decide en la fase de desarrollo y después cuesta mucho revertirlo, lo más útil es llevarse las preguntas correctas a la reunión donde se elige la tecnología.
La primera y principal: ¿el contenido de las páginas va a estar en el HTML que llega del servidor, o se va a construir en el navegador? Es una pregunta que cualquier persona técnica entiende y responde en una frase, y de ella depende todo lo demás.
La segunda: ¿la navegación entre secciones y la paginación van a usar enlaces reales con su dirección? Si la respuesta incluye la palabra «botón», conviene profundizar.
La tercera: ¿cómo se van a generar los títulos, las descripciones y las canónicas de cada página, y se pueden editar una a una? En algunos desarrollos a medida eso se olvida por completo y después hay que añadirlo.
Y la cuarta, más práctica: ¿puedo ver una página del prototipo con el código fuente sin ejecutar guiones? Con esa comprobación, hecha antes de aprobar nada, se evitan casi todos los problemas de este artículo.
Qué mediría
Cuántas de tus páginas están indexadas frente a las que declaras en el sitemap. Una diferencia grande con un sitio construido así apunta casi siempre aquí, y se confirma en un minuto viendo una página sin ejecutar guiones.
Preguntas frecuentes
¿Google lee JavaScript?
Sí, en una segunda fase que ejecuta el código de la página. Pero esa fase consume muchos más recursos, puede tardar, no está garantizada para todas las páginas de un sitio grande y varios sistemas que leen la web, incluidos algunos asistentes, no la hacen o la hacen a medias.
¿Cómo compruebo si mi contenido se ve?
Desactivando JavaScript en el navegador y recargando, o mirando el código fuente original en vez del inspector. Si tu texto principal no está ahí, depende del renderizado. La comprobación definitiva es la herramienta de inspección de Search Console, que muestra el HTML obtenido y una captura.
¿Qué es lo que más falla?
El contenido que se carga al bajar y nunca llega, las pestañas y acordeones que traen su texto al pulsar, los listados cargados por peticiones y, sobre todo, los enlaces que no son enlaces: elementos que cambian de página con código y sin una dirección real en el HTML.
¿Sirve enviar el sitemap con todas las páginas?
No: el sitemap dice que esas direcciones existen, no hace que se vea su contenido. Tampoco lo arreglan los datos estructurados, que deben describir lo que se ve y no sustituirlo. Y servir una versión distinta a los buscadores que a las personas puede acarrear una acción manual.
¿Hay que evitar los marcos modernos?
No: casi todos permiten generar el HTML antes o montarlo en el servidor, y así el contenido está desde la primera lectura mientras el código solo añade interactividad. El problema no es la tecnología, es construirlo todo en el navegador en una web que necesita posicionar.
En SEO técnico compruebo cómo ve tu web un buscador y decido si el contenido debe llegar ya montado desde el servidor. Cuando la respuesta es reconstruirla, eso ya es desarrollo a medida o aplicaciones a medida, según el caso. Si tus páginas no se indexan, empieza por cómo saber si Google tiene indexada tu web y por qué tu web no aparece en Google. El diagnóstico completo, en una auditoría SEO.
Si te está pasando
La primera llamada no cuesta nada y suele bastar para saber si tiene arreglo. Si tu caso no es para mí, te lo digo.
