seojuice

SEO para SPA en 2026: Guía de campo HTML-First para Next.js, Nuxt, SvelteKit y Astro

Vadim Kravcenko
Vadim Kravcenko
· Updated · 12 min read

TL;DR: Las aplicaciones de una sola página pueden posicionar, pero solo si las URL, los códigos de estado, los metadatos y el contenido principal se entregan en la primera respuesta HTML. Google podría renderizar JavaScript con demora; la mayoría de los rastreadores de IA ni siquiera lo procesan. Elige un modelo de renderizado por ruta: envía primero el documento y luego los estados de la aplicación; deja que JavaScript hidrate encima. A continuación: una guía de campo 2026 para equipos que trabajan con Next.js, Nuxt, SvelteKit y Astro.

Deja de preguntar si Google “soporta JavaScript”

La pregunta inicial sobre SEO en SPAs ya no es “¿puede Googlebot renderizar JavaScript?”. Sí, puede. Martin Splitt lo repite desde hace años. Aun así, mucha gente depura aplicaciones de una sola página mirando view-source: como si eso fuera lo que Google indexa.

“Mucha gente sigue mirando el código fuente. Eso no es lo que usamos para la indexación. Usamos el HTML renderizado.”

Martin Splitt, Developer Advocate en Google

Se acabó ese mal hábito. Si solo inspeccionas el HTML inicial de una app en React, Vue, Angular, SvelteKit, Nuxt, Remix o Next.js, te pierdes lo que Google acaba viendo. El DOM renderizado es lo que importa.

Pero la cuestión para 2026 no es si Google puede renderizar, sino si el documento llega lo bastante rápido para ser útil a Googlebot, a los parsers sociales y a los rastreadores de IA que dominan cada vez más el grafo de citaciones.

La brecha con los rastreadores de IA cambió la ecuación

Durante años traté esto como un problema exclusivo de Google (estaba equivocado). Luego aparecieron los rastreadores de IA con otra postura.

“Los resultados muestran de forma constante que ninguno de los principales rastreadores de IA renderiza JavaScript en la actualidad.”

Vercel Engineering

GPTBot, ClaudeBot, PerplexityBot, la descarga de entrenamiento de Gemini: todos solicitan HTML en bruto. Si tu contenido más importante está detrás de la hidratación, esos bots ven un shell vacío donde deberían estar tu tabla de precios, el copy de producto, las FAQ o la comparativa. Ejecuta nuestro Inspector de Rastreo IA en unas cuantas páginas de tu SPA y verás lo mismo que ellos.

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 en la medición de ejecución de JavaScript por rastreadores de IA de Vercel.

Clasifica las rutas antes de clasificar el problema de renderizado

La mayoría de los equipos se saltan este paso y preguntan si toda la SPA necesita SSR. Esa forma de plantearlo desperdicia horas de ingeniería.

Una SPA real mezcla dos cosas: páginas rastreables y estados privados de aplicación. Páginas de precios, posts de blog, documentación, plantillas, integraciones, páginas comparativas y landing pages de producto son páginas. Dashboards, flujos de onboarding, modales, filtros, pantallas de cuenta e informes guardados son estados de aplicación.

Empieza por la clasificación. No pidas a los ingenieros que “arreglen el SEO de la app”. Pídeles que marquen qué rutas merecen tráfico de búsqueda y, a partir de ahí, elijan renderizado, indexación, canónicos y códigos de estado por ruta.

Tipo de ruta ¿Debe posicionar? Modelo de renderizado Regla de indexación
Post de blog SSG o SSR Index, canonical a sí misma
Landing page de producto SSG o SSR Index, canonical a sí misma
Resultados de búsqueda internos Normalmente no CSR o SSR A menudo noindex
Ruta de dashboard No CSR Bloquear tras auth o noindex
URL con filtro facetado Depende SSR solo si está curada Canonical o noindex
Árbol de decisión para elegir tratamiento SEO y modelo de renderizado en rutas de SPA
Fuente: framework de clasificación de rutas SPA-SEO de SEOJuice.

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. Las rutas públicas necesitan URL estables, canónicos propios, metadatos entregados por el servidor, enlaces rastreables, HTML útil en el primer byte y códigos de estado correctos. Las rutas de dashboard necesitan interacción rápida, auth y gestión de estado. Obligar a ambos grupos a un solo modelo de renderizado suele empeorar los dos.

