JavaScript, como ya comentamos más profundamente en este artículo, es un lenguaje de programación que permite agregar interactividad a las páginas web. Desde su creación en 1995, ha evolucionado hasta convertirse en una pieza fundamental del desarrollo web moderno, permitiendo crear aplicaciones dinámicas y experiencias de usuario más ricas.
JavaScript permite que los sitios web sean más interactivos y dinámicos, algo que con un lenguaje de marcado como HTML no podemos conseguir. Esto incluye funciones como validación de formularios, actualización de contenido en tiempo real y creación de aplicaciones de una sola página (SPA). Estas características mejoran la experiencia del usuario, pero también pueden complicar la indexación por parte de los motores de búsqueda.
Esto es, como consultor@ SEO tarde o temprano te las tendrás que ver con Javascript y optimizar una web para que los crawlers la rastreen y rendericen de forma correcta que esté desarrollada con JS.
Uno de los principales desafíos que presenta JavaScript para el SEO es que los motores de búsqueda deben ser capaces de rastrear, renderizar e indexar contenido generado dinámicamente. Si no se implementa correctamente, esto puede llevar a problemas de indexación y pérdida de visibilidad en los resultados de búsqueda.
¿Google lee JavaScript?
Se ha escrito mucho sobre cómo Google procesa Javascript, siempre se ha leído que Google tenía problemas para procesar este tipo de contenido… pero lo cierto, es que a día de hoy Google puede leer perfectamente contenido aunque esté en webs con Javascript, siempre que no se bloquee el acceso a los archivos de JS en robots.txt por ejemplo, pero hay algunos peros, que iremos desgranando.
Fases de rastreo, renderizado e indexación de contenido JavaScript
Google procesa el contenido de las páginas web en tres fases: rastreo, renderizado e indexación. Durante el rastreo, el bot de Google descarga el HTML inicial. En la fase de renderizado, se ejecuta el JavaScript para mostrar el contenido dinámico. Finalmente, el contenido se indexa en los resultados de búsqueda.
Limitaciones y consideraciones en el procesamiento de JavaScript por parte de los motores de búsqueda
Aunque Google puede procesar JavaScript, existen limitaciones. Por ejemplo, el renderizado puede retrasarse si el JavaScript es demasiado pesado o si depende de recursos externos. Además, algunas funciones dinámicas pueden no ser interpretadas correctamente.
Técnicas de Renderizado y su Impacto en el SEO
Renderizado del lado del cliente (Client-Side Rendering – CSR)
El renderizado del lado del cliente (Client-Side Rendering – CSR) es un enfoque en el que la mayor parte del trabajo de generación de contenido de una página web se realiza directamente en el navegador del usuario. En esta técnica, el servidor solo envía un documento HTML básico, y los scripts de JavaScript incrustados en la página son los responsables de completar el contenido dinámico una vez que la página se carga en el navegador.
Por ejemplo, en una aplicación de una sola página (Single Page Application – SPA), el servidor envía un HTML vacío o mínimo junto con un archivo JavaScript que contiene toda la lógica para construir la interfaz de usuario. Una vez que el navegador descarga y ejecuta el JavaScript, el contenido dinámico se renderiza en la pantalla.
✅ Ventajas del CSR:
- Interactividad más fluida: Las aplicaciones CSR ofrecen una experiencia de usuario más dinámica y reactiva, ya que evitan recargar la página completa cada vez que el usuario realiza una acción.
- Menor carga inicial del servidor: El servidor no necesita generar el contenido completo de cada página solicitada. En lugar de eso, envía los mismos archivos HTML y JavaScript a todos los usuarios.
❌Desventajas del CSR:
- Problemas de indexación: Los motores de búsqueda, como Google, deben esperar a que el JavaScript se cargue y se ejecute para ver el contenido completo. Esto puede generar retrasos en el rastreo y, en algunos casos, llevar a que no se indexe el contenido.
- Carga diferida de contenido: Si los scripts de JavaScript tardan demasiado en ejecutarse o si hay errores en el código, los motores de búsqueda pueden no ver el contenido dinámico generado.
- Impacto en los Core Web Vitals: La ejecución de JavaScript puede afectar las métricas de rendimiento web clave, como el Largest Contentful Paint (LCP) y el First Input Delay (FID), lo que puede perjudicar el posicionamiento SEO.
Renderizado del lado del servidor (Server-Side Rendering – SSR)
El renderizado del lado del servidor (Server-Side Rendering – SSR) es una técnica en la que el servidor genera el HTML completo de cada página antes de enviarlo al navegador del usuario. Esto significa que el usuario recibe una página completamente renderizada, lo que mejora significativamente la velocidad de carga percibida y la indexabilidad por parte de los motores de búsqueda.
En lugar de enviar un HTML vacío y depender del JavaScript para construir la página, el servidor procesa toda la lógica de la aplicación y envía un documento HTML completo. El JavaScript se usa posteriormente para manejar la interactividad de la página, pero el contenido esencial ya está presente en el HTML inicial.
✅ Ventajas del SSR:
- Mejor indexación por los motores de búsqueda: Dado que los motores de búsqueda reciben un HTML completo, el contenido es visible de inmediato, sin necesidad de ejecutar JavaScript.
- Mejora de los Core Web Vitals: El SSR ayuda a reducir el tiempo necesario para que el contenido principal esté visible (LCP) y mejora la interactividad (FID), factores clave para el posicionamiento SEO.
- Mayor compatibilidad con redes sociales: Las páginas renderizadas en el servidor suelen ser más compatibles con los sistemas de vista previa de enlaces en redes sociales, lo que mejora el rendimiento en términos de tráfico referencial.
❌Desventajas del SSR:
- Carga inicial del servidor: El SSR requiere más recursos del servidor para procesar cada solicitud, ya que debe generar el HTML completo antes de enviarlo.
- Tiempo de respuesta más lento: La generación del HTML puede llevar más tiempo, lo que puede aumentar el Time to First Byte (TTFB), una métrica importante para el SEO.
Renderizado dinámico y renderizado híbrido: ventajas y desventajas
Renderizado dinámico:
El renderizado dinámico es una técnica que consiste en servir diferentes versiones de una página según quién la solicite. Los usuarios normales reciben una página renderizada del lado del cliente (CSR), mientras que los rastreadores de los motores de búsqueda reciben una versión prerenderizada generada en el servidor (SSR).
Esto se logra utilizando herramientas como Puppeteer o servicios de renderizado dinámico como Rendertron, que generan una versión HTML completa de la página y la sirven a los bots para mejorar la indexabilidad.
✅ Ventajas del renderizado dinámico:
- Mejora de la indexación SEO: Los rastreadores de los motores de búsqueda reciben una versión HTML completa, lo que mejora la indexación.
- Experiencia de usuario más rápida: Los usuarios humanos siguen beneficiándose de una experiencia interactiva y dinámica gracias al CSR.
❌Desventajas del renderizado dinámico:
- Mantenimiento complejo: Requiere configuraciones adicionales en el servidor y un monitoreo constante para asegurarse de que ambas versiones (para usuarios y bots) estén sincronizadas.
- Riesgo de cloaking: Si no se implementa correctamente, el renderizado dinámico podría ser considerado como cloaking por Google, lo que puede llevar a sanciones.
Renderizado híbrido:
El renderizado híbrido combina las técnicas de CSR y SSR en un enfoque mixto. La aplicación genera una parte del contenido en el servidor (SSR) para garantizar que los motores de búsqueda y los usuarios vean el contenido crítico de inmediato, mientras que las partes menos críticas de la página se cargan mediante JavaScript (CSR) para mejorar la experiencia interactiva.
✅ Ventajas del renderizado híbrido:
- Equilibrio entre rendimiento y SEO: El contenido crítico se carga rápidamente gracias al SSR, mientras que el JavaScript mejora la interactividad sin comprometer el SEO.
- Mejora de los Core Web Vitals: Ayuda a reducir el LCP y mantener una experiencia de usuario fluida.
❌Desventajas del renderizado híbrido:
Posibles problemas de sincronización: Si no se gestionan correctamente los estados entre el servidor y el cliente, pueden surgir inconsistencias en la aplicación.
Implementación más compleja: Requiere más esfuerzo técnico y una configuración adecuada para lograr un equilibrio efectivo.
Herramientas para evaluar el SEO en sitios con JavaScript
Google Search Console para detectar y solucionar problemas
Google Search Console ofrece herramientas como el inspector de URL para detectar problemas de rastreo e indexación en sitios que utilizan JavaScript. Se recomienda revisar los informes de cobertura y utilizar la herramienta de inspección de URL.
Pruebas de renderizado con herramientas como Screaming Frog
Screaming Frog permite analizar cómo se renderiza un sitio y detectar posibles problemas con JavaScript. Es una herramienta esencial para auditar sitios dinámicos.
✅ Prácticas recomendadas para optimizar JavaScript para SEO
📌Asegurar la accesibilidad del contenido para los rastreadores
Es importante asegurarse de que todo el contenido esencial sea accesible para los rastreadores. Esto incluye evitar cargar contenido crítico únicamente a través de JavaScript.
📌Evitar bloqueos en el archivo robots.txt
Verifique que los archivos JavaScript necesarios para renderizar el contenido no estén bloqueados en el archivo robots.txt. De lo contrario, los motores de búsqueda no podrán acceder a ellos.
📌Implementar URLs estáticas y evitar la paginación infinita
Las URLs estáticas son más fáciles de rastrear y compartir. Además, se recomienda evitar la paginación infinita, ya que puede dificultar el rastreo completo del contenido.
📌Mantén el código JS fuera de <head>
John Mueller dio hace tiempo algunos tips para optimizar que los crawlers pueden leer bien todo el contenido JS en nuestra web, y una de esas indicaciones era clara, mantener este código fuera de las etiquetas <head></head>.
❌ Errores básicos a evitar con Javascript
📌 Contenido no indexable debido a una mala configuración
Un error común es no asegurar que el contenido crítico esté disponible en el HTML inicial. Esto puede llevar a que los motores de búsqueda no indexen el contenido adecuadamente.
📌 Problemas con enlaces internos generados dinámicamente
Los enlaces internos generados con JavaScript deben ser rastreables. Se recomienda utilizar atributos href estándar en los enlaces.
📌 Impacto negativo en la velocidad de carga y experiencia del usuario
Un uso excesivo de JavaScript puede ralentizar el tiempo de carga, afectando negativamente los Core Web Vitals y la experiencia del usuario.
