seojuice

El SEO para las SPA es un problema de entrega, no de renderizado

Vadim Kravcenko
Vadim Kravcenko
· Updated · 13 min read

TL;DR: El SEO para SPA ya no es un problema de renderizado, sino de entrega: las URL, los códigos de estado, los metadatos y el contenido principal deben existir antes de que JavaScript entre en juego, porque Google puede renderizar tarde y muchos rastreadores de IA ni siquiera renderizan.

El SEO para SPA ya no depende de si Google “soporta JavaScript”

Casi todos los consejos sobre SEO para SPA comienzan con la pregunta equivocada: ¿puede Google renderizar JavaScript?

Sí. Google puede renderizar JavaScript. Martin Splitt lo repite desde hace años, y aun así la gente depura SPAs mirando view-source: como si fuera la página que Google indexa.

“Mucha gente sigue mirando el código fuente. Ese no es el HTML que usamos para indexar. Usamos el HTML renderizado.”

Martin Splitt, Developer Advocate en Google

Esa cita importa porque mata un mal hábito. Si solo revisas el HTML inicial de una app React, Vue, Angular, SvelteKit, Nuxt, Remix o Next.js, puedes pasar por alto lo que Google acaba viendo. El DOM renderizado es lo que cuenta.

Pero eso no significa que el renderizado del lado del cliente sea seguro para todas las rutas públicas. Renderizar cuesta tiempo. Puede fallar. Puede ocurrir más tarde que el rastreo. Otros bots quizá nunca rendericen. La pregunta real para el seo spa es si el rastreador recibe un documento significativo a tiempo.

Ver el código fuente es el hábito de depuración equivocado

El código fuente muestra la primera respuesta HTML. En una app CSR clásica, esa respuesta suele ser un cascarón vacío, un nodo raíz, un bundle de scripts y una plegaria. Google puede renderizar la página después, ejecutar la ruta, llamar a las APIs y descubrir el contenido real. Puede.

Ese “puede” es donde los rankings se vuelven raros. La página puede lucir perfecta en tu navegador y aun así ser frágil para la búsqueda: el navegador es paciente, pero los rastreadores gestionan colas, presupuestos, timeouts y fallos.

El DOM renderizado importa, pero el HTML del primer byte sigue ganando

seojuice.io está dividido a propósito: las páginas públicas entregan HTML estático y el panel tras iniciar sesión se comporta como una app. Dos estrategias de renderizado bajo un mismo dominio, porque las rutas tienen trabajos distintos.

El blog, las herramientas y las landing pages deben ser encontradas, rastreadas, entendidas, compartidas y citadas. El dashboard no necesita posicionar para “interfaz de puntuación de páginas” y nunca lo hará. JavaScript puede mejorar la página pública tras la carga, pero la primera respuesta ya debe parecer una página.

Los rastreadores de IA cambiaron el perfil de riesgo

Durante años traté esto como un problema exclusivo de Google (estuve equivocado). Luego los rastreadores de IA empeoraron el atajo antiguo.

“Los resultados muestran de forma consistente que ninguno de los principales rastreadores de IA renderiza JavaScript actualmente.”

Vercel Engineering

Si GPTBot, ClaudeBot, PerplexityBot u otro rastreador solo ve un cascarón de app, tu contenido es invisible en esa superficie. El soporte de renderizado de Google ayuda a Google (y solo a Google); no salva a todos los rastreadores, bots de vista previa, herramientas de monitorización, parsers sociales o sistemas de ingestión de IA.

Cronología que compara cómo Googlebot, rastreadores sin JavaScript y rastreadores de IA ven el contenido de una SPA
FUENTE: Referencia SPA-SEO de SEOJuice, basada en la documentación de renderizado de Google y la medición de Vercel 2024 sobre la ejecución de JavaScript por rastreadores de IA.

Decide qué rutas de la SPA son páginas y cuáles son estados de aplicación

Este paso la mayoría de los equipos lo omite. Preguntan si toda la SPA necesita SSR. Ese planteamiento desperdicia horas de ingeniería.

