SEO técnico en Next.js App Router: metadata, sitemap y JSON-LD

El SEO técnico en Next.js App Router es uno de esos temas donde la documentación oficial es buena pero incompleta. Te dice cómo usar generateMetadata, pero no te dice cuándo la metadata genérica te está costando clics. Esta guía cubre lo que uso en producción.

Metadata: lo que Google ve primero

Next.js App Router exporta metadata como un objeto tipado. El setup básico en layout.tsx debería incluir:

• metadataBase: URL canónica del sitio. Sin esto, las URLs relativas de OG images se rompen.
• title con template: { default: 'Mi Sitio', template: '%s — Mi Sitio' }. Cada página define su título y el layout añade el sufijo automáticamente.
• description: meta description global. Cada página puede sobreescribirla con generateMetadata.
• alternates.canonical: la URL canónica evita contenido duplicado. Fundamental si tienes parámetros de query o trailing slashes.

generateMetadata para páginas dinámicas

Para un blog o páginas de proyecto, generateMetadata recibe los params de la ruta y genera metadata específica. El patrón que uso:

``typescript export async function generateMetadata({ params }): Promise { const post = getPostBySlug(params.slug); return { title: post.title, description: post.description, openGraph: { type: 'article', publishedTime: post.date } }; } ``

La clave: cada página tiene su propio title y description únicos. Metadata genérica o duplicada es una señal negativa para Google.

Open Graph y Twitter Cards

OG tags controlan cómo aparece tu link cuando alguien lo comparte. Lo mínimo: og:title, og:description, og:image, og:type. Para artículos, añade publishedTime y tags.

La OG image debería ser de 1200×630px. Si no tienes una por página, al menos define una global de calidad. Una URL compartida sin preview visual pierde un 80% de clics.

sitemap.ts y robots.ts

Next.js permite generar sitemap y robots como archivos TypeScript. Es más mantenible que XML manual.

El sitemap debe listar todas las URLs públicas con su lastModified. Para blogs, genera las rutas dinámicamente a partir de tus posts. El robots.txt debe permitir el crawling general y apuntar al sitemap.

JSON-LD: datos estructurados

JSON-LD es el formato que Google prefiere para datos estructurados. Los schemas que uso en cada portfolio o web de negocio:

• Person: nombre, rol, links sociales, conocimientos.
• WebSite: nombre del sitio, URL, idioma.
• ProfessionalService: para freelance, incluye servicios ofrecidos y área de cobertura.
• Article: para cada post del blog, con headline, datePublished, author.
• BreadcrumbList: ayuda a Google a mostrar la jerarquía de navegación en los resultados.

El truco: inyectar cada schema como un