Checklist de SEO no App Router: metadata e generateMetadata, metadataBase, templates de título, canonical, hreflang, sitemap.ts, robots.ts e imagens OG, com código.
No App Router, as tags de SEO vêm de um objeto metadata exportado ou de uma função generateMetadata nos arquivos layout e page, que só funcionam em Server Components. Defina metadataBase uma vez no layout raiz, adicione app/sitemap.ts e app/robots.ts, dê a cada rota um canonical por meio de alternates e coloque um arquivo opengraph-image ao lado das páginas que precisam de um.
Onde fica cada parte
O App Router tem respostas prontas para quase toda tarefa de SEO técnico, mas elas estão espalhadas por uma dúzia de páginas da documentação. Este checklist reúne tudo em ordem, com código para copiar em cada item, e as caixas de seleção deixam você acompanhar o seu próprio projeto enquanto avança.
Não. O objeto metadata e o generateMetadata só são suportados em Server Components, porque o Next.js precisa resolvê-los no servidor antes de renderizar. Mantenha a página como Server Component e importe um componente do cliente para as partes interativas.
As versões atuais do Next.js passam params e searchParams como Promises, então você escreve const { slug } = await params dentro de um generateMetadata assíncrono. Códigos escritos para versões antigas que leem params.slug diretamente precisam ser atualizados.
Use generateSitemaps em um arquivo sitemap.ts. Ele retorna uma lista de ids, e o export default monta um sitemap por id. No Next.js 16 o id chega como Promise. Os arquivos são servidos em caminhos como /product/sitemap/1.xml.
Não, a menos que você defina uma. Adicione alternates.canonical na metadata de cada rota, normalmente como caminho relativo, por exemplo /blog/my-post, e deixe o metadataBase transformá-lo em URL completa.
Não, um segmento de rota pode exportar um ou outro. Use o objeto estático quando nada depender da requisição ou de dados buscados, e generateMetadata quando depender.
Definido uma vez em app/layout.tsx. Páginas filhas que exportam title: "Pricing" aparecem como Pricing | Northside.
params recebe await. getPost representa a sua própria função de dados.
Retorna uma entrada por URL. changeFrequency e priority são opcionais e o Google os ignora, por isso ficaram de fora.
Gera o robots.txt na raiz do site.
Desenha uma imagem de compartilhamento de 1200 por 630 a partir do título do post com ImageResponse de next/og. Os exports alt, size e contentType viram tags og.
Imagens de compartilhamento baseadas em arquivo
metadataBase definido em app/layout.tsx
Permite que todos os outros campos de URL sejam caminhos relativos
Template de título mais um padrão no layout raiz
Dá a toda página um sufixo consistente, como | Acme
Título e descrição únicos em cada página
Metadata estática ou generateMetadata por rota
Canonical em toda rota indexável
hreflang nas rotas traduzidas
alternates.languages, ou no sitemap
app/sitemap.ts lista só URLs canônicas ativas
Divida com generateSitemaps quando for grande
app/robots.ts com uma linha de sitemap
Bloqueia só áreas como /admin ou /api
Imagem Open Graph nas rotas principais
Arquivo opengraph-image com texto alternativo
noindex em rotas rasas ou privadas
robots: { index: false } na metadata dessa rota
Conteúdo renderizado no servidor
Confira o código-fonte da página, não só o que aparece no navegador
{count} de {total} concluídos
Comece grátis · Sem cartão de crédito