Una SPA real casi siempre mezcla dos cosas: páginas rastreables y estados privados de app. Páginas de precios, posts de blog, docs, plantillas, integraciones, comparativas y landing pages son páginas. Dashboards, pasos de onboarding, modales, filtros, pantallas de cuenta y reportes guardados son estados de aplicación.

La solución empieza clasificando. No pidas a ingeniería “arreglar el SEO de la app”. Pídeles marcar qué rutas merecen tráfico orgánico y luego elegir renderizado, indexación, canonicals y códigos de estado por ruta.

Tipo de ruta ¿Debe posicionar? Renderizado Regla de indexación
Post de blog SSG o SSR Index, canonical a sí misma
Landing de producto SSG o SSR Index, canonical a sí misma
Página de resultados de búsqueda Normalmente no CSR o SSR A menudo noindex
Ruta de dashboard No CSR sin problema Bloquear tras auth o noindex
URL con filtro facetado A veces SSR solo si es curada Canonical o noindex
Árbol de decisión para elegir tratamiento SEO y modelo de renderizado por ruta en una SPA
FUENTE: Framework de clasificación de rutas SPA-SEO de SEOJuice.

Así lo explicaría en una auditoría SEO técnica. Una SPA con 40 URL públicas y 4 000 estados de dashboard no tiene 4 040 páginas SEO. Tiene 40 páginas y una interfaz de producto.

Esa distinción cambia la hoja de ruta. Las rutas públicas necesitan URL estables, canonicals propias, metadatos servidos por el servidor, enlaces rastreables, HTML útil desde el primer byte y códigos de estado correctos. Las rutas del dashboard necesitan interacción rápida, auth, manejo de estado y privacidad. Obligar a ambos grupos a un solo modelo de renderizado normalmente empeora los dos.

En mindnow, este era el error de SPA más frecuente que veía en proyectos de clientes. El equipo quería una arquitectura front elegante. Search quería documentos aburridos. El compromiso no fue abandonar la app; fue dejar de fingir que cada ruta tenía el mismo propósito.

Elige el modelo de renderizado correcto antes de crear tickets SEO

La estrategia de renderizado es una decisión arquitectónica, no una opción de un plugin SEO: si eliges mal, cada ticket posterior será un parche.

Tabla comparativa de modelos de renderizado de SPA para SEO
FUENTE: Referencia de estrategias de renderizado de SEOJuice, basada en la documentación de Google y la guía de Next.js de Vercel.

CSR: bien para dashboards, arriesgado para landing pages

El renderizado en el cliente es perfecto para pantallas autenticadas. Si el usuario debe iniciar sesión, los rastreadores no deberían indexar la ruta. CSR es arriesgado cuando el mismo cascarón sirve precios, docs, artículos y páginas de producto cuyo contenido aparece solo tras ejecutar JavaScript y responder las APIs.

SSG: aburrido, rápido y casi siempre lo acertado

La generación estática construye las páginas en HTML por adelantado (normalmente al desplegar). Para blogs, docs, changelogs, glosarios, plantillas y la mayoría del contenido de marketing, SSG es imbatible: rápido, cacheable, barato y amigable para rastreadores.

SSR: útil cuando el contenido público cambia a menudo

El renderizado en servidor encaja cuando el contenido público varía por solicitud, geografía, inventario, permisos o frescura. Lee Robinson lo describió así de claro:

“Next.js prerenderiza la página en HTML en el servidor en cada petición.”

Lee Robinson, VP of Developer Experience en Vercel

SSR entrega HTML a los rastreadores sin esperar al bundle del cliente y mantiene los datos frescos.

ISR: el punto medio práctico para sitios grandes

La regeneración estática incremental (ISR) refresca páginas estáticas tras publicar. Obtienes HTML estático para la mayoría de las peticiones y regeneración cuando cambia el contenido. Para SEO programático, docs y grandes bibliotecas de plantillas, ISR evita dolores de rebuild sin caer en CSR.

Renderizado dinámico: el parche que debería caducar

