SEO, Metadata & Social Sharing 🔍

Great apps get found. Next.js supplies a metadata toolbox so search engines and social platforms love your content.

Metadata API 🧾

In App Router, export metadata or generateMetadata.

export const metadata: Metadata = {
  title: 'Docs',
  description: 'Learn all the things',
};

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.summary };
}

OpenGraph & Twitter Cards 🐦

export const metadata = {
  openGraph: {
    title: 'Next.js Guide',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@nextjs',
  },
};

• Use dynamic OG images (Vercel OG Image Generation) for personalized cards.

Canonical URLs 🔗

Avoid duplicate content penalties.

export const metadata = {
  alternates: {
    canonical: 'https://mysite.com/blog/how-to-next',
  },
};

Structured Data (JSON-LD) 📦

Add via Metadata API or <Script type="application/ld+json"> in layout.

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
};

Sitemaps & robots.txt 📄

• Create route handlers: app/sitemap.ts returns URLs.
• app/robots.txt/route.ts for policy (disallow admin routes, allow search).

Pagination SEO 📚

• Use link rel="next"/"prev" in metadata.
• Keep URLs clean (/blog?page=2).

International SEO 🌎

• Provide alternates.languages (e.g., en-US, fr-FR).
• Use hreflang to signal locale-specific pages.

Analogy: SEO metadata is a business card for search engines—clear name (title), tagline (description), photo (OpenGraph), and addresses (canonical/sitemap) ensure people find the right door.