How do you set page metadata (title, description) in Next.js?

Question

Accepted Answer

The App Router has a built-in **Metadata API** for SEO tags (``, `<meta>`, Open Graph, etc.) — you export metadata from a `layout.tsx` or `page.tsx` and Next.js renders the correct `<head>` tags. ## Static metadata ```tsx // 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 reads the exported `metadata` object and generates `<title>`, `<meta name="description">`, OG tags, etc. — no manual `<head>` editing. ## Dynamic metadata (depends on data) For pages whose title depends on fetched content (a blog post, a product), export an async `generateMetadata` function: ```tsx // 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] }, }; } ``` This runs on the server and lets each dynamic page have accurate, content-specific metadata — essential for SEO and social sharing of dynamic content. ## Metadata merges down the tree ```tsx // 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" }; ``` Metadata defined in a layout is **merged** with (and can be overridden by) child pages — so you set site-wide defaults once and per-page values where needed. The `template` automatically appends the site name. ## File-based metadata ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Special files generate the corresponding metadata/routes automatically. ## Why it matters Good metadata drives SEO and social-share previews. The Metadata API makes it declarative and type-safe — static `metadata` for fixed pages, async `generateMetadata` for data-driven pages, and layout-level defaults with templates — replacing manual `<head>` management with a clean, server-rendered system.