SEO en Next.js: renderizado, metadatos, sitemap y un blog que posiciona

El SEO en Next.js consiste sobre todo en tomar la decisión correcta en cada ruta: qué se renderiza en el servidor, qué se almacena en caché y qué llega al HTML antes de que se ejecute cualquier script. Google explica en sus conceptos básicos de SEO para JavaScript que procesa las aplicaciones JavaScript en tres fases (rastreo, renderizado e indexación) y que el renderizado en el servidor o el prerrenderizado «sigue siendo una gran idea». Next.js lo hace por defecto. Esta guía cubre el App Router (Next.js 13 y posteriores), con notas para el antiguo Pages Router.

¿Next.js es bueno para el SEO?

Sí. Una aplicación React clásica renderizada en el cliente envía un archivo HTML casi vacío y construye la página en el navegador; los buscadores deben renderizarla y muchos bots nunca lo hacen. Next.js renderiza React en el servidor, de modo que la respuesta HTML ya contiene encabezados, texto, enlaces y metadatos. Nuestra guía de SEO para JavaScript explica por qué esa diferencia importa para la indexación.

En el App Router, los componentes son Server Components por defecto. Incluso los componentes marcados con 'use client' se prerrenderizan a HTML en el servidor. El punto débil son los datos: todo lo que cargas dentro de useEffect, o solo después de un clic, falta en el HTML inicial. Obtén el contenido en Server Components y reserva los componentes de cliente para la interactividad.

SSG, SSR, ISR o CSR: ¿qué modo de renderizado elegir?

Next.js permite combinar modos ruta por ruta. La elección afecta a la frescura, la velocidad y lo que reciben los rastreadores.

La documentación de Next.js sobre ISR enumera sus ventajas: actualizar contenido estático «sin reconstruir todo el sitio» y gestionar grandes cantidades de páginas sin builds eternos. Una ruta con export const revalidate = 3600 se regenera como máximo una vez por hora; para un control exacto, llama a revalidatePath o revalidateTag cuando cambie el contenido. ISR no funciona con una exportación estática (output: 'export'). Para las aplicaciones que deben seguir renderizándose en el cliente, nuestra guía de SEO para aplicaciones de una sola página repasa las soluciones.

¿Cómo se definen títulos, descripciones y canónicas con la Metadata API?

La Metadata API sustituye a next/head en el App Router. Según la documentación de Next.js sobre metadatos, exportas un objeto metadata estático desde un layout o una página, o una función generateMetadata cuando los valores dependen de datos, y Next.js genera las etiquetas del head. Ambos solo se admiten en Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Cinco reglas que evitan la mayoría de los problemas:

• Define metadataBase en el layout raíz (tu dominio de producción), para que las canónicas relativas y las URL de Open Graph se vuelvan absolutas.
• Usa una plantilla de título en el layout raíz, como '%s | Marca', para que cada página tenga un título único con la marca una sola vez.
• Da a cada página indexable una canónica autorreferenciada mediante alternates.canonical; protege frente a duplicados creados por parámetros de URL y barras finales. Nuestra entrada del glosario sobre la etiqueta canónica resume las reglas.
• Escribe una descripción por página, generada a partir del contenido en generateMetadata, nunca un valor por defecto para todo el sitio.
• Añade imágenes Open Graph con un archivo opengraph-image en la carpeta de la ruta y comprueba el resultado con una herramienta de vista previa Open Graph.

En las páginas dinámicas, Next.js transmite los metadatos en streaming después de los primeros bytes para acelerar el renderizado. La documentación indica que el streaming está desactivado para los bots que esperan los metadatos en el head, detectados por su user agent (Bingbot, Twitterbot y Slackbot figuran entre los ejemplos), y que la opción htmlLimitedBots permite ajustar la lista. Si un rastreador que te importa no está incluido, añádelo. En el Pages Router, el equivalente es el componente Head de next/head, con un atributo key para evitar etiquetas duplicadas.

¿Cómo se generan sitemap.xml y robots.txt en Next.js?

Ambos son archivos especiales de la carpeta app. Un archivo sitemap.ts que exporta una función que devuelve URL se convierte en /sitemap.xml; un archivo robots.ts se convierte en /robots.txt. La referencia del sitemap señala que el archivo se almacena en caché por defecto y que el límite de Google es de 50.000 URL por sitemap; por encima, generateSitemaps lo divide en varios archivos.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Incluye solo URL canónicas, indexables y que respondan 200, con la fecha real de actualización en lastModified. El sitemap también acepta alternates.languages para sitios multilingües. En robots.ts, apunta al sitemap y decide qué bots de IA pueden rastrear el sitio; nuestro artículo sobre robots.txt para los rastreadores de IA los enumera. Más detalles del formato en nuestra entrada sobre el sitemap XML.

