O App Router possui uma API de Metadados integrada para tags SEO (<title>, <meta>, Open Graph, etc.) — você exporta metadados de um layout.tsx ou page.tsx e Next.js renderiza as tags <head> corretas.
O App Router possui uma API de Metadados integrada para tags SEO (<title>, <meta>, Open Graph, etc.) — você exporta metadados de um layout.tsx ou page.tsx e Next.js renderiza as tags <head> corretas.
// 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 lê o objeto metadata exportado e gera <title>, <meta name="description">, tags OG, etc. — nenhuma edição manual de <head> necessária.
Para páginas cujo título depende de conteúdo obtido (postagem de blog, produto), exporte uma função 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] },
};
}
Isso é executado no servidor e permite que cada página dinâmica tenha metadados precisos e específicos do conteúdo — essencial para SEO e compartilhamento em redes sociais de conteúdo 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"
};
Os metadados definidos em um layout são mesclados com (e podem ser substituídos por) páginas filhas — então você define padrões em todo o site uma vez e valores por página onde necessário. O template adiciona automaticamente o nome do site.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Arquivos especiais geram os metadados/rotas correspondentes automaticamente.
Bons metadados impulsionam SEO e visualizações de compartilhamento em redes sociais.
A API de Metadados torna isso declarativo e type-safe — metadata estática para páginas fixas, generateMetadata async para páginas orientadas a dados, e padrões no nível de layout com templates — substituindo o gerenciamento manual de <head> por um sistema limpo e renderizado no servidor.