🎉 75% of content is free forever — Unlock Premium from $10/mo →
CW
NEWSLIVESearch All Content
đŸ’ŧ Servicesâ„šī¸ Aboutâœ‰ī¸ ContactView Pricing Plansfrom $10

Generating Metadata

Next.js SEOđŸŸĸ Free Lesson

Advertisement

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.

—
☆☆☆☆☆
0 ratings

Rate & Feedback

Related Tutorials

Content with similar topics across other courses

Continue Learning

Suggested next tutorials based on this topic

Need Expert Next.js Help?

Get personalized tutoring, project support, or professional consulting.

Advertisement