Generating Metadata

Dynamic metadata, generateMetadata, Open Graph, and Twitter cards.

Overview

Dynamic metadata improves SEO and social sharing.

Key Concepts

• generateMetadata — Dynamic metadata per page
• Open Graph — Social media previews
• Twitter Cards — Twitter-specific metadata
• Canonical URLs — Prevent duplicate content
• Alternate Languages — Multi-language SEO

Code Examples

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${post.slug}`,
      images: [{ url: post.coverImage, width: 1200, height: 630 }],
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name]
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage]
    },
    alternates: {
      canonical: `https://example.com/blog/${post.slug}`
    }
  };
}

// app/products/[id]/page.js
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  
  return {
    title: `${product.name} | My Store`,
    description: product.description,
    openGraph: {
      title: product.name,
      description: product.description,
      images: product.images
    }
  };
}

// Static metadata
export const metadata = {
  title: {
    template: '%s | My Store',
    default: 'My Store'
  },
  description: 'Best products at great prices'
};

Practice

Implement dynamic metadata for a blog with Open Graph and Twitter cards.