Next.js Metadata API Explained — SEO and Social Cards

// app/page.jsx — Static metadata
export const metadata = {
  title: "My App",
  description: "A Next.js application with great SEO",
  openGraph: {
    title: "My App",
    description: "A Next.js application with great SEO",
    type: "website",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
  },
  twitter: {
    card: "summary_large_image",
    title: "My App",
    description: "A Next.js application with great SEO",
    images: ["/og-image.png"],
  },
};

// app/posts/[slug]/page.jsx — Dynamic metadata
export async function generateMetadata({ params, searchParams }, parent) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(r => r.json());

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: [{ url: post.image, width: 1200, height: 630 }],
    },
    alternates: {
      canonical: `/posts/${post.slug}`,
    },
  };
}