LetCodes

Static Metadata Object

Every layout.tsx or page.tsx in the App Router can export a metadata object to control the page's <title>, meta description, Open Graph tags, icons, and more. Next.js reads it at build time (or request time for dynamic routes) and injects the right tags into <head> — you never touch <head> directly.

app/about/page.tsx

TSX

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn about our mission, team, and history.',
}

export default function AboutPage() {
  return <h1>About Us</h1>
}

Common fields

Field	Purpose
`title`	The `<title>` tag shown in the browser tab and search results
`description`	The meta description search engines often show under your title
`keywords`	Rarely used by modern search engines, but still supported
`openGraph`	Title, description, image, and type used when the page is shared on social platforms
`twitter`	Twitter/X-specific card metadata, falls back to `openGraph` values if omitted
`icons`	Favicon and apple-touch-icon references
`alternates`	Canonical URL and alternate-language versions of the page

app/blog/[slug]/layout.tsx — a fuller example

TSX

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Our Blog',
  description: 'Engineering notes and product updates.',
  openGraph: {
    title: 'Our Blog',
    description: 'Engineering notes and product updates.',
    images: ['/og/blog.png'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
  },
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
}

Title templates

A root or section layout can define a title.template that child pages' titles get slotted into — handy for a consistent "Page Name | Site Name" format without repeating the site name on every page.

app/layout.tsx

TSX

export const metadata: Metadata = {
  title: {
    template: '%s | Acme Docs',
    default: 'Acme Docs',
  },
}

app/getting-started/page.tsx

TSX

export const metadata: Metadata = {
  title: 'Getting Started', // renders as "Getting Started | Acme Docs"
}

Nested layouts and pages merge with their parents rather than fully overriding them — a child's title fills the %s slot in the nearest ancestor's template, while fields like openGraph are shallow-merged, so it's worth checking rendered output when combining metadata across several nested layouts.

Tip

Use the static metadata object whenever a page's title and description are known ahead of time — most marketing pages, static docs, and legal pages. Reach for generateMetadata (the async function, covered next) only when the metadata genuinely depends on data fetched at request time, like a blog post's title coming from a CMS.

Note

The metadata export only works in Server Components. A file marked 'use client' can't export metadata — put metadata in a nearby layout instead if the page itself needs to be a Client Component.

Export a static metadata: Metadata object from a layout.tsx or page.tsx when the values are known at build time.
Common fields: title, description, openGraph, twitter, icons, alternates.
title.template on a layout lets child pages fill a %s placeholder for consistent branded titles.
Metadata merges down the layout tree rather than fully replacing parent values.
The metadata export requires a Server Component — Client Components cannot export it.