El renderizado dinámico sirve una versión al bot y otra al usuario. Puede salvar una SPA heredada cuando la migración aún no está lista, pero no diseñaría una estrategia de búsqueda nueva alrededor de él.

“Lo vería como un arreglo temporal – donde temporal puede significar un par de años – pero sigue siendo limitado en el tiempo.”

John Mueller, Search Advocate en Google

Esa es la mentalidad correcta. Usa renderizado dinámico como puente y luego cámbialo por rutas públicas server-rendered o estáticas.

Arregla las trampas de rastreo que siguen rompiendo la indexación

Los fallos duros de SEO para SPA suelen ser aburridos. No son penalizaciones misteriosas. Son bugs de entrega.

La primera trampa es el cascarón universal. Cada URL devuelve el mismo 200, el mismo nodo vacío y el mismo bundle. El router decide después si /pricing, /docs/api o /url-ficticia existen. Eso fuerza demasiado a los rastreadores y crea la segunda trampa: los soft 404.

“En lugar de responder 404, responde 200 … y siempre muestra una página tras ejecutar JavaScript.”

Martin Splitt, Developer Advocate en Google

Las rutas inválidas deben devolver 404 o 410 reales. Un simpático “page not found” del lado del cliente servido con 200 sigue siendo una mala señal (la trampa de soft 404 que consume presupuesto de rastreo).

Diagrama que muestra la diferencia entre respuestas soft 404 en SPA y códigos 404 reales
FUENTE: Referencia de trampas de rastreo SPA-SEO de SEOJuice, basada en la documentación de soft 404 de Google y la guía pública de Martin Splitt.

La tercera trampa es la navegación que los rastreadores no pueden seguir. Buttons, handlers de clic, componentes propios y eventos del router son ideales para la interacción, pero el descubrimiento interno sigue necesitando anchors rastreables con href reales. Si tus páginas clave solo se alcanzan tras un handler de JavaScript, tu rastreabilidad es más débil de lo que crees.

Los metadatos son otro fallo común. Muchas SPA actualizan titles, descriptions, canonicals, robots, Open Graph y schema después de cambiar de ruta. Visualmente funciona en el navegador. Aun así puede fallar para rastreadores, parsers sociales y bots de IA. Los metadatos de la ruta deben venir en el HTML devuelto de cualquier URL indexable.

Los canonicals merecen alerta propia. He visto apps hidratadas sobrescribir un canonical correcto con un dominio de staging, una URL raíz o la ruta anterior. Ese bug es silencioso. Nadie lo nota hasta que las URLs duplicadas se agrupan mal o posiciona la página equivocada.

El scroll infinito es otra trampa si oculta contenido tras estado de cliente. Si la página dos, tres y los ítems antiguos no tienen URLs rastreables, los motores nunca los descubrirán. Usa URLs paginadas de respaldo para archivos y categorías importantes.

El contenido principal cargado por API también es frágil. Si el H1, el cuerpo, los detalles de producto o los enlaces internos requieren dos llamadas API tras la hidratación, aumentan los puntos de fallo. El tráfico bot puede topar con rate limits. Las APIs pueden bloquear user agents desconocidos. Los timeouts pueden dejar el DOM renderizado escaso.

El hash routing debe quedar fuera de las páginas públicas indexables. Una URL como /docs#pricing sirve para fragmentos, pero routings con hash para páginas reales complican el descubrimiento, la canonicalización y la analítica.

Por último, vigila auth y peso de bundle juntos. Contenido público envuelto por error tras checks de login puede desaparecer del rastreo. Bundles pesados retrasan el renderizado y consumen presupuesto. Ambos problemas parecen “JavaScript SEO”, pero la solución práctica son límites claros de ruta y menos trabajo del cliente en páginas públicas.

Construye cada ruta indexable como documento primero y app después

La mejor regla de SEO para SPA que conozco es simple: si la ruta merece tráfico de búsqueda, la primera respuesta debe parecer una página.