Elige el modelo de renderizado por ruta, no por aplicación

La estrategia de renderizado es una decisión de arquitectura, no un ajuste de plugin. Si eliges mal, cada ticket posterior será un parche.

Cuadro comparativo de modelos de renderizado 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 cliente es perfecto para pantallas de software autenticadas. Si el usuario debe iniciar sesión, los rastreadores no deberían indexar la ruta de todos modos. CSR se vuelve arriesgado cuando el mismo shell sirve páginas de precios, docs, artículos y páginas de producto donde el contenido aparece solo tras ejecutar JavaScript y recibir APIs.

SSG: aburrido, rápido y casi siempre la mejor respuesta

La generación estática crea HTML por adelantado. Para blogs, docs, changelogs, glosarios, plantillas y la mayoría del contenido de marketing, SSG es dificil de superar: rápido, cacheable, barato y amigable para rastreadores. Astro 5 apuesta fuerte por esta vía con su arquitectura de islas y el enfoque zero-JS-by-default.

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

El renderizado en servidor encaja cuando el contenido público varía por petición, geografía, inventario, permisos o frescura. Lee Robinson lo resumió así en Next.js:

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

Lee Robinson, VP Developer Experience en Vercel

SSR entrega HTML a los rastreadores sin esperar al bundle de cliente y aun así refleja datos recientes.

ISR y PPR: el punto medio práctico para sites grandes

La regeneración estática incremental actualiza páginas estáticas tras publicar. Para SEO programático, docs y grandes librerías de plantillas, ISR evita dolores de rebuild sin caer en CSR puro. Next.js 15 llevó el Partial Prerendering a estable: envías un shell estático y transmites los huecos dinámicos desde la misma ruta. Mezcla las dos posturas en una URL, más parecido a cómo funcionan las páginas reales de producto.

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

El renderizado dinámico sirve una versión a rastreadores y otra a usuarios. Puede rescatar una SPA heredada cuando la migración no está lista, pero no diseñaría una estrategia de búsqueda nueva en torno a él.

“Lo vería como un apaño temporal — donde temporal puede significar un par de años — pero es un arreglo con fecha de caducidad.”

John Mueller, Search Advocate en Google

Úsalo como puente. Sustituye el puente por rutas públicas renderizadas en servidor o estáticas.

Detalles de frameworks que importan en 2026

El modelo de renderizado correcto también depende del framework. Los valores por defecto han cambiado en los últimos doce meses y algunos afectan las decisiones de SEO en SPAs.

  • Next.js 15. React 19 estable, Turbopack en dev estable, fetch y manejadores GET sin caché por defecto. El comportamiento cacheado anterior ocultaba bugs de contenido obsoleto; ahora debes declarar la caché por ruta. Partial Prerendering (PPR) es la estrella SEO: shell estático con huecos dinámicos en streaming, manteniendo frescura y rastreabilidad. Más detalles en nuestra guía de SEO para Next.js, React y Nuxt.
  • Nuxt 4. El código de la aplicación vive en app/ por defecto. Proyectos TypeScript separados para app, servidor, shared y builder reducen fugas de tipos que antes exponían secretos del servidor en el bundle cliente. Nuxt 4.4 (marzo 2026) añadió vue-router v5 y props tipados en layouts: pequeñas victorias para enviar metadatos por ruta sin fricción.
  • SvelteKit 2 con runas de Svelte 5. Las páginas se renderizan en servidor por defecto; el prerender es opt-in por ruta. El modelo mental es “cada ruta es SSR salvo que diga estática”, lo opuesto a la trampa SPA-by-default. Los bundles siguen ligeros, así que la hidratación rara vez bloquea el primer pintado.
  • Astro 5 (y 6). Cero JavaScript por defecto, arquitectura de islas, soporte multi-framework. Tras la adquisición por Cloudflare en enero de 2026, el despliegue en edge se afinó aún más. Astro es la respuesta sencilla para SPAs con mucho contenido que solo necesitan componentes React o Vue en páginas concretas.

