Metadata API
Next.js provides a metadata system for defining titles, descriptions, icons, Open Graph information, and other document metadata.
Metadata can be defined statically or generated dynamically based on route parameters and fetched content.
For a blog post, for example, the title and description should come from the article rather than using the same metadata for every page.
Static Metadata
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Products',
description: 'Explore our latest products.'
};
export default function ProductsPage() {
return <h1>Products</h1>;
}💡 The metadata object defines document information for the route.
Key Takeaways
- Every important public page should have meaningful metadata.
- Dynamic pages can generate metadata from their content.
- Avoid duplicate titles and descriptions across a large site.