The Metadata API
Export a metadata object from a page or layout to set the title, description, and other head tags.
Syntax
export const metadata: Metadata = { title, description };Next.js manages the document <head> for you through the Metadata API. Export a metadata object from any page.tsx or layout.tsx, and Next renders the correct tags — no manual <head> editing, and it works with server rendering for SEO.
Common fields
title— the page title.description— the meta description.openGraph,robots,icons, and more.
Example
// app/about/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'About Us',
description: 'Learn about our company and team.',
};
export default function About() {
return <h1>About Us</h1>;
}When to use it
- A marketing team exports metadata from the root layout to set a sitewide title template and default description.
- A developer adds canonical URL metadata to every page to prevent duplicate-content SEO penalties.
- A multi-language site exports per-page metadata objects with hreflang alternate links for search engines.
More examples
Static metadata export
Exporting a metadata object from a page sets that page's title and description tags without any JSX.
// app/about/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'About Us',
description: 'Learn about our team and mission.',
};
export default function AboutPage() {
return <h1>About Us</h1>;
}Title template in root layout
A title template appends the site name to every child page's title automatically.
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: {
default: 'Acme Corp',
template: '%s | Acme Corp',
},
description: 'Building the future, one product at a time.',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body>{children}</body></html>;
}Robots and canonical
alternates.canonical and robots control indexation and tell search engines the authoritative URL for the page.
// app/pricing/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Pricing',
alternates: { canonical: 'https://acme.com/pricing' },
robots: { index: true, follow: true },
};
Discussion