Guides › Frameworks & CMS

How to add Open Graph tags in Next.js

In the App Router, export metadata (or generateMetadata) from a layout or page. Set metadataBase once so relative image paths become absolute URLs.

// app/layout.tsx
export const metadata = {
  metadataBase: new URL('https://example.com'),
  openGraph: { siteName: 'Example', type: 'website' },
  twitter: { card: 'summary_large_image' },
}

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost((await params).slug)
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { title: post.title, description: post.excerpt, images: [post.cover] },
  }
}

Or drop an opengraph-image.png (or a generated opengraph-image.tsx) in the route folder, and Next.js adds the tags for you. Note: child openGraph objects replace the parent's rather than merging, so repeat shared fields.

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Related