Cada URL pública debe devolver HTML útil con las señales clave ya incluidas:

  • <title> correcto.
  • Meta description.
  • Canonical autoreferenciado.
  • Un H1 claro.
  • Contenido principal.
  • Enlaces internos rastreables.
  • Datos estructurados cuando proceda.
  • Código de estado correcto.
  • Etiquetas Open Graph y Twitter si el sharing importa.
Estructura de página SPA HTML-first con hidratación JavaScript tras los elementos SEO
FUENTE: Playbook de arquitectura SPA-SEO de SEOJuice para rutas públicas HTML-first.

Luego JavaScript puede hidratar componentes, personalizar elementos, cargar calculadoras, trackear eventos, filtrar tablas y mejorar la experiencia. No debería ser necesario para que el rastreador entienda de qué va la página.

Aquí se unen arquitectura de sitio y SEO para SPA. Una ruta pública sin enlaces rastreables hacia ella sigue siendo débil, aunque esté renderizada en servidor. Un documento bellamente renderizado enterrado cinco clics detrás de navegación solo-JS no rendirá como una página con un sistema de enlaces internos claro.

La regla de documento primero mantiene honesto al equipo. Pricing es un documento. Un post de blog es un documento. Una página de docs es un documento. Un filtro guardado del dashboard, un modal abierto o un paso de onboarding es estado de app. Tratar el estado de app como página de búsqueda genera hinchazón de índice. Tratar páginas públicas como estado de app crea invisibilidad.

En seojuice.io, esta división es intencional. Las rutas públicas deben ser aburridas para los rastreadores. El producto puede seguir siendo interactivo tras el login. Ambas ideas pueden convivir.

Prueba el SEO para SPA con HTML renderizado, no con fe

Si solo pruebas la experiencia del navegador, pruebas el camino feliz. El SEO para SPA necesita tests más feos.

  1. Haz un fetch de la URL con JavaScript deshabilitado y verifica que el contenido siga teniendo sentido.
  2. Inspecciona la URL en Search Console y revisa el HTML renderizado.
  3. Compara el HTML inicial con el DOM renderizado en Chrome DevTools.
  4. Testea códigos de estado con curl -I https://ejemplo.com/ruta-faltante.
  5. Rastrea el sitio con un crawler que soporte JS y otro que no.
  6. Confirma que titles, canonicals, robots, schema y enlaces internos existen antes de la hidratación.
  7. Revisa logs del servidor para hits de bots, APIs bloqueadas, timeouts y redirecciones inesperadas.
  8. Valida datos estructurados con la Prueba de resultados enriquecidos de Google tras el renderizado.

La prueba incómoda es la del H1. Si Googlebot necesita cinco pasos y dos llamadas API para hallar el H1, la página es frágil aunque acabe indexándose.

Screaming Frog, Sitebulb, Search Console, DevTools, Rich Results Test y los logs ayudan todos. La herramienta importa menos que la comparación. Quieres saber qué existe en la primera respuesta, qué aparece tras el renderizado y qué indexó realmente Google.

Aquí muchos audits de JavaScript SEO se quedan cortos. Demuestran que Google puede renderizar una página. Bien. Ahora prueba rutas inválidas, paginadas, cambios de canonical, cambios de metadatos, fallos de API, respuestas lentas y rastreadores que no sean Google.

Checklist de mejores prácticas de SEO para SPA

Usa esta checklist a nivel de ruta. Un “OK” global oculta demasiados fallos de SPA.

  • Renderizado: Las páginas públicas usan SSG, SSR o ISR. Las pantallas privadas usan CSR.
  • Routing: Cada URL indexable tiene ruta única, contenido único y canonical propio.
  • Códigos de estado: Las páginas inexistentes devuelven 404 o 410, nunca 200.
  • Enlaces: La navegación interna usa anchors rastreables con atributos href reales.
  • Metadatos: Titles, descriptions, canonicals, robots, Open Graph y schema son específicos de la ruta.
  • Contenido: El texto principal, H1, info de producto y enlaces clave existen sin esperar datos sólo-cliente.
  • Performance: Bundle size, coste de hidratación, scripts externos y code splitting por ruta están controlados.
  • Control de índice: Dashboards, rutas privadas, filtros de poco valor y páginas de búsqueda thin se bloquean o noindexan.
  • Testing: Se comparan HTML inicial, DOM renderizado y contenido indexado en templates importantes.
  • Visibilidad IA: El contenido clave aparece en HTML porque muchos rastreadores de IA no renderizan JS.

