Guía Global de JavaScript para SEO
Guía completa sobre cómo Google procesa páginas con JavaScript, los distintos tipos de renderizado y sus implicaciones para el SEO, problemas comunes y buenas prácticas.
Contenido Premium
Análisis profundo y estrategias accionables para profesionales del sector.
Fechas Clave
Pub: 26 feb 2025
Tiempo de Lectura
8 min
Profundidad alta
Escrito por
David Viejo
Consultor SEO
1. Cómo Google procesa páginas con JavaScript
Google no rastrea JavaScript igual que HTML estático. Usa un proceso de tres fases:
- Crawling (rastreo): Googlebot descarga el HTML inicial.
- Rendering (renderizado): El Web Rendering Service (WRS) ejecuta JavaScript para generar el DOM final.
- Indexing (indexación): Se indexa el contenido generado tras el renderizado.
Problema clave: El renderizado puede tardar más tiempo, por lo que si el contenido depende totalmente de JS puede retrasarse la indexación.
2. Tipos de renderizado (fundamental para SEO)
1. CSR (Client-Side Rendering)
El contenido se genera en el navegador.
- Ejemplo: React SPA, Vue SPA
Problema SEO: El HTML inicial está casi vacío y Google necesita ejecutar JS para ver contenido. (⚠️ Riesgo SEO alto si no se gestiona bien).
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>2. SSR (Server-Side Rendering)
El servidor envía HTML ya renderizado.
- Frameworks: Next.js, Nuxt, Angular Universal
- Ventajas SEO: ✔ HTML completo ✔ Indexación rápida ✔ Mejor rendimiento
3. SSG (Static Site Generation)
Las páginas se generan en build time.
- Ejemplo: Next.js static, Gatsby, Astro, Hugo
- Ventajas SEO: ✔ HTML completo ✔ Ultra rápido ✔ Ideal para contenido SEO
4. Renderizado híbrido
Se combina SSR para páginas importantes y CSR para interacción (ejemplo típico en ecommerce).
3. Problemas SEO comunes con JavaScript
1. Contenido que solo aparece tras interacción
Ejemplo malo: button.addEventListener("click", loadContent). Si el contenido se carga solo al hacer clic → Google puede no verlo.
Solución: Renderizar contenido inicial (Usar SSR o prerender).
2. URLs con hash (#)
Malo: example.com/#/producto (Google no siempre las trata correctamente).
Bueno: example.com/producto
3. Links con JS en vez de <a>
Incorrecto: onclick="goToPage()"
Correcto: <a href="/producto">Producto</a> (Google rastrea href, no eventos JS).
4. Metadata generada con JS
Ejemplo problemático: document.title = "Producto X" (Puede funcionar, pero no siempre se procesa bien).
Mejor generado en SSR:
<title>Producto X</title>
<meta name="description" content="Descripción">5. Lazy loading mal implementado
Malo: loadImagesOnScroll() (Google podría no ejecutar el scroll).
Mejor: <img loading="lazy">
4. Frameworks JavaScript más SEO-friendly
- React: Usar Next.js o Remix
- Vue: Usar Nuxt.js
- Angular: Usar Angular Universal
- Nuevos frameworks SEO-first: Astro, Qwik, SvelteKit
5. Buenas prácticas SEO con JavaScript
- Renderizar contenido crítico en HTML: El contenido principal debe aparecer sin ejecutar JS. (Incluye títulos, texto, enlaces, meta tags)
- Usar enlaces rastreables: Siempre
<a href="/categoria/zapatillas">. No usarrouter.push('/categoria')sin <a>. - Controlar robots y canonicals:
<link rel="canonical" href="https://example.com/producto"> <meta name="robots" content="index,follow"> - Sitemap actualizado: Especialmente importante en apps JS. Ejemplo:
/sitemap.xml - Evitar bloqueos en robots.txt: Error típico:
Disallow: /js/. Google necesita acceder al JS.
6. Herramientas para analizar SEO en JS
- Google Search Console: Permite ver cobertura, indexación, renderizado
- URL Inspection: Muestra HTML renderizado, DOM final
- Rich Results Test: Sirve para comprobar structured data tras renderizado
- Lighthouse: Audita rendimiento, SEO, accesibilidad
- Screaming Frog: Modo JavaScript Rendering para simular Googlebot
7. Debug SEO de JavaScript
Método rápido:
- Ver HTML sin JS: En Chrome: View Source. Si no aparece el contenido → problema.
- Desactivar JavaScript: DevTools → Settings → Disable JavaScript. Si la página queda vacía → mala señal SEO.
- Comparar HTML vs DOM: HTML inicial vs DOM tras renderizado
8. Structured Data con JS
Preferible SSR. Si se inserta vía JS puede tardar más en procesarse.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Zapatillas"
}
</script>9. Rendimiento (Core Web Vitals)
JavaScript excesivo afecta: LCP, FID, INP, CLS.
Buenas prácticas: ✔ Code splitting ✔ Lazy loading ✔ Tree shaking ✔ Reducir bundles.
10. Checklist SEO para sitios con JavaScript
Antes de lanzar un proyecto:
- ✔ HTML inicial contiene contenido
- ✔ enlaces con <a href>
- ✔ metadatos en SSR
- ✔ sitemap generado
- ✔ robots.txt correcto
- ✔ structured data visible
- ✔ Lighthouse > 90
- ✔ Google renderiza contenido
¿Tu estrategia SEO no está dando resultados?
Analizamos tu web y detectamos las oportunidades de crecimiento ocultas en menos de 48 horas.
?Preguntas Frecuentes
Caso relacionado
Actualidad relacionada
David Viejo
Consultor SEO
Consultor SEO Senior con 6 años de experiencia ayudando a empresas a escalar su tráfico orgánico.
Ver Perfil CompletoNewsletter
Growth Hub
Experiencia global en SEO enfocada en accesibilidad, UX de alta conversión y sistemas de retroalimentación emocional.
