Qué es el JavaScript SEO y cómo optimizarlo

Cuando haces SEO en tus sitios web, ¿tienes en cuenta la gestión del JavaScript que utilizan tus páginas? Saber cómo rastrea Google este lenguaje de programación puede ser indispensable para conseguir la indexación de las URLs y obtener el mejor posicionamiento en las páginas de resultados de búsqueda.

No se trata de aprender a programar en JavaScript, pero sí necesitas saber cómo lo lee Google para optimizar el rastreo. Hoy quiero hablarte de SEO para JavaScript; veremos los aspectos básicos que te ayudarán a mejorar el SEO de los sitios web que gestionas.

¿Qué es el SEO JavaScript?

El SEO JavaScript es parte del trabajo de optimización para los motores de búsqueda que tiene por objetivo mejorar el rendimiento de los sitios web que utilizan JavaScript; es decir, lo que se busca es que las URLs sean rastreables e indexables.

A pesar de que JavaScript es muy útil para añadir funcionalidad a tus webs, este lenguaje puede afectar de alguna manera al rastreo de de tus páginas, dificultando la indexación de tu site. Esto se debe a que los crawlers de Google necesitan implementar más recursos para procesar este código de manera completa.

Los 5 pasos que sigue Google para procesar las páginas con JavaScript

En los inicios de los buscadores, solía bastar el HTML para poder ver el contenido de las URLs. Con la implementación del JavaScript en cada vez más sitios web, los buscadores se han adaptado para emular a los navegadores y poder leer los contenidos de la misma manera en que lo hacen los usuarios.

Google realiza esta representación a través de lo que llaman WRS (Web Representation Service) que se lleva a cabo en cinco pasos:

Cola de rastreo
Rastreador
Procesamiento
Cola de Procesamiento
Renderizado

Veamos cada uno de estos pasos con detalle.

Cola de rastreo. Como paso previo al rastreo de una página, el robot de Google la pone en una cola. Esto se debe a que Google tiene un crawling budget (presupuesto de rastreo) y debe asignar prioridad a las solicitudes. Por lo general, los sitios más recientes o aquellos que tienen muchas páginas requieren de más tiempo, es decir, demandan un mayor presupuesto que una web antigua o una web pequeña.
Rastreador. El robot de Google coge una URL de la cola de rastreo y verifica si está autorizado para rastrearla. Para ello hace una lectura al archivo robots.txt.
Procesamiento. En este paso el robot verifica enlaces a otras páginas dentro del sitio, y también los diferentes archivos que se necesitan para configurar una página. Google obtiene los enlaces a otras páginas y a los recursos mediante las etiquetas <link>.
Si descubre una URL nueva pero tiene en su configuración la instrucción no follow, el robot no envía una solicitud a la URL y pasa de largo para continuar con la siguiente URL de la cola.

Para que Google pueda rastrear los enlaces internos y externos debes utilizar los anchor text y las etiquetas HTML que contengan la URL de la página enlazada en el atributo «href”.
Cola de procesamiento. Cada página rastreada pasa por el proceso de renderizado. Antes de ello, Google las pone en una cola y prioriza de la misma manera que lo hace con la cola de rastreo. Si una página está etiquetada con la instrucción “no index”, Google no la podrá en cola. Esto es algo en lo que todos sabemos que hay que poner mucha atención.
Renderizado. En esta etapa el robot renderiza las páginas para interpretar lo que ve un usuario. Es aquí donde se procesa JavaScript. Si la carga de la página lleva mucho tiempo, Google la penaliza; es decir, su posicionamiento no será en la primera página de los resultados de búsqueda. En otras palabras, será más complicado que esta URL rankee entre las primeras posiciones de los resultados de búsqueda de Google.

Tipos de renderizado de Javascript

Como explicábamos anteriormente, el último paso en el procesamiento de una página por parte de Google es el renderizado, donde el buscador interpreta el contenido de la web tal como lo haría un usuario en su navegador. Sin embargo, no todas las páginas en JavaScript se renderizan de la misma manera. Existen diferentes estrategias de renderizado que afectan el rendimiento, la indexación y la experiencia del usuario.

Client-Side Rendering (CSR)

