Definición
El JavaScript SEO es el conjunto de prácticas necesarias para que una web que construye su contenido con JavaScript pueda ser rastreada e indexada correctamente.
Existe porque Google sí ejecuta JavaScript, pero no como un navegador normal. Lo hace en dos fases y esa separación lo cambia todo:
Primera pasada. Googlebot descarga el HTML y extrae lo que hay. Si el HTML llega prácticamente vacío —un <div id="root"> y un paquete de JavaScript—, no hay nada que extraer.
Segunda pasada. La página entra en una cola de renderizado. Cuando le toca, Google la ejecuta con un navegador y ve el contenido final.
El problema está en esa cola: puede tardar horas o días, tiene presupuesto limitado y no todos los rastreadores la tienen. Otros buscadores y los previsualizadores de enlaces de las redes sociales, en general, no ejecutan JavaScript en absoluto.
Los síntomas
- Contenido que tarda semanas en indexarse o que no se indexa.
- La herramienta de inspección de URLs muestra el HTML sin el contenido.
- Compartir un enlace en WhatsApp o LinkedIn no genera vista previa, o genera una genérica.
- Enlaces internos que Google no sigue porque se generan por JavaScript.
- Títulos y descripciones genéricos en los resultados, iguales para todas las páginas, porque se ponen desde el cliente.
Ejemplo práctico
Auditando una web me encontré el caso completo: el HTML que devolvía el servidor estaba prácticamente vacío y todo el contenido se pintaba en el navegador.
El efecto en cadena era el siguiente. Google recibía una página sin texto, la metía en la cola de renderizado y la procesaba días después. Para un blog que publica a diario, eso significa ir siempre por detrás.
Y había un agravante que multiplicaba el problema: el robots.txt bloqueaba la carpeta donde vivían todo el JavaScript y todo el CSS compilados. Así que cuando por fin llegaba el turno de renderizar, Google tampoco podía descargar el código que necesitaba para pintar la página. Veía una página rota, sin contenido y sin estilos.
Es un buen ejemplo de que en JavaScript SEO los errores se acumulan: cada uno por separado sería recuperable; juntos hacen que la web sea invisible.
En esta web hice lo contrario a propósito. Las 134 páginas del diccionario son HTML de verdad, generadas al compilar. Googlebot descarga el fichero y ya tiene el texto completo, los enlaces y los datos estructurados. No hay segunda pasada, no hay cola, no hay espera.
El precio de esa decisión es que publicar exige recompilar y desplegar. Para contenido que tiene que posicionar, es un precio pequeño.
Las soluciones, de mejor a peor
Generación estática (SSG). El HTML se genera al compilar. Lo mejor para contenido que no cambia a cada minuto.
Renderizado en servidor (SSR). El HTML llega montado en cada petición. Necesario cuando el contenido depende del usuario o cambia constantemente.
Renderizado dinámico. Servir HTML pregenerado a los rastreadores y la versión con JavaScript a las personas. Google lo consideró durante un tiempo una solución temporal y hoy lo desaconseja: es difícil de mantener y roza el cloaking.
Solo en el cliente. Es el escenario problemático. Puede funcionar, y siempre irá con desventaja.
Reglas prácticas
- Enlaces con
<a href>de verdad. Un<div>cononclickno es un enlace para Googlebot. - URLs reales para cada vista. Si todo pasa en la misma dirección, solo hay una página que indexar.
- Nunca bloquees CSS ni JavaScript en el robots.txt.
- Metadatos en el HTML inicial. Título, descripción y canónica puestos desde el cliente llegan tarde.
- Carga diferida bien hecha. Si el contenido solo aparece al desplazarse, Googlebot no lo ve: usa el mecanismo nativo del navegador o carga el contenido de entrada.
- Comprueba lo que ve Google, no lo que ves tú. La inspección de URLs de Search Console enseña el HTML renderizado real.
Errores comunes
- Suponer que "Google ejecuta JavaScript" resuelve el problema. Lo ejecuta tarde, con límites y solo él.
- Bloquear los recursos necesarios para renderizar.
- Contenido tras una interacción. Lo que solo aparece al pulsar una pestaña puede no verse.
- Depender de JavaScript para las etiquetas canónicas. Es el caso donde más problemas causa.
- No probar con JavaScript desactivado. Es la comprobación más rápida que existe: desactívalo y mira qué queda.
- Elegir una arquitectura de aplicación para una web de contenido.
Cuándo preocuparte
En cuanto tu web dependa de JavaScript para mostrar contenido que tiene que posicionar. La comprobación de treinta segundos: ver el código fuente de la página —el original, no el inspector— y buscar si tu texto está ahí. Si no está, tienes un problema de JavaScript SEO.