El framework importa menos que la disciplina por ruta. Cualquiera de los cuatro puede entregar una SPA rastreable. Los cuatro pueden servir una invisible si el contenido público se queda detrás de la hidratación.

Trampas de rastreo que siguen rompiendo la indexación

Los fallos graves de SEO en SPAs suelen ser aburridos. No son penalizaciones misteriosas, sino bugs de entrega.

La primera trampa es el shell universal. Todas las URL responden con 200, el mismo root vacío y el mismo bundle. El router decide después si /pricing, /docs/api o /totally-fake-url existen. Eso fuerza a los rastreadores y crea la segunda trampa: los soft 404.

“En lugar de responder con 404, responde siempre con 200 … mostrando una página basada en la ejecución de JavaScript.”

Martin Splitt, Developer Advocate en Google

Las rutas inválidas deben devolver códigos 404 o 410 reales. Un simpático “page not found” del lado cliente servido con 200 sigue malgastando crawl budget y confunde señales de indexación.

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. Botones, handlers de clic y eventos del router están bien para la interacción, pero el descubrimiento interno sigue necesitando anchors con href reales. Si tus páginas clave solo se alcanzan tras un handler JavaScript, tu rastreabilidad es más débil de lo que parece.

Los metadatos son otro fallo común. Muchas SPAs actualizan títulos, descripciones, canónicos, etiquetas robots, Open Graph y schema tras los cambios de ruta. Visualmente funciona en el navegador; para rastreadores, parsers sociales y bots de IA sigue fallando. Los metadatos por ruta deben venir en el HTML devuelto.

Los canónicos merecen alerta propia. He visto apps hidratadas sobrescribir un canonical correcto con un dominio de staging, la raíz o la ruta anterior. El bug pasa desapercibido hasta que las URLs duplicadas se agrupan o posiciona la página equivocada.

El scroll infinito esconde contenido tras estado cliente. Si la página dos, tres y siguientes no tienen URL rastreables, los buscadores quizá nunca las descubran. Usa URLs paginadas de respaldo para archivos y categorías importantes.

El contenido principal cargado por API es frágil. Si el H1, el cuerpo, los detalles de producto, las reseñas o los enlaces internos dependen de llamadas API tras la hidratación, sumas puntos de fallo. El tráfico bot choca con rate limits, las APIs bloquean user-agents desconocidos o los timeouts dejan el DOM renderizado escaso.

Qué cita realmente AI Overviews de una SPA

Esta es la novedad de 2026. AI Overviews de Google resume respuestas por encima del listado orgánico y cita las fuentes usadas. Esas citaciones son el nuevo top of funnel y premian una forma concreta de HTML.

El sistema de citación extrae señales claras y estáticas: texto visible, encabezados, listas, tablas, HTML semántico disponible en la primera respuesta. No espera pacientemente a la hidratación. Si tu párrafo más citable aparece solo tras un useEffect, AI Overview no lo verá.

Tres cosas importan para que las páginas de una SPA sean citadas:

  1. Párrafos de respuesta en HTML primero. Los primeros 300-400 palabras de cualquier ruta indexable deben responder a la pregunta principal sin JavaScript. La mayoría de las citas de AIO viven ahí.
  2. Estructura semántica para listas y tablas. Listas (<ul>, <ol>) y tablas HTML se extraen directamente. <div>s disfrazadas de tablas, no.
  3. URLs estables que el bot pueda volver a solicitar. AI Overviews revalida las fuentes citadas. Rutas con #, solo queries o bifurcaciones de renderizado dinámico fallan más.

Lo mismo aplica a las citas de Perplexity, las respuestas con navegación de ChatGPT y las lecturas web de Claude. Sus rastreadores piden HTML en bruto: si la respuesta no está ahí, la página no se cita. Optimizar para citas de AI Overview profundiza más, y nuestro análisis de impacto de AIO explica por qué la pérdida de impresiones duele más que la de clics.

