Lesson 20 / 25

Metadata

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.
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.

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.

Quick check: Where is generateMetadata useful?

  • For static CSS
  • 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.