/lesson-22
JavaScript SEO: Asegurando que tu App sea Indexada
Aprende cómo afecta JavaScript al SEO: renderizado en cliente, en servidor y generación estática, enlaces reales, metadatos por página y cómo comprobarlo.
Lección 22 de 3015 min de lecturaActualizado el 27 sept 2026
Ideas clave
- Con renderizado en cliente, Google ve primero una estructura vacía y tiene que ejecutar el JavaScript para ver el contenido.
- El renderizado en servidor o la generación estática ponen todo el contenido, los enlaces y los metadatos en la primera respuesta HTML.
- Usa enlaces <a href> reales, define un título y una meta descripción únicos por ruta y no bloquees JS ni CSS en robots.txt.
- Revisa la página renderizada con la inspección de URLs de Search Console y cargándola con JavaScript desactivado.
El desarrollo web moderno se ha desplazado fuertemente hacia frameworks de JavaScript como React, Vue y Angular. Si bien estos frameworks crean experiencias de usuario fantásticas similares a las de una aplicación, pueden crear barreras significativas para los motores de búsqueda si no se configuran correctamente.
El problema central es el Renderizado (Rendering). Googlebot es inteligente, pero no es un usuario humano. Si tu contenido depende completamente de la ejecución de JavaScript en el navegador, corres el riesgo de ser invisible.
1. El Problema: Renderizado del Lado del Cliente (CSR)
Por defecto, la mayoría de las Aplicaciones de Página Única (SPAs) utilizan Renderizado del Lado del Cliente.
Cómo funciona:
El servidor envía un archivo HTML casi vacío (a menudo solo un <div id="root">). Luego, el navegador descarga un gran paquete de JavaScript, lo ejecuta y rellena la página con contenido.
Lo que ve Google:
Cuando Googlebot rastrea por primera vez la URL, ve el cascarón HTML vacío.
El Riesgo:
Google puede ejecutar JavaScript, pero requiere una potencia de procesamiento masiva. Por lo tanto, Google difiere este proceso.
- Primera Ola (Rastreo): Google ve el cascarón vacío.
- La cola: La página espera en una cola de renderizado. Google dice que suele ser rápido, pero es un paso extra en el que el contenido puede retrasarse o perderse.
- Segunda Ola (Renderizado): Google finalmente ejecuta el JS para ver el contenido.
En resumen: El CSR puro puede llevar a una indexación retrasada y contenido perdido si el renderizado se agota.
2. La Solución: Renderizado del Lado del Servidor (SSR) y SSG
Para asegurar que Google vea tu contenido inmediatamente, debes mover el proceso de renderizado del navegador del usuario al servidor (o tiempo de compilación).
A. Renderizado del Lado del Servidor (SSR)
Cómo funciona: Cuando un bot (o usuario) solicita una página, el servidor ejecuta el JavaScript, construye la cadena HTML completa y envía una página completamente poblada al navegador.
- Beneficio: Googlebot ve el contenido completo (texto, enlaces, metadatos) en la respuesta HTML inicial. Google no tiene que esperar al renderizado para ver el contenido.
- Frameworks:
- React: Usa Next.js o Remix.
- Vue: Usa Nuxt.js.
- Angular: Usa Angular SSR (antes Angular Universal).
B. Generación de Sitios Estáticos (SSG)
Cómo funciona: Generas todas tus páginas HTML en el tiempo de compilación (antes del despliegue). El servidor sirve archivos HTML estáticos simples.
- Beneficio: Rendimiento extremadamente rápido (genial para Core Web Vitals) y SEO perfecto.
- Caso de Uso: Blogs, sitios de marketing y proyectos de pSEO.
- Frameworks: Next.js, Gatsby, Astro.
Comparación: CSR vs. SSR vs. SSG
| Característica | CSR (Lado del Cliente) | SSR (Lado del Servidor) | SSG (Estático) |
|---|---|---|---|
| HTML Inicial | Vacío (Cargando...) | Contenido Completo | Contenido Completo |
| Amigable con SEO | Bajo / Arriesgado | Alto | Alto |
| Carga del Servidor | Baja | Alta | Baja |
| Mejor Para | Paneles, Apps Privadas | Feeds Dinámicos, Redes Sociales | Blogs, Docs, Landing Pages |
3. Mejores Prácticas Críticas para JS SEO
Incluso con SSR, los desarrolladores a menudo cometen errores que perjudican la indexación.
A. Usa Enlaces Reales (<a href>)
Googlebot descubre nuevas páginas siguiendo enlaces.
- Malo:
<div onClick={goToPage}>Producto</div>(Googlebot no hace clic). - Bueno:
<a href="/product">Producto</a>(Googlebot sigue esto).
Nota: En frameworks como Next.js, usa el componente <Link>, que renderiza una etiqueta <a> subyacente.
B. Gestión de Metadatos (El <head>)
En una Single Page App, las etiquetas <title> y <meta> a menudo permanecen estáticas (por ejemplo, "Mi App") en cada página.
La Solución: Debes inyectar metadatos dinámicos para cada ruta.
- React: Usa react-helmet-async o Next.js Metadata API.
- Vue: Usa @unhead/vue.
Verificación: Comprueba que el título cambia en la pestaña del navegador cuando navegas entre páginas.
C. No Bloquees Recursos
Asegúrate de que tu archivo robots.txt no bloquee tus archivos JavaScript (.js) o CSS (.css). Google necesita acceder a estos archivos para renderizar la página correctamente.
4. Cómo Probar tu App JS
Nunca adivines; siempre verifica lo que ve Google.
- Google Search Console (Inspección de URL): Ingresa tu URL y haz clic en "Test Live URL". Haz clic en "View Tested Page" > "Screenshot". Resultado: Si la captura de pantalla está en blanco o muestra un spinner de carga, Google no puede ver tu contenido. Si ves el texto, estás a salvo.
- Rich Results Test: Esta herramienta ejecuta el motor de renderizado real de Google. Si puede detectar tu Schema Markup, generalmente significa que renderizó la página con éxito.
- Deshabilitar JavaScript en Chrome: Usa una extensión del navegador para apagar JS. Recarga tu página. Si la pantalla está en blanco, dependes completamente de CSR.
Conclusión
Para el SEO moderno, el Renderizado del Lado del Servidor (SSR) o la Generación de Sitios Estáticos (SSG) es el estándar. Si bien Google puede indexar apps renderizadas del lado del cliente, confiar en ello es como jugar a la ruleta con tus clasificaciones. Al usar frameworks como Next.js o Nuxt, das a los motores de búsqueda exactamente lo que quieren: HTML rápido, accesible y completamente renderizado.