En el Client-Side Rendering (CSR), el contenido de la página se genera completamente en el navegador del usuario mediante JavaScript. Al acceder a una URL, el servidor envía un archivo HTML vacío o con un contenido mínimo, y el navegador descarga, ejecuta y renderiza el JavaScript necesario para mostrar la página.

La ventaja principal es que reduce la carga del servidor, ya que el procesamiento ocurre en el lado del cliente. Por contra, la desventaja es que puede complicar la correcta indexación de ciertos sites.

Es una buena opción para aplicaciones altamente interactivas, como dashboards, redes sociales o aplicaciones web progresivas (PWA), donde la indexación de contenido no es prioritaria.

Server-Side Rendering (SSR)

En el Server-Side Rendering (SSR), el servidor procesa y renderiza la página completamente antes de enviarla al navegador, entregando un HTML con el contenido listo para ser mostrado.

Ventaja principal: los motores de búsqueda reciben una página completamente renderizada.
Desventaja principal: mayor carga en el servidor, ya que cada solicitud debe ser procesada individualmente.

Puede ser una buena solución para sitios en los que la indexación rápida es clave, como blogs.

Static Site Generation (SSG)

El Static Site Generation (SSG) genera las páginas de un sitio web de forma estática en el momento de la compilación, antes de que el usuario las solicite. Esto significa que el servidor no tiene que renderizar las páginas en tiempo real, sino que ya están listas para ser entregadas.

Ventaja principal: rendimiento extremadamente rápido, ya que las páginas están pre-generadas y no requieren procesamiento dinámico.
Desventaja principal: no es adecuado para contenido altamente dinámico que cambia con frecuencia, ya que requiere regenerar las páginas al realizar cambios.

Es una buena opción para blogs, landing pages, documentación y sitios con contenido que no se actualiza constantemente.

Renderizado híbrido

El renderizado híbrido combina SSR, SSG y CSR dentro de la misma aplicación, dependiendo de las necesidades de cada página.

Ventaja principal: permite optimizar tanto el rendimiento a medida, ya que cada página puede usar el método de renderizado más adecuado.
Desventaja principal: es más complejo de implementar y mantener, ya que requiere gestionar distintas estrategias de renderizado en el mismo proyecto.

¿Cuándo usarlo? Es una buena opción para sitios web con contenido mixto, como e-commerce o plataformas SaaS, donde algunas páginas necesitan carga instantánea pero en otras prima más su posicionamiento en los buscadores y aparecen problemas de indexación debido al renderizado en el lado del cliente.

Renderizado dinámico

El renderizado dinámico es una técnica en la que el servidor detecta si la solicitud proviene de un usuario o de un bot de búsqueda y entrega una versión diferente de la página en cada caso. De esta manera, ofrece una versión renderizada a los bots, y una dinámica a los usuarios.

Ventaja principal: permite que los motores de búsqueda indexen páginas de JavaScript sin necesidad de cambiar el tipo de renderizado.
Desventaja principal: Google desaconseja su uso como solución principal, ya que prefiere métodos como SSR o SSG, además de que puede ser difícil de configurar correctamente.

¿Cuándo usarlo? Antiguamente podía ser útil en casos donde se detectaban problemas graves de indexación con CSR y no era viable cambiar a SSR o SSG de inmediato. Sin embargo, viendo que Google la desaconseja, a día de hoy no es una solución recomendada.

Aspectos a revisar en webs que usan Javascript

Para optimizar el SEO de páginas que usan Javascript, los procesos son muy parecidos a los métodos que ya conoces en el SEO tradicional, salvo por algunas pequeñas variantes.

Todas las etiquetas habituales para el SEO OnPage se siguen aplicando tal y como las conocemos como, por ejemplo, título, atributos alt, metadescripción y metarobots.

Permite el rastreo por parte de los bots de Google

Revisa en el archivo robots.txt los permisos para que el bot de Google pueda rastrear todos los recursos de las páginas.

Nunca incluyas reglas como “Disallow: js” ya que, con esta regla, estás pidiéndole a Google que no rastree Javascript.

Asegúrate de que las direcciones URL son rastreables

