Hoy en día la experiencia de uso de un sitio web es fundamental, y JavaScript (JS) es una tecnología clave para crear experiencias dinámicas e interactivas en la web.
Sin embargo, aquí es donde surgen los problemas: mientras que para las personas es una ventaja, los buscadores y sus rastreadores no gestionan JavaScript con la misma facilidad.
Y aunque Google y otros buscadores sí pueden ejecutar e indexar contenido que utiliza JavaScript, esta tecnología sigue presentando desafíos y muchos rastreadores enfrentan dificultades para procesarlo.
Además, el reto es aún mayor para las inteligencias artificiales, ya que la mayoría no puede interpretar correctamente JavaScript.
Si tu sitio web carga contenido de forma dinámica mediante JavaScript, esto puede afectar de manera significativa la visibilidad de tus contenidos, tanto en la búsqueda orgánica tradicional como en los resultados generados por inteligencia artificial, cada vez más utilizados.
En esta guía aprenderás cuáles son los retos de utilizar JavaScript en tu sitio web y qué buenas prácticas de SEO puedes aplicar para superarlos. También descubrirás cómo Seobility puede ayudarte a analizar y optimizar tu sitio si utilizas JS.
Si no sabes muy bien qué es JavaScript y cómo funciona, te recomendamos leer primero nuestro artículo en la Wiki sobre JavaScript antes de continuar con esta guía.
¿Qué tiene de especial el SEO para JavaScript?
Cuando usamos JavaScript para cargar y mostrar contenido de forma dinámica en nuestras páginas, en la jerga se habla de renderizado del lado del cliente (client-side rendering o CSR).
Esto significa que el navegador de la persona debe procesar el contenido en JavaScript para renderizar, es decir, interpretar y mostrar la página en su dispositivo.
Por otra parte, también existe el renderizado del lado del servidor (server-side rendering), donde el servidor del sitio web genera el HTML ya renderizado antes de enviarlo al navegador. En este caso, el contenido ya está preparado para mostrarse, lo que facilita el trabajo de cualquier herramienta que no ejecute JavaScript al determinar qué debe visualizar.
Como acabamos de explicar, JavaScript es ideal para crear contenido dinámico como, por ejemplo, cuestionarios interactivos. Fíjate cómo se ve este quiz de Seobility:
El contenido dinámico añadido mediante JavaScript puede aportar interactividad y dinamismo a un sitio web, pero no siempre es visible para todos los buscadores y rastreadores.
Aunque las y los participantes puedan disfrutarlo y compartirlo, es probable que solo el contenido estático que se muestra sin JavaScript sea rastreado. Esto significa que los rastreadores probablemente no verán el contenido que aparece después de hacer clic en “Empezar el quiz”:
Esto no sería un drama si se tratara de un breve cuestionario, pero ¿qué ocurre cuando el contenido es mucho más relevante?
Si quieres posicionar bien, tu contenido debe estar siempre disponible y ser legible para los rastreadores, incluso si empleas JavaScript y renderizado del lado del cliente.
Ahora bien, aunque algunos portavoces de Google han recomendado cautela con el uso de JavaScript, tanto Bingbot como Google han hecho avances y, según este artículo, Googlebot ya es capaz de renderizar contenido en JS.
Con todo, otros buscadores y numerosos rastreadores con IA suelen experimentar dificultades para procesar contenido con JavaScript.
Para ti, como webmaster, esto significa que debes optimizar tu implementación de JavaScript y asegurarte de que el contenido crítico esté prerrenderizado en el servidor, sin depender exclusivamente de JavaScript. De este modo garantizas que Google y otros rastreadores no pasen por alto información esencial.
Pero no te preocupes por el momento, porque más adelante profundizaremos en este tema.
| Renderizado del lado del cliente (CSR) | Renderizado del lado del servidor (SSR) |
|---|---|
| Cómo se muestra el contenido (renderizado) | Utiliza los recursos del navegador para renderizar el contenido mediante JavaScript. |
| Por qué se utiliza | Permite crear sitios web dinámicos e interactivos y ofrecer experiencias personalizadas. |
| Rastreo | Los buscadores y otros rastreadores importantes pueden no detectar el contenido cargado de forma dinámica. |
Retos de JavaScript en SEO
Como probablemente ya imaginabas, el hecho de que exista algo llamado SEO para JavaScript (¿acaso existe el SEO para PHP?) indica que existen desafíos específicos a la hora de implementar JS en una web. A continuación, vamos a ver los principales.
Rastreo e indexación incompletos
Si un buscador no puede leer correctamente el contenido generado con JavaScript, ese contenido no aparecerá en los resultados de búsqueda.
Esto puede ocurrir cuando información como detalles de productos, reseñas o precios se carga desde servicios externos (por ejemplo, un plugin de valoraciones o de gestión de stock que obtiene datos desde otro sitio web o sistema empresarial).
Dado que este contenido se muestra después de que la página ha cargado, los buscadores pueden no “verlo” ni procesarlo correctamente. Incluso podrían bloquear el acceso por completo.
JavaScript también puede generar múltiples versiones de una misma página con URL ligeramente distintas, basadas en sesiones de usuaria/o, los cual puede suceder cuando se añaden códigos de seguimiento o filtros a la URL. Como consecuencia, pueden surgir problemas de contenido duplicado, aunque es posible solucionarlos mediante etiquetas canónicas.
Los rastreadores de IA no pueden ejecutar JavaScript
Un estudio reciente de Vercel sobre rastreadores con IA (en inglés) ha revelado que muchas inteligencias artificiales como ChatGPT, Claude, Meta, Bytespider y Perplexity, realmente no pueden ejecutar JavaScript.
Esto marca una gran diferencia entre la capacidad de rastreo de Google y la de las IAs: mientras Google ha invertido considerablemente en el renderizado de JavaScript, la mayoría de los rastreadores de IA solo capturan la respuesta HTML inicial y no procesan el contenido que depende de JS.
Por lo tanto, puede haber contenidos completamente invisibles para las IAs, incluso de páginas bien posicionadas en los buscadores tradicionales.
Y esto es crítico porque, según un estudio de Gartner, “los LLM reemplazarán la búsqueda tradicional”. De todos modos, aunque, esta predicción no se llegara a cumplir, son muchas las personas que ya utilizan ChatGPT o Gemini como si fueran un buscador.
Por todo ello, para aparecer en los resultados generados por los LLM, es fundamental asegurarte de que tu contenido pueda ser accesible para estos sistemas.
Muchos frameworks de JavaScript no son compatibles con SEO
Algunos frameworks populares de JavaScript utilizados en el desarrollo web como React, Angular o Vue, permiten cargar nuevo contenido sin recargar completamente la página.
Por ejemplo, pueden utilizarse para mostrar la página de inicio, la sección “sobre nosotros” y la política de privacidad dentro de la misma URL, sin que cambie la dirección en la barra del navegador.
Esto se conoce como routing y consiste en cambiar el estado de la página, es decir, el contenido que se muestra en pantalla, sin modificar la URL ni recargar el sitio por completo.
Sin embargo, esto puede generar problemas para los buscadores, ya que normalmente esperan una URL única para cada página. Si el contenido cambia pero la URL permanece igual, es posible que algunas partes del sitio no se indexen correctamente.
JavaScript afecta al rendimiento y a la sostenibilidad
Los archivos de JavaScript numerosos, pesados o mal optimizados pueden bloquear el renderizado. Es decir, que la página no se muestre correctamente hasta que JS y los elementos asociados se hayan descargado y procesado por completo en el navegador.
Como consecuencia lógica, esto aumenta los tiempos de carga y de visualización.
También puede producirse un efecto visual poco deseable conocido como cumulative layout shift (CLS), en el que el contenido debe reorganizarse en tiempo real debido a la carga tardía de ciertos elementos. Un ejemplo habitual de esto es cuando un e-commerce carga primero la página y, unos segundos después, inserta en la parte superior un banner con ofertas, desplazando el resto del contenido hacia abajo.
Este comportamiento puede afectar de forma significativa al rendimiento y a la experiencia de uso, factores que influyen directamente en el posicionamiento.
Un ejemplo de cumulative layout shift: el diseño de esta página cambia varias veces mientras se carga.
Además, las transferencias de archivos de gran tamaño y el renderizado del lado del cliente aumentan de forma considerable la huella de carbono de un sitio web.
Con la creciente concienciación sobre el carbono digital y el próximo lanzamiento de las Web Sustainability Guidelines del W3C, es momento de analizar con mayor atención el tamaño y el impacto del renderizado con JavaScript en tu sitio web
Problemas con el seguimiento y la analítica
Herramientas como Google Analytics suelen estar basadas en JavaScript. Esto significa que también pueden presentar problemas en sitios web con un uso intensivo de JavaScript. Si sus scripts no se cargan correctamente o se retrasan de forma significativa respecto al resto del contenido, es posible que las interacciones no se registren adecuadamente, lo que reduce la calidad de tus datos analíticos.
Problemas con los datos estructurados y otras mejoras
Algunas herramientas de SEO e internacionalización utilizan JavaScript para insertar schema markup (datos estructurados) y contenido localizado, especialmente atributos alt, pero en ocasiones también metaetiquetas y contenido de la página.
Depender de JavaScript para insertar contenido importante de forma dinámica es arriesgado y puede hacer que pierdas la oportunidad de aparecer en resultados enriquecidos o que los buscadores indexen contenido incorrecto.
Buenas prácticas para el SEO con JavaScript
Ya conoces los retos principales. Pero antes de alarmarte, recuerda que no todo uso de JavaScript implica los mismos problemas y que, incluso en esos casos, suele haber soluciones eficaces tanto para la experiencia de uso como para el SEO.
Evita usar JavaScript cuando no aporte valor
Integrar JavaScript no es negativo en sí mismo; de hecho, a menudo es la forma más eficaz de añadir o gestionar determinadas funcionalidades de accesibilidad como el modo oscuro o los menús adaptativos. Sin embargo, también te conviene preguntarte si el contenido que estás planificando realmente necesita cargarse mediante JavaScript.
Tal vez exista otra forma de implementarlo que no oculte contenido esencial a los rastreadores. Antes de continuar con tus optimizaciones, asegúrate de que cualquier contenido que deba mostrarse siempre esté disponible sin depender de JavaScript.
Renderiza el contenido importante sin depender de JavaScript
Asegúrate de que el contenido crítico, como el contenido above-the-fold, los metadatos, las imágenes, los enlaces y el schema markup (datos estructurados), sean accesibles para los buscadores sin necesidad de ejecutar JS.
Una opción es emplear el renderizado del lado del servidor (server-side rendering o SSR), también conocido como prerrenderizado o generación de sitios estáticos (static site generation o SSG), para que la página se construya completamente antes de enviarse al navegador.
En los casos donde aplicar SSR o SSG resulte viable, el renderizado dinámico puede ser una solución intermedia eficaz para webs que empleen JS de forma intensiva. Se trata de mostrar una versión prerrenderizada a los buscadores y otros rastreadores, mientras que las personas disfrutan de una experiencia interactiva completa con JavaScript.
Finalmente, algunos frameworks como Next.js o Nuxt.js ofrecen esta configuración dual de forma nativa mientras que otros, como Prerender, te ayudan a renderizar tus páginas para presentarle una versión legible a los bots.
La idea es garantizar que tu contenido crítico esté siempre disponible y listo para ser indexado, incluso si JavaScript llega tarde al proceso de renderizado.
Consulta aquí más información sobre Prerender y el prerrenderizado (en inglés).
Cómo funciona el prerrenderizado (Fuente)
Utiliza lazy loading compatible con SEO y mejora progresiva
Diseña tu sitio web de manera que el contenido básico pueda cargarse siempre, incluso si JavaScript falla o si este y otros recursos tardan en cargarse.
La mejora progresiva consiste en ofrecer una versión funcional en HTML estático que se cargue correctamente y cumpla los objetivos principales sin depender de JavaScript, y después añadir funcionalidades interactivas mediante JavaScript.
Por ejemplo, una entrada de blog puede mostrarse primero con su texto e imágenes, mientras que funciones adicionales como una sección de comentarios interactiva pueden cargarse después, cuando JavaScript esté disponible.
Así garantizas que el contenido principal sea accesible e indexable, aunque JavaScript no se ejecute correctamente.
De forma similar, el lazy loading es una técnica eficaz para mejorar la velocidad de la página, ya que permite cargar imágenes u otros recursos solo cuando son necesarios. Eso sí, ten en cuenta que los buscadores no siempre indexan correctamente ese contenido si el lazy loading se basa en JavaScript.
Por ello, asegúrate de:
- Utilizar el atributo HTML loading=»lazy» en las imágenes
- No ocultar contenido mediante display: none o visibility: hidden
- Incluir siempre una imagen de respaldo, por ejemplo src=»fallback.webp»
De esta forma garantizas que los buscadores puedan acceder y comprender tu contenido, incluso antes de que JavaScript se cargue.
Optimiza JavaScript para mejorar el rendimiento y la sostenibilidad
Los scripts de gran tamaño pueden ralentizar tus páginas, afectar negativamente al SEO y a la experiencia de uso, además de aumentar tu huella de carbono digital.
Por suerte existen varias formas de reducir este impacto:
- Un buen punto de partida es minificar y comprimir tus archivos JS para disminuir su tamaño y tiempo de carga. Muchas herramientas de caché y optimización incluyen la minificación automática del código y permiten activar la compresión GZIP para generar archivos más ligeros y rápidos. También existen herramientas online para minificar otros tipos de código.
- Puedes utilizar los atributos async y defer para priorizar la carga de otros contenidos antes que JavaScript. Muchos plugins de optimización también pueden gestionar esta configuración.
- Además, comprueba que tu JavaScript no esté bloqueando el renderizado porque puede afectar a tus Core Web Vitals.
También puedes trabajar con las Chrome DevTools para revisar la cobertura del código, es decir, cuánto del código se utiliza realmente en la página. Esta herramienta te ayudará a identificar elementos de JavaScript que no se usan y que están ralentizando tu sitio innecesariamente.
Adicionalmente, si cuentas con conocimientos más técnicos, puedes aplicar code splitting, que consiste en dividir archivos o bibliotecas grandes en fragmentos más pequeños que se cargan bajo demanda.
Asimismo, evalúa si te vale la pena utilizar JavaScript nativo (sin depender de bibliotecas externas) o una biblioteca más ligera puede resultar más eficiente que emplear funciones asociadas a bibliotecas de gran tamaño.
Supervisa los errores de JavaScript y el renderizado correcto
Los errores de JavaScript pueden desembocar en páginas que no funcionen correctamente e impedir su indexación. Para solucionarlo desde el punto de vista técnico, Google Search Console y las Chrome DevTools pueden ayudarte a identificar errores y depurar problemas relacionados con JavaScript.
Y como ya hemos visto, aunque es fundamental que el contenido basado en JS se renderice correctamente para los rastreadores, no siempre es tarea sencilla averiguar qué ve exactamente un crawler.
Para ello, puedes trabajar con la herramienta “Inspección de URL” de la Google Search Console: te permite analizar cualquier página individual para verificar que Google la esté renderizando de forma adecuada.
Vamos a verlo con un ejemplo:
Eso sí, a veces es necesario tener un poco más de información sobre la página y su contexto, y es aquí donde herramientas como Seobility te pueden echar una mano, pues también puede rastrear sitios web con JS dinámico.
¿Cómo te ayuda Seobility con tu web y JavaScript?
Para empezar, la Auditoría Web de Seobility te ofrece dos modos de rastreo: el modo estándar sin JavaScript y el modo Chrome (con JavaScript activado).
Para activar el rastreo con JavaScript, accede a Configuración > Rastreador dentro de tu proyecto.
El modo de rastreo con JavaScript es fundamental cuando trabajas con sitios que dependen en gran medida de JS: te permite analizar el código generado en lugar de limitarse al HTML original y a las “instrucciones” incluidas en JavaScript.
Así dispone de una visión más precisa de lo que realmente ven los buscadores capaces de ejecutar JavaScript, aunque no constituye una garantía absoluta.
También puedes configurar el tiempo de ejecución de JavaScript para simular la “paciencia” de los rastreadores y comprobar con mayor exactitud qué contenido podrían o no detectar..
Ahora bien, ten en cuenta que los rastreos con JavaScript activado tardan considerablemente más que los rastreos estándar basados únicamente en HTML.
Además, la sección “Fuentes de archivos”, disponible en Auditoría Web > Informes > Elementos técnicos y meta, también puede proporcionarte información útil y señalar posibles problemas relacionados con tus archivos de JavaScript.
Desde aquí puedes consultar cualquier problema relacionado con los archivos utilizados en tu sitio web incluyendo: demasiados archivos de JavaScript o cuando estos son demasiado grandes y afectan al rendimiento.
No obstante, los problemas relacionados con JavaScript también pueden manifestarse en otros apartados del análisis de Seobility:
- ¿Faltan metadatos, atributos alt u otros elementos que sabes que incluiste? Esto puede ocurrir cuando las imágenes o el contenido crítico se insertan mediante JavaScript.
- ¿Imágenes con lazy loading que no se reconocen? Las imágenes importantes no deberían cargarse de forma diferida, ya que los rastreadores, incluido el de Seobility, podrían no detectarlas.
- ¿Demasiados archivos de JavaScript y no sabías que existían? Haz clic en “Detalles” junto al informe para ver las URL correspondientes y comenzar a localizarlos.
También puedes configurar Seobility para que vuelva a rastrear tu sitio de forma periódica:
Configuración > Proyecto
De esta manera puedes monitorear tu progreso SEO y reaccionar con rapidez si algo no funciona correctamente.
SEO para JavaScript: no necesariamente una contradicción
Sí, el contenido dinámico inyectado mediante JavaScript plantea ciertos desafíos para el SEO, puesto que afecta a la forma en que los buscadores rastrean, renderizan e indexan el contenido.
Sin embargo, como ya hemos visto, aplicar buenas prácticas como el renderizado del lado del servidor (SSR), la mejora progresiva, el lazy loading optimizado, la optimización del propio JavaScript y la supervisión constante de errores puede mejorar significativamente la forma en que los buscadores procesan tu sitio.
Reducir al máximo el uso innecesario de JavaScript y la inyección dinámica de contenido probablemente te evitará muchos problemas (y reducirá tu huella de carbono digital).
Además, muchas de estas buenas prácticas no se aplican solo a JavaScript, sino al rendimiento web en general. Al mismo tiempo, no dejes que los aspectos técnicos más complejos te desanimen: JavaScript es prácticamente imprescindible para ofrecer una experiencia de uso ágil y accesible y puede optimizarse para SEO.
Descubre por ti misma/o el rastreo SEO con JavaScript activado en Seobility: regístrate ahora y prueba el software completo gratis durante 14 días. ¿A qué esperas? ¡Tu sitio web ya podría estar funcionando mejor!