Next.js 53: generateMetadata — Dynamic SEO
easy⏱ 5 mincoursenextjs
Metadata as a function of data
generateMetadata({ params }) receives the same params your page component gets, fetches the record (a product, a post, a user), and returns a metadata object. Next.js awaits it on the server and injects the result into the head — so search engines and social previews see a real, per-page title instead of one generic one.
// app/products/[id]/page.tsx
export async function generateMetadata({ params }) {
const product = await getProduct(params.id);
return {
title: product.name + " | Store",
description: product.description,
openGraph: { images: [product.image] },
};
}
export default async function ProductPage({ params }) {
const product = await getProduct(params.id);
return <h1>{product.name}</h1>;
}
Include the price in the title
generateMetadata already includes the product's price in the returned title, formatted like 'Coffee Mug — $12 | Store'. Select a different product from the list and confirm the mocked browser tab updates with that product's own price.
Still cached like any fetch
generateMetadata and your page component often request the same data (e.g. the same product). Next.js automatically de-dupes identical fetch calls made during one render pass, so you are not charged for the request twice — write the fetch naturally in both places.