El App Router tiene una API de Metadata integrada para etiquetas SEO (<title>, <meta>, Open Graph, etc.) — exportas metadata desde un layout.tsx o page.tsx y Next.js renderiza las etiquetas <head> correctas.
El App Router tiene una API de Metadata integrada para etiquetas SEO (<title>, <meta>, Open Graph, etc.) — exportas metadata desde un layout.tsx o page.tsx y Next.js renderiza las etiquetas <head> correctas.
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js lee el objeto metadata exportado y genera <title>, <meta name="description">, etiquetas OG, etc. — sin necesidad de editar <head> manualmente.
Para páginas cuyo título depende de contenido obtenido (una entrada de blog, un producto), exporta una función async generateMetadata:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Esto se ejecuta en el servidor y permite que cada página dinámica tenga metadata precisa y específica del contenido — esencial para SEO y compartición en redes sociales de contenido dinámico.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
La metadata definida en un layout se fusiona con (y puede ser sobrescrita por) las páginas hijas — así estableces valores predeterminados en todo el sitio una vez y valores por página donde sea necesario. El template automáticamente añade el nombre del sitio.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Los archivos especiales generan automáticamente la metadata/rutas correspondientes.
La metadata adecuada impulsa el SEO y las vistas previas de compartición en redes sociales.
La API de Metadata la hace declarativa y type-safe — metadata estática para páginas fijas, generateMetadata async para páginas impulsadas por datos, y valores predeterminados a nivel de layout con templates — reemplazando la gestión manual de <head> con un sistema limpio y renderizado en el servidor.