Open Graph Generator
Contact Us
Next.js Implementation

Open Graph & Metadata in Next.js (App Router Guide)

Next.js (v13+ App Router) provides a built-in Metadata API that automatically renders Open Graph, Twitter Cards, and canonical tags server-side.

Implementation Best Practices

  • ✓Use export const metadata for static pages.
  • ✓Use generateMetadata for dynamic routes with async data fetching.
  • ✓Leverage @vercel/og inside app/api/og/route.tsx for edge dynamic image generation.

Next.js Code Example

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  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/${params.slug}`,
      siteName: 'My Next.js App',
      images: [{ url: post.ogImageUrl, width: 1200, height: 630 }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImageUrl],
    },
  };
}

Audit & Verify Your Implementation

Open Graph Inspector →Open Graph Generator →