Entrega cada ruta indexable como documento primero

La regla a la que siempre vuelvo: si la ruta merece tráfico de búsqueda, la primera respuesta debe parecer una página.

Eso significa que cada URL pública devuelve HTML útil con las señales esenciales ya presentes:

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

Después, JavaScript puede hidratar componentes, personalizar elementos, rastrear eventos y enriquecer la experiencia. No debería ser necesario para que el rastreador entienda de qué va la página.

La arquitectura del sitio también importa. Una ruta pública sin enlaces rastreables que la apunten sigue siendo débil — incluso si se renderiza en servidor. Un documento perfectamente renderizado enterrado a cinco clics detrás de navegación solo cliente no rinde como uno dentro de un sistema claro de enlazado interno.

Prueba el SEO de tu SPA con HTML renderizado, no con esperanza

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

  1. Solicita la URL con JavaScript deshabilitado y comprueba si el contenido sigue teniendo sentido.
  2. Inspecciona la URL en Google Search Console y revisa el HTML renderizado.
  3. Compara el HTML inicial con el DOM renderizado en Chrome DevTools.
  4. Prueba códigos de estado con curl -I https://ejemplo.com/ruta-inexistente.
  5. Rastrea el sitio con un crawler con JS y otro sin JS.
  6. Confirma que títulos, canónicos, 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 Rich Results Test de Google tras el renderizado.

La prueba incómoda es la del H1. Si Googlebot necesita cinco pasos y dos llamadas API para encontrar el H1, la página es frágil aunque acabe indexándose. Haz lo mismo con GPTBot, ClaudeBot y PerplexityBot: si no ven el H1 en el HTML en bruto, la ruta no aparecerá como cita de IA.

Checklist SPA-SEO para 2026

Úsalo por ruta. Un “aprobado” global esconde demasiados fallos.

  • Renderizado: Páginas públicas en SSG, SSR, ISR o PPR. Pantallas privadas en 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, no 200.
  • Enlaces: La navegación interna usa anchors rastreables con href reales.
  • Metadatos: Títulos, descripciones, canónicos, robots, Open Graph y schema son específicos de la ruta y están en el HTML.
  • Contenido: Copia principal, H1, info de producto y enlaces clave existen sin esperar a datos solo cliente.
  • Rendimiento: Bundle, coste de hidratación, scripts de terceros y split de código por ruta bajo control.
  • Control de indexación: Dashboards, rutas privadas, filtros poco valiosos y búsquedas internas van bloqueados o con noindex.
  • Testing: Se comparan HTML inicial, DOM renderizado y contenido indexado en plantillas importantes.
  • Visibilidad en IA: Párrafos citables, listas y tablas aparecen en HTML bruto para que AI Overviews y buscadores IA los citen.

La accesibilidad para buscadores, respuestas IA, previews de enlace y sistemas de descubrimiento es lo primero. 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 de búsqueda, no haría todo el producto con renderizado en servidor. Lo dividiría.

Área del sitio Enfoque recomendado
Site de marketing Generación estática
Blog y docs Generación estática o ISR
Páginas de producto SSR, ISR o PPR de Next.js
Páginas de SEO programático Generación estática con poda fuerte
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

Las páginas de marketing y los artículos deben ser HTML-first. Las superficies de producto que requieren frescura usan SSR, ISR o PPR. El dashboard sigue siendo app-like porque posicionarlo no tiene sentido. Las páginas de SEO programático requieren contención: la generación estática facilita miles de páginas, incluido un montón que nadie debería indexar. Genera solo las que tengan 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 aplicación de una sola página posicionar en Google en 2026?

Sí. Una SPA puede posicionar si las rutas indexables devuelven contenido rastreable, metadatos correctos, enlaces internos y códigos de estado válidos en la primera respuesta HTML. Google puede renderizar JavaScript, pero depender de eso para todo vuelve el site frágil e invisible para los rastreadores de IA que no renderizan.

¿Es obligatorio el SSR para el SEO de una SPA?