Es frecuente encontrar enlaces implementados mediante Javascript, usando por ejemplo el elemento onclick:

<span style=»cursor: pointer;» onclick=»location.href=’/url-de-ejemplo.html'»>Ejemplo de enlace con Javascript</span>

Este tipo de enlaces, en teoría, no son accesibles para Google, aunque poco a poco, empezamos a encontrar algunos casos en los que los rastrea.

Sin embargo, si algo nos queda claro es que si quieres que tus enlaces sean correctamente rastreables, lo mejor es implementarlos de la siguiente manera:

<a href=»/url-de-ejemplo.html»>Ejemplo de enlace</a>

Configura las páginas de error

Para configurar correctamente las páginas de error en una aplicación web hecha con un framework JavaScript, es importante entender cómo maneja las rutas el servidor. Si la aplicación es una Single Page Application (SPA), el servidor suele responder con el mismo index.html para todas las rutas, lo que significa que, sin una configuración adecuada, una página inexistente devolverá un código 200 en lugar de un 404 real.

Para solucionar esto, lo ideal es configurar el servidor para que detecte rutas inexistentes y devuelva un código 404 con una página personalizada.

Si no tienes acceso a la configuración del servidor, una alternativa es mostrar una página de error dentro del frontend y agregar una metaetiqueta noindex (<meta name=»robots» content=»noindex»>) para evitar que los motores de búsqueda la indexen.

Aunque esta solución seguirá devolviendo un código HTTP 200, los buscadores podrían interpretarla como un «soft 404». Sin embargo, la mejor práctica siempre será asegurarse de que el servidor responda con el código de estado 404.

Mapa del sitio (sitemap)

Los enrutadores incluidos en los framework de JavaScript suelen tener un módulo capaz de generar sitemaps. Para saber si el tuyo la tiene busca sitemap + router.

Aunque Google no penaliza un sitio por no tener un sitemap, es recomendable que cuentes con uno actualizado para facilitar a los bots de Google encontrar y rastrear las páginas relevantes de tu sitio, para poder proceder a indexarlas.

Realiza las redirecciones desde el lado del servidor

Para asegurar una correcta indexación y experiencia de usuario, es fundamental manejar correctamente las redirecciones en un sitio web. Las redirecciones 301 y 302 deben configurarse en el servidor, ya que esta es la forma en que los motores de búsqueda como Google las reconocen y procesan de manera eficiente.

Aunque es posible realizar redirecciones desde JavaScript utilizando window.location.href, estas no son ideales para SEO, ya que pueden no ser interpretadas correctamente por los bots de búsqueda.

La mejor práctica siempre será configurar redirecciones en el servidor para garantizar que las páginas sean rastreadas y redirigidas correctamente, evitando errores y pérdida de tráfico orgánico.

Optimización SEO en los principales frameworks de JavaScript

El SEO en aplicaciones construidas con frameworks de JavaScript puede ser un desafío, especialmente cuando se usa Client-Side Rendering (CSR), ya que los motores de búsqueda pueden tener dificultades para indexar contenido generado dinámicamente.

Sin embargo, cada framework tiene estrategias para mejorar su optimización SEO, desde el uso de Server-Side Rendering (SSR) hasta la correcta gestión de metadatos y la optimización del rendimiento. A continuación, analizamos las mejores prácticas de SEO para Javascript en React, Vue, Angular, Svelte y Next.js.

React.js y SEO

React, por defecto, utiliza Client-Side Rendering (CSR), lo que puede generar problemas de indexación en los motores de búsqueda. Como el contenido se carga de manera dinámica en el navegador, los bots pueden no interpretar correctamente la página, afectando su visibilidad en los resultados de búsqueda.

Mejores prácticas de SEO para JavaScript en React:

Usar Next.js en lugar de React puro, ya que permite SSR (Server-Side Rendering) y SSG (Static Site Generation), facilitando la indexación.
Implementar React Helmet para gestionar dinámicamente títulos y metadatos en cada página.
Optimizar imágenes usando formatos como WebP y habilitar la carga diferida (loading=»lazy») para aquellas que aparezcan fuera del viewport.
Generar un sitemap.xml y robots.txt para mejorar la indexación.
Si aparecen problemas de indexación, usar herramientas de pre-rendering si no es posible implementar SSR.

