Open Graph Tags

10-20 minBeginner

Implement Open Graph meta tags to control how your content appears when shared on social media.

Prerequisites

Next.js App Router

Beginner Recommended

Metadata API

Using generateMetadata.

Configuring Open Graph

Add the openGraph key to your metadata object export.

If your page is dynamic, use generateMetadata to fetch data first.

Example

export const metadata = {
  openGraph: {
    title: 'Acme Corp',
    description: 'The best widgets.',
    url: 'https://acme.com',
    siteName: 'Acme',
    images: [
      {
        url: 'https://acme.com/og.png',
        width: 800,
        height: 600,
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

Dynamic OG Images

Use opengraph-image.tsx (Image Response) to generate images dynamically via code.

Place this file in your route segment.

Verification Checklist

Use the Facebook Sharing Debugger to preview your OG tags.
Inspect the <head> of your page to verify og:title, og:description, and og:image tags.