Los buscadores ya pueden ejecutar JavaScript e indexar el contenido renderizado. Pero muchos sitios siguen teniendo problemas de JavaScript que perjudican el SEO. Puede que el contenido que depende de JavaScript para cargarse no se indexe. Puede que las imágenes de carga diferida no se descubran. El renderizado en el cliente puede ser demasiado lento. Los buscadores pueden no esperar a que todo cargue. Una buena optimización de JavaScript garantiza que los buscadores vean todo tu contenido, lo entiendan y puedan rastrearlo con eficiencia.
Cómo gestionan JavaScript los buscadores
Google rastrea las páginas como lo haría un navegador. Ejecuta JavaScript, renderiza el contenido e indexa lo que ve. Es una buena noticia. Las aplicaciones complejas de JavaScript pueden indexarse.
Google procesa las páginas en dos oleadas. En la primera, rastrea el HTML para ver la estructura básica de la página. En la segunda, renderiza el JavaScript para ver el contenido dinámico. Este proceso en dos oleadas requiere tiempo y recursos.
En páginas con JavaScript complejo o con mucho renderizado, Google puede no esperar a que todo cargue. Puede que solo indexe lo que se ve tras unos segundos de renderizado. El contenido que carga despacio o de forma diferida puede no indexarse.
Problemas habituales de SEO con JavaScript
El renderizado en el cliente retrasa la visibilidad del contenido. Se carga una página HTML en blanco con JavaScript que renderiza el contenido. Google ve primero la página en blanco. Si el renderizado tarda demasiado, Google puede indexar la versión en blanco.
Las imágenes y el contenido de carga diferida se cargan solo cuando el usuario hace scroll. Google no siempre hace scroll. El contenido de carga diferida que está bajo el pliegue puede no descubrirse ni indexarse.
Los errores de JavaScript rompen el renderizado. Si el JavaScript tiene errores, puede que la página no se renderice bien. Los buscadores ven contenido roto e incompleto.
Las URL generadas dinámicamente con parámetros (page?id=123&sessionid=abc) crean contenido duplicado. Cada parámetro distinto crea una URL nueva. Los buscadores pueden ver miles de duplicados del mismo contenido.
Puede que no todos los rastreadores vean las metaetiquetas generadas con JavaScript. Las etiquetas Open Graph, las Twitter cards y otras metaetiquetas añadidas con JavaScript pueden no ser leídas bien por los rastreadores de redes sociales.
Renderizado en el servidor frente a renderizado en el cliente
El renderizado en el servidor genera el HTML en el servidor y lo envía al navegador. El HTML ya contiene todo el contenido. Los navegadores lo muestran de inmediato. Los buscadores ven todo el contenido al instante.
El renderizado en el cliente envía un HTML mínimo y un JavaScript que construye la página en el navegador. El contenido se genera en el navegador después de ejecutar el JavaScript. Esto tarda más y puede que los buscadores no lo vean todo.
Para el SEO, es mejor el renderizado en el servidor o la generación estática. El HTML llega completo al navegador (y a los buscadores). El contenido es visible de inmediato.
Cómo probar el renderizado de JavaScript
Usa la herramienta de inspección de URL de Google Search Console. Introduce una página con mucho JavaScript. Google muestra lo que encontró tras el renderizado. Puedes comparar la página rastreada (lo que ve Google) con lo que ves tú en el navegador.
Usa Lighthouse en Chrome DevTools. Comprueba lo rastreable que es tu página y señala los problemas relacionados con JavaScript.
Mira el código fuente de la página en tu navegador para ver el HTML sin procesar. Después inspecciona el elemento para ver el DOM renderizado. Compáralos. Si son muy distintos, tienes renderizado en el cliente que puede confundir a los buscadores.
Usa una herramienta de pruebas en navegadores que simule lo que rastrea Google y lo que se renderiza.
Buenas prácticas de SEO con JavaScript
Usa renderizado en el servidor (SSR) o generación de sitios estáticos (SSG) para el contenido crítico. Así te aseguras de que el contenido esté en el HTML que se envía a los buscadores.
Precarga o carga de inmediato el contenido importante. No dependas de la carga diferida para el contenido que se ve sin hacer scroll. Carga al instante las imágenes y el texto críticos.
Evita las URL generadas dinámicamente con parámetros innecesarios. Usa URL limpias y simples. Si tienes que usar parámetros, usa etiquetas canonical para consolidar los duplicados.
Asegúrate de que las metaetiquetas estén en el HTML o de que JavaScript las renderice rápido. Los rastreadores de redes sociales y los buscadores deberían ver las metaetiquetas de inmediato, no tras un renderizado pesado.
Haz pruebas con Google Search Console. Comprueba lo que ve Google tras el renderizado. Corrige cualquier diferencia entre lo que ves tú y lo que ve Google.
Reduce al mínimo el tamaño del paquete de JavaScript. Los archivos JavaScript grandes tardan más en descargarse y ejecutarse. Los paquetes más pequeños se renderizan más rápido y los buscadores rastrean más rápido.
Frameworks y SEO
Los frameworks modernos de JavaScript usan por defecto el renderizado en el cliente. Esto crea retos de SEO porque el contenido debe renderizarse antes de que los buscadores puedan verlo.
Existen meta-frameworks que añaden renderizado en el servidor o generación estática a esos frameworks. Resuelven muchos de los problemas del renderizado en el cliente.
Si usas un framework de cliente sin renderizado en el servidor, debes tener un cuidado extra con el SEO de JavaScript. Haz pruebas a fondo con Google Search Console.
Preguntas frecuentes
¿Puede Google indexar contenido con mucho JavaScript?
Sí, Google puede ejecutar JavaScript e indexar el contenido renderizado. Pero requiere tiempo y recursos. Un JavaScript muy pesado puede no indexarse por completo si el renderizado tarda demasiado. Mantén el JavaScript eficiente y haz pruebas con Google Search Console para asegurarte de que tu contenido se indexa. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Debería usar renderizado en el servidor o en el cliente?
El renderizado en el servidor es mejor para el SEO. El contenido está en el HTML que se envía a los buscadores. Los buscadores lo ven de inmediato sin esperar al JavaScript. El renderizado en el cliente crea retrasos y el riesgo de que el contenido no se indexe. Usa renderizado en el servidor o generación estática para el contenido que debe posicionarse en buscadores.
¿Necesito servir HTML distinto a los buscadores?
No. Google prefiere que sirvas el mismo HTML a todos. No crees versiones especiales para Googlebot. Usa un renderizado en el servidor adecuado o detección de renderizado. Google rastreará la versión normal para usuarios y debería ver todo el contenido.
¿Cómo corrijo las imágenes de carga diferida para el SEO?
Precarga las imágenes críticas que se ven sin hacer scroll. Usa la carga diferida nativa (loading="lazy") con alternativas adecuadas para navegadores antiguos. Usa la API Intersection Observer para cargar las imágenes mientras el usuario hace scroll. Haz pruebas con Google Search Console para asegurarte de que Google ve tus imágenes.
¿JavaScript ralentiza mi sitio?
Sí, ejecutar JavaScript lleva tiempo. Los paquetes de JavaScript grandes y el procesamiento pesado ralentizan la carga de la página. Esto perjudica la experiencia del usuario y los Core Web Vitals. Reduce el tamaño del paquete de JavaScript, divide el código y aplaza el JavaScript no crítico. Carga solo lo necesario.
¿Debo usar JavaScript para generar metaetiquetas?
Evítalo si puedes. Las metaetiquetas deberían estar en el código fuente HTML. Los rastreadores de redes sociales y algunos buscadores pueden no ejecutar JavaScript. Si tienes que generar metaetiquetas con JavaScript, usa renderizado en el servidor o prerenderizado para asegurarte de que están en el HTML.