Q20: How does the Metadata API manage SEO head tags in the App Router?
Next.js manages document <head> metadata by exporting static metadata objects or dynamic generateMetadata() functions from layout.js or page.js files. Next.js automatically deduplicates and hoists metadata tags into the final HTML output.
Dynamic SEO Metadata Generation
// app/products/[id]/page.js
export async function generateMetadata({ params }) {
const { id } = await params;
const product = await fetchProduct(id);
return {
title: product.title,
description: product.summary,
openGraph: { images: [product.image] },
};
}💡 generateMetadata fetches product details dynamically to output customized meta tags.
Key Takeaways
- Export static
metadataobject or dynamicgenerateMetadata({ params })function. - Supports Open Graph cards, Twitter metadata, and canonical links natively.
Knowledge Check
Which function is exported from page.js to dynamically compute SEO page titles based on route parameters?