Dynamic SEO & OpenGraph Generation with Next.js Metadata API

Why Metadata is Crucial

In the modern web, every article needs search engine discoverability and engaging rich previews on platforms like Twitter, LinkedIn, and Discord.

Using `generateMetadata`

Next.js provides a first-class `generateMetadata` function in dynamic route segments:

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;

if (!post) { return { title: 'Post Not Found' }; }

return { title: `${post.title} | BlogCraft`, description: post.excerpt, openGraph: { title: post.title, description: post.excerpt, images: [{ url: post.coverImage }], }, }; } ```

Next.js automatically streams the corresponding `<title>`, `<meta>`, and OpenGraph tags into the document head before the page is served!