“Si no se rastrea, no puede aparecer en búsqueda. En ninguna superficie.”

Jamie Indigo, Consultora SEO técnica en Not a Robot

Esa frase condensa toda la checklist. Search, respuestas de IA, previews de enlaces y sistemas de descubrimiento dependen primero del acceso. El ranking viene después.

La arquitectura SPA SEO más simple que lanzaría hoy

Si empezara una SPA moderna pensando en tráfico orgánico, no haría todo el producto server-rendered. Lo dividiría.

Área del sitio Enfoque recomendado
Sitio de marketing Generación estática
Blog y docs Generación estática o ISR
Páginas de producto SSR o ISR
Páginas de SEO programático Generación estática con fuerte pruning
Dashboard CSR tras auth
Páginas de búsqueda y filtros Noindex salvo curación manual
Rutas inválidas 404 o 410 reales
Layout compartido Metadatos y navegación renderizados en servidor

Así lo dividiría en seojuice.io. Las páginas de marketing y los artículos deben ser HTML-first. Las superficies de producto que requieren frescura pueden usar SSR o ISR. El dashboard puede seguir siendo tipo app porque posicionarlo sería inútil.

Las páginas de SEO programático necesitan más disciplina. La generación estática facilita crear miles de páginas, incluso miles que nadie debería indexar. Genera solo páginas con demanda real, contenido útil y enlaces internos. Poda el resto antes de que Google decida por ti.

La SPA ganadora no es la que demuestra que los rastreadores pueden ejecutar JavaScript. Es la que no les hace trabajar de más.

FAQ

¿Puede una single-page application posicionar en Google?

Sí. Una SPA puede posicionar si sus rutas indexables devuelven contenido rastreable, metadatos correctos, enlaces internos y códigos de estado válidos. Google puede renderizar JavaScript, pero depender de ello para todo vuelve el sitio más frágil.

¿El renderizado en servidor es obligatorio para el SEO de una SPA?

No para todas las rutas. SSR es útil para páginas públicas con contenido cambiante. SSG o ISR suele ser mejor para contenido estable. CSR es adecuado para dashboards privados, pantallas de cuenta y estados de app que no deben indexarse.

¿Las rutas con hash son malas para SEO?

Son una mala elección para páginas indexables. Funcionan para fragmentos on-page, pero el contenido público debe tener URLs limpias, metadatos por ruta y códigos de estado a nivel servidor.

¿Se deben indexar las páginas de resultados de búsqueda de una SPA?

Normalmente no. Las páginas de búsqueda internas y filtros facetados suelen crear URLs thin o duplicadas. Las páginas de filtro curadas se pueden indexar si tienen demanda única, contenido estable y una estrategia canonical clara.

¿Cómo sé si mi SPA tiene un problema de soft 404?

Pide una URL falsa y revisa el código de estado. Si /esta-pagina-no-deberia-existir devuelve 200 con un mensaje not-found del lado del cliente, tienes riesgo de soft 404.

¿Necesitas ayuda para convertir tu SPA en páginas rastreables?

SEOJuice ayuda a los equipos a reforzar los enlaces internos rastreables en las páginas públicas que realmente merecen tráfico orgánico. Si tu SPA tiene rutas huérfanas, plantillas enterradas o páginas que Google nunca parece alcanzar, la automatización de enlaces internos puede facilitar que los rastreadores sigan la capa de documentos.

SEOJuice
Stay visible everywhere
Get discovered across Google and AI platforms with research-based optimizations.
Works with any CMS
Automated Internal Links
On-Page SEO Optimizations
Get Started Free

no credit card required

More articles

No related articles found.