Metadata API

1
import type { Metadata } from 'next';
2

3
export async function generateMetadata({
4
  params,
5
}: {
6
  params: Promise<{ slug: string }>;
7
}): Promise<Metadata> {
8
  const { slug } = await params;
9
  const post = await getPost(slug);
10

11
  return {
12
    title: post.title,
13
    description: post.excerpt,
14
    openGraph: {
15
      title: post.title,
16
      description: post.excerpt,
17
      images: [`/api/og?title=${post.title}`],
18
    },
19
  };
20
}

Static vs Dynamic Metadata

Demo

1. Switch between examples to see different metadata patterns.
2. View the generated HTML for each pattern in the output panel.
3. Check the OG image preview showing dynamic image generation.
4. Inspect this page's source to see real metadata in action.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Always provide a description for search engine snippets.
• Use generateMetadata when you need async data fetching.
• OG images should be 1200x630 pixels for best compatibility.
• Use the robots field to control indexing of private pages.

Continue Learning

Learn More

• Metadata API
• generateMetadata
• Open Graph Images