Give a page real search-engine metadata

A product page ships with a title, description and image, but every crawler still sees the homepage's.

IntermediateRead 4 minDoing: about an hour6 steps

What you'll have at the end

A generateMetadata function returning a real title, description and Open Graph image per product, confirmed in a crawler preview tool

Before you start

You need

A product route that already renders one real item from a data source, with no title, description or share image defined for that route yet; it currently falls back to whatever the site's shared layout already sets.

Not covered

What the page's own body shows when an id matches no record at all; that is a separate concern from what a search engine or a share card is told about the page.

Leans on

6 steps

Where to go next

Make a missing record return a real 404 instead of a blank page

handles what the page's own body does when an id matches nothing, the counterpart to what this recipe teaches the metadata function to do for that same case.

Checked 25 Aug 2026

Part of the NextJS cookbook