The Metadata API

Export a metadata object from a layout or page and Next renders the matching title, description, OG, and Twitter tags into `<head>`.

4 min read Level 2/5 #nextjs#metadata#seo

What you'll learn

Export `const metadata`
Use `generateMetadata` for dynamic per-route metadata
Set up a title template per segment

The Metadata API turns one TypeScript object into a full set of <head> tags. No more hand-stamping <title>, <meta name="description">, OG tags, and Twitter cards.

Static Metadata

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Site',
  description: 'A great app.',
  openGraph: {
    title: 'My Site',
    description: 'A great app.',
    images: ['/og.png'],
  },
}

export default function Page() {
  return <h1>Home</h1>
}

Dynamic Metadata

When you need metadata per route param, export generateMetadata:

// app/posts/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await db.post.findUnique({ where: { slug } })
  return {
    title: post?.title ?? 'Post',
    description: post?.excerpt,
  }
}

Title Templates

A RootLayout can set a template so every child page gets a suffix automatically:

// app/layout.tsx
export const metadata = {
  title: { template: '%s | My Site', default: 'My Site' },
}

// app/about/page.tsx
export const metadata = { title: 'About' }
// final: "About | My Site"

Child metadata merges into the parent’s — title templates from the layout apply to every page below.

OpenGraph Images →