¿Qué detalles técnicos rompen con más frecuencia el SEO de un sitio Next.js?

Todos estos fallos reducen la rastreabilidad: un rastreador debe poder descubrir cada URL mediante enlaces y obtener un código de estado limpio.

¿Cómo se añaden datos estructurados en Next.js?

La documentación de Next.js recomienda renderizar el JSON-LD en una etiqueta script de tipo application/ld+json directamente en el componente de página o de layout, a partir de los mismos datos que la página, y escapar el carácter < en el JSON serializado para evitar inyecciones. Como se renderiza en el servidor, Google y los rastreadores de IA lo ven en el HTML sin procesar. Usa Article (o BlogPosting) para los artículos, Organization en el layout raíz, BreadcrumbList para las páginas profundas y Product en e-commerce. Un generador de schema te da un bloque válido de partida; después valida la página con la prueba de resultados enriquecidos de Google.

¿Cómo hacer que un sitio Next.js sea lo bastante rápido para las Core Web Vitals?

Next.js incluye componentes que resuelven las causas habituales de unas malas Core Web Vitals:

• next/image: redimensiona imágenes, sirve formatos modernos, aplica carga diferida por defecto y exige dimensiones, lo que evita desplazamientos de diseño. Marca la imagen principal de la parte visible como prioritaria para que no se cargue en diferido (suele ser el elemento del Largest Contentful Paint).
• next/font: aloja las fuentes en tu propio dominio y evita el desplazamiento causado por el cambio tardío de fuente.
• next/script: carga los scripts de terceros con una estrategia (afterInteractive, lazyOnload) en lugar de bloquear la página.
• Menos JavaScript en el cliente: cada frontera 'use client' añade código que descargar e hidratar, lo que pesa en el Interaction to Next Paint en móvil.

Mide datos de campo, no solo una puntuación de laboratorio: nuestra guía de PageSpeed Insights explica cómo leer ambos.

¿Cómo montar un blog en Next.js que posicione?

Un blog en Next.js suele adoptar una de tres formas: archivos MDX o Markdown en el repositorio (sencillo, pero cada artículo exige un commit y un despliegue), un CMS headless (Sanity, Contentful, Strapi, Payload) consultado desde Server Components, o un webhook de publicación que recibe artículos de una herramienta externa. En los tres casos el patrón SEO es el mismo: una ruta dinámica app/blog/[slug] con generateStaticParams, generateMetadata, ISR, un sitemap alimentado por la misma fuente y una página índice que enlaza todos los artículos.

El webhook saca la publicación del ciclo de despliegue. Un Route Handler recibe el artículo, lo guarda y revalida las páginas afectadas:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

¿Cómo ayuda el SEO en Next.js a que te citen las IA?

El renderizado en el servidor es la primera condición del GEO (optimización para motores generativos). El análisis de Vercel de diciembre de 2024, The rise of the AI crawler, concluyó que «ninguno de los grandes rastreadores de IA renderiza JavaScript actualmente», citando a GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot y PerplexityBot, y contó 569 millones de solicitudes de GPTBot y 370 millones de Claude en su red en un mes. Una página Next.js que prerrenderiza su texto, sus encabezados y su JSON-LD es legible para todos ellos; una página renderizada en el cliente no lo es.

La segunda condición es un contenido que merezca ser citado: artículos que respondan a una pregunta por sección, con fuentes, cifras y definiciones claras, publicados con regularidad. Esa es la parte que automatiza Sorank, nuestro producto. Sorank es un software de SEO y GEO en autopilot: encuentra tus palabras clave y su generador de artículos de blog redacta 20, 60 o 120 artículos al mes con fuentes, enlaces internos e imágenes. En un sitio Next.js, se conecta mediante el webhook personalizado descrito en la página de instalación: tu Route Handler recibe cada artículo, lo guarda y revalida el blog. El seguimiento de menciones en IA comprueba después cada semana si ChatGPT, Claude y Gemini citan tu marca.

En pocas palabras: prerrenderiza cada página que quieras que encuentren, define los metadatos en el servidor y alimenta el sitemap desde la misma fuente que el contenido. Next.js aporta las herramientas; las posiciones y las citas de las IA dependen de lo que publiques con ellas. Para mantener un blog en Next.js con artículos nuevos, consulta los planes de Sorank, desde 49 € al mes con 3 días de prueba gratis.