Metadata API e SEO no App Router
Pergunta
Como o App Router do Next.js lida com `<title>`, meta tags e dados estruturados por rota, e o que muda em relação a fazer isso na mão?
Resposta esperada
Você exporta um objeto `metadata` (estático) ou uma função `generateMetadata` (assíncrona, recebe params — pra título/descrição dependentes do conteúdo, tipo `/posts/[slug]`) de um `layout.tsx` ou `page.tsx`. O Next mescla os metadados pela hierarquia de layouts (o mais específico sobrescreve), injeta no `<head>` no HTML do servidor (importante: chega no primeiro byte, então crawlers e previews de link veem), e cobre title template, `openGraph`, `twitter`, `robots`, `alternates`/canonical, e ícones. Pra Open Graph image dinâmica, `opengraph-image.tsx` com `ImageResponse` gera a imagem por rota no edge. Vantagem sobre montar `<head>` manualmente: é por rota, com fallback/merge, tipado, e SSR de verdade — não um `useEffect` que ajusta o title depois da hidratação (tarde demais pro crawler).
Por que perguntam isso
Pergunta pleno de Next. Conecta com a Fase 2 de SEO/OG image. Sinal bom: 'chega no primeiro byte, o crawler vê' e `generateMetadata` assíncrono pra conteúdo dinâmico.