Next.js: The React Framework (App Router)Entry 14 of 16

Metadata and SEO

A page or layout exports a metadata object, or an async generateMetadata function, to set the <title>, description, Open Graph tags, and more.

react.dev<title>

nextjs.orggenerateMetadata

Notes

Metadata merges down the tree: the root layout sets defaults and a title template; pages override.
generateMetadata receives the same params as the page, and Next.js deduplicates the data request between them.
File conventions generate SEO files: sitemap.ts, robots.ts, opengraph-image.tsx, icon.png.
Metadata exports only work in Server Components.

What / Why / When

What: Declarative <head> tags per route.
Why: Search ranking and good link previews when shared.
When: Every public page.
Use case: Each blog post gets its own title and description.

Code compare

Next.js

// app/layout.tsximport type { Metadata } from "next";export const metadata: Metadata = {  title: { default: "POR", template: "%s | POR" },  description: "React ↔ Angular reference",};

Angular

// app.routes.ts — static titles{ path: 'about', title: 'About | POR', loadComponent: … }

Differences and gotchas

Angular's Title and Meta services only reach crawlers when the route is server-rendered or prerendered.
A custom TitleStrategy is Angular's equivalent of Next.js's title template.
Sitemaps and robots files in Angular are static files in public/ or generated by a build script.

Quick reference

Next.js	Angular
`export const metadata`	Route `title`
`generateMetadata`	`Title` + `Meta` services in the component
`title.template`	Custom `TitleStrategy`
`sitemap.ts`, `robots.ts`	Static files in `public/`