No en todas las rutas. SSR encaja en páginas públicas con contenido cambiante. SSG o ISR suele ser mejor para contenido estable. El Partial Prerendering de Next.js 15 mezcla ambos en una ruta. CSR es adecuado para dashboards privados y estados de aplicación que no deben indexarse.

¿Son malas las rutas con hash para SEO?

No son buena opción para páginas indexables. Sirven para fragmentos dentro de página, pero el contenido público debería tener URLs limpias, metadatos por ruta y códigos de estado a nivel servidor.

¿Deben indexarse las páginas de resultados de búsqueda internas en una SPA?

Normalmente no. Las búsquedas internas y los filtros facetados suelen generar URLs thin o duplicadas. Las páginas de filtros curadas pueden indexarse cuando tienen demanda única, contenido estable y una estrategia canónica clara.

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

Solicita una URL falsa y revisa el código de estado. Si /pagina-que-no-deberia-existir devuelve 200 con un mensaje client-side de “no encontrado”, tienes riesgo de soft 404 que malgasta crawl budget.

¿AI Overviews citará una SPA renderizada con JavaScript?

Solo si el contenido citado está en el HTML en bruto. La mayoría de los rastreadores de IA no ejecutan JavaScript. Renderiza en servidor o prerenderiza los párrafos, listas y tablas que quieras que se citen.

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

SEOJuice ayuda a los equipos a reforzar los enlaces internos rastreables y las señales HTML-first en las páginas públicas que merecen tráfico. Si tu SPA tiene rutas huérfanas, plantillas ocultas o páginas a las que Google nunca llega, el enlazado interno automatizado puede facilitar que los rastreadores y los bots de IA sigan la capa de documento.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "¿Puede una aplicación de una sola página posicionar en Google en 2026?", "acceptedAnswer": { "@type": "Answer", "text": "Sí. Una SPA puede posicionar si las rutas indexables devuelven contenido rastreable, metadatos correctos, enlaces internos y códigos de estado válidos en la primera respuesta HTML. Google puede renderizar JavaScript, pero depender de eso para todo vuelve el sitio más frágil e invisible para los rastreadores de IA que no renderizan." } }, { "@type": "Question", "name": "¿Es obligatorio el SSR para el SEO de una SPA?", "acceptedAnswer": { "@type": "Answer", "text": "No en todas las rutas. SSR encaja en páginas públicas con contenido cambiante. SSG o ISR suele ser mejor para contenido estable. El Partial Prerendering de Next.js 15 mezcla ambos en una ruta. CSR es adecuado para dashboards privados y estados de aplicación que no deben indexarse." } }, { "@type": "Question", "name": "¿Son malas las rutas con hash para SEO?", "acceptedAnswer": { "@type": "Answer", "text": "Las rutas con hash son una mala elección para páginas indexables. Pueden funcionar para fragmentos dentro de la página, pero el contenido público debería tener URLs limpias, metadatos por ruta y códigos de estado a nivel servidor." } }, { "@type": "Question", "name": "¿Deben indexarse las páginas de resultados de búsqueda internas en una SPA?", "acceptedAnswer": { "@type": "Answer", "text": "Por lo general no. Las páginas de búsqueda internas y los filtros facetados suelen crear URLs thin o duplicadas. Las páginas de filtros curadas pueden indexarse cuando tienen demanda única, contenido estable y una estrategia canónica clara." } }, { "@type": "Question", "name": "¿Cómo sé si mi SPA tiene un problema de soft 404?", "acceptedAnswer": { "@type": "Answer", "text": "Solicita una URL inventada y revisa el código de estado. Si /pagina-que-no-deberia-existir devuelve 200 con un mensaje de no encontrado del lado cliente, tienes riesgo de soft 404 que desperdicia crawl budget." } }, { "@type": "Question", "name": "¿AI Overviews citará una SPA renderizada con JavaScript?", "acceptedAnswer": { "@type": "Answer", "text": "Solo si el contenido citado está presente en el HTML en bruto. La mayoría de los rastreadores de IA no ejecutan JavaScript. Renderiza en servidor o prerenderiza los párrafos, listas y tablas que desees que se citen." } } ] } </script>
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.