Next.js y SEO

Next.js es un framework basado en React que ofrece Server-Side Rendering (SSR), Static Site Generation (SSG) y optimización automática, lo que lo hace una de las mejores opciones para SEO en aplicaciones de JavaScript.

Mejores prácticas de SEO para JavaScript en Next.js:

Implementar next/head para gestionar metadatos:
Optimizar imágenes con next/image, lo que mejora el rendimiento.
Generar automáticamente un sitemap.xml con next-sitemap.
En caso de contar con problemas de indexación, pasar SSR o SSG para evitar problemas de indexación.

Vue.js y SEO

Vue es un framework progresivo que, al igual que React, usa Client-Side Rendering (CSR) por defecto, lo que puede afectar la indexación en buscadores. Sin embargo, Nuxt.js es una alternativa basada en Vue que permite SSR y SSG, solucionando este problema.

Mejores prácticas de SEO para JavaScript en Vue:

Gestionar dinámicamente los metadatos con vue-meta:
Implementar lazy loading para imágenes y reducir el tamaño de los archivos CSS y JavaScript.
Generar un sitemap.xml con el módulo @nuxtjs/sitemap.
Si aparecen problemas de indexación, usar Nuxt.js para habilitar SSR o SSG, permitiendo una mejor indexación.

Angular y SEO

Angular, desarrollado por Google, es un framework poderoso para aplicaciones escalables. Sin embargo, al usar Client-Side Rendering (CSR) por defecto, puede presentar los mismos problemas de indexación que React y Vue.

Mejores prácticas de SEO para JavaScript en Angular:

Usar @angular/platform-browser para actualizar dinámicamente los metadatos
Optimizar imágenes y habilitar carga diferida (loading=»lazy») para mejorar la velocidad de carga.
Generar un sitemap.xml de forma manual o utilizando herramientas específicas para Angular.
Si tenemos problemas de indexación, habilitar Server-Side Rendering (SSR) con Angular Universal, lo que permite que el contenido se genere antes de enviarlo al navegador.

Svelte y SEO

Svelte es un framework innovador que se diferencia de React y Vue porque compila el código en JavaScript optimizado en tiempo de desarrollo, lo que mejora el rendimiento. Sin embargo, por defecto usa Client-Side Rendering (CSR), lo que puede afectar al SEO.

Mejores prácticas para mejorar el SEO en JavaScript Svelte:

Definir metadatos en los archivos .svelte:
Implementar optimización de imágenes y carga diferida.
Generar un sitemap.xml y configurarlo en Google Search Console.
Si detectamos problemas de indexación podemos usar SvelteKit en lugar de Svelte puro, ya que permite SSR y SSG.

Conclusión sobre el JavaScript SEO

El SEO en JavaScript no difiere del SEO tradicional en lo que respecta a la optimización de contenido, la mejora de la velocidad de carga y la aplicación de buenas prácticas generales. Factores como el uso adecuado de palabras clave, metadatos, enlaces internos, sitemaps, etc. siguen siendo fundamentales, sin importar la tecnología utilizada.

La única diferencia clave en los sitios desarrollados con JavaScript es la forma en que el contenido se renderiza. Si el contenido se genera en el cliente (Client-Side Rendering – CSR), los motores de búsqueda pueden tener dificultades para rastrear e indexar correctamente. Este problema puede solucionarse implementando técnicas como Server-Side Rendering (SSR), Static Site Generation (SSG) o pre-rendering, asegurando que el contenido esté disponible para los bots en el momento del rastreo.

A pesar de ello, Google ha mejorado significativamente su capacidad para procesar e interpretar sitios con CSR, por lo que en muchos casos no es necesario cambiar el tipo de renderizado. Por lo tanto, si ya tenemos un site que usa CSR y su rendimiento es óptimo, sólo recomendamos pasar SSR o SSG en caso de detectar problemas de rastreo que afecten a la indexación en los motores de búsqueda. En estos casos, herramientas como Google Search Console pueden ayudar a identificar si el contenido no está siendo correctamente rastreado e indexado.