Buenas prácticas de SEO para JavaScript: guía completa

Por Juan Carlos Angulo, Ingeniero de Software y consultor SEO técnico

JavaScript hoy es la base de casi cualquier aplicación web dinámica, pero a la hora de posicionar trae problemas concretos que hay que resolver para que el contenido no desaparezca de los buscadores. En este artículo repaso las prácticas que uso para que tanto los usuarios como los rastreadores vean el mismo contenido, sin sorpresas.

Qué implica JavaScript para el SEO

Cómo trabajan los buscadores

Google y el resto de buscadores usan bots, rastreadores o arañas, que recorren la web e indexan lo que encuentran. Durante años esos bots no podían ejecutar JavaScript bien, así que había dudas serias sobre si una aplicación muy cargada de JS era visible. Hoy sí lo ejecutan y renderizan el contenido, pero eso no significa que cualquier aplicación en JavaScript esté lista para SEO.

Retos habituales con JavaScript

1. Velocidad de carga: los frameworks de JavaScript pueden ralentizar la carga, y eso afecta el posicionamiento.
1. Rastreabilidad: el buscador tiene que rastrear e indexar de forma efectiva el contenido que renderiza el JavaScript.
1. Visibilidad del contenido: si el contenido en JavaScript no está bien optimizado, puede no aparecer en los resultados.

Entender estos retos es el primer paso para aplicar buenas prácticas de SEO en JavaScript.

Buenas prácticas de SEO para JavaScript

1. Usa renderizado en servidor (SSR)

El renderizado en servidor (SSR) genera el contenido en el servidor en lugar de en el navegador. Así el cliente recibe páginas ya renderizadas y el rastreador accede al contenido y lo indexa sin fricción. Así se implementa con frameworks populares:

Ejemplo con Next.js

Next.js es un framework de React que soporta SSR de fábrica. Un ejemplo básico:

Con SSR te aseguras de que el contenido sea rastreable e indexable, lo que da un empuje directo a tu SEO.

2. Implementa prerendering

Para sitios que no necesitan renderizado en tiempo real, el prerendering te permite servir HTML estático a los rastreadores y mantener la parte dinámica del JavaScript para los usuarios normales.

Ejemplo con Prerender.io

Prerender.io renderiza las páginas por adelantado y entrega HTML estático a los rastreadores:

De esta forma los buscadores reciben contenido completamente renderizado sin sacrificar la experiencia del usuario.

3. Optimiza la velocidad de carga

La velocidad es un factor de posicionamiento clave. Algunas estrategias para aplicaciones JavaScript:

División de código (code splitting)

El code splitting divide tu código en fragmentos más chicos que se cargan de forma asíncrona. Por ejemplo, con Webpack:

Al reducir los tiempos de carga mejoras la experiencia del usuario y, con ella, tus posibilidades de posicionar.

Atributos async y defer

Usa los atributos async y defer en tus etiquetas <script> para optimizar la carga de recursos:

• async deja que el script se ejecute apenas está disponible.
• defer ejecuta los scripts en el orden en que aparecen, recién después de que el documento se parseó.

4. Maneja el enrutamiento con la History API

Las aplicaciones de una sola página (SPA) suelen usar la History API para el enrutamiento del lado del cliente. Asegúrate de que todas las rutas sean accesibles sin depender solo de JavaScript. Conviene implementar rutas del lado del servidor que se correspondan con las del cliente.

Ejemplo con React Router

Con React Router, define las rutas de forma ordenada:

Empareja cada ruta del cliente con una ruta real en el servidor (o un archivo estático) que devuelva el mismo contenido. Si una URL solo existe cuando corre el JavaScript, un rastreador que no ejecute ese código no ve nada.

5. Hidrata, no escondas

Un error frecuente es enviar un <div id="root"></div> vacío y pintar todo después de la hidratación. Si el contenido importante (el H1, el texto, los enlaces internos) recién aparece cuando corre el bundle del cliente, estás apostando tu indexación a que el rastreador ejecute tu JavaScript sin fallas. Renderiza el contenido crítico en el servidor para que esté en el HTML crudo, y deja que el cliente tome el control para la interactividad.

6. Prueba lo que ve Google de verdad

Nunca lo des por sentado. Verifica con las herramientas que renderizan la página como lo hace el rastreador:

• Inspección de URL en Google Search Console muestra el HTML renderizado y los recursos que Google no pudo cargar.
• Prueba de resultados enriquecidos confirma que tus datos estructurados sobreviven al renderizado.
• Haz curl a la respuesta cruda y busca tu H1 y el cuerpo del texto. Si no está en el HTML crudo, depende de la ejecución de JavaScript.

Errores comunes a evitar

• Bloquear tus bundles de JS o CSS en el robots.txt, lo que impide que Google renderice la página.
• Depender de manejadores onclick en lugar de enlaces <a href> reales, que el rastreador no puede seguir.
• Cargar el contenido principal desde una llamada a una API que se dispara solo tras una interacción del usuario.
• Generar las etiquetas canónicas o los metadatos en el cliente, donde el rastreador tal vez nunca vea los valores finales.

Conclusión

JavaScript y SEO ya no están peleados, pero la responsabilidad de probarlo es tuya. Renderiza o prerenderiza el contenido crítico, mantén enlaces y URLs reales, cuida la velocidad de carga y revisa con tus propios ojos lo que ve el rastreador en lugar de asumir que todo funciona. Haciendo eso, una aplicación dinámica puede posicionar tan bien como una estática.