# Metadata — Next.js

Source: https://www.skillbyai.com/en/nextjs/u-meta

> Titles and descriptions per route.

## Static metadata and generateMetadata

Export a `metadata` object from a layout or page for static values, or an async `generateMetadata` function for values that depend on params or data. A **title template** in the root layout (`%s | Site`) gives consistent titles; child pages supply the `%s` part. Metadata also covers descriptions, Open Graph and Twitter cards, canonical URLs and robots rules. Metadata is only supported in Server Components.

## Polish and performance

Metadata helps sharing and search; loading and error files improve UX; built-in components optimise assets.

![Three ideas: metadata, loading and errors, images and fonts.](assets/figures/nextjs/section-7-map.svg) — Figure 7.1 — Metadata, loading and assets.

## Titles produced by the template, run

I built the demo store with `next build` (Next.js 16.3.8), started it with `next start` and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. The layout sets the template "%s | Stationery Shop" and a default; pages contributed "Counter" and the product name, and the home page used the default.

```bash
curl -s http://localhost:3917/ | grep -o "<title>.*</title>"
curl -s http://localhost:3917/counter | grep -o "<title>.*</title>"
curl -s http://localhost:3917/products/2 | grep -o "<title>.*</title>"
```

Output:

```
<title>Stationery Shop</title>
<title>Counter | Stationery Shop</title>
<title>Fountain pen | Stationery Shop</title>
```

## Write unique descriptions

Each important page should have a specific title and description; duplicates hurt search snippets.

**Quiz:** Where is generateMetadata useful?

- [ ] For static CSS
- [x] When titles or descriptions depend on params or data, like a product name
- [ ] For client-side state
- [ ] For database migrations

*Answer:* When titles or descriptions depend on params or data, like a product name. Dynamic metadata from data.