Open Graph metadata in NextJS

Introduction

Open Graph metadata helps social media sites show nice previews when you share links. It makes your page look good with images and titles.

When you want your website link to show a picture and title on Facebook or Twitter.

When sharing blog posts so readers see a summary and image before clicking.

When promoting products so social media shows product images and prices.

When you want consistent branding across social platforms.

When improving click rates from social media by making links attractive.

Syntax

NextJS

export const metadata = {
  title: 'Page Title',
  description: 'Page description here',
  openGraph: {
    title: 'Open Graph Title',
    description: 'Open Graph description',
    url: 'https://example.com/page',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Image description'
      }
    ],
    locale: 'en_US',
    type: 'website'
  }
};

This metadata object is used in Next.js App Router to add Open Graph tags automatically.

The images array can have multiple images with details for better previews.

Examples

Example for a blog post with Open Graph metadata including an image and type 'article'.

NextJS

export const metadata = {
  title: 'My Blog Post',
  openGraph: {
    title: 'My Blog Post',
    description: 'A great post about coding.',
    url: 'https://myblog.com/post',
    images: [
      { url: 'https://myblog.com/post-image.jpg', alt: 'Blog post image' }
    ],
    type: 'article'
  }
};

Example with no images provided. Social sites may show default or no image.

NextJS

export const metadata = {
  title: 'Home Page',
  openGraph: {
    title: 'Welcome to Our Site',
    description: 'Best site ever',
    url: 'https://oursite.com',
    images: [],
    type: 'website'
  }
};

Example for a product page with image size and locale specified.

NextJS

export const metadata = {
  title: 'Product Page',
  openGraph: {
    title: 'Cool Product',
    description: 'Buy this cool product now!',
    url: 'https://shop.com/product',
    images: [
      {
        url: 'https://shop.com/product-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Product image'
      }
    ],
    locale: 'en_GB',
    type: 'product'
  }
};

Sample Program

This Next.js page component defines Open Graph metadata using the metadata export. When shared on social media, the link will show the title, description, and image specified.

NextJS

import React from 'react';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Sample Page',
  description: 'This is a sample page with Open Graph metadata.',
  openGraph: {
    title: 'Sample Page',
    description: 'This is a sample page with Open Graph metadata.',
    url: 'https://example.com/sample',
    siteName: 'Example Site',
    images: [
      {
        url: 'https://example.com/sample-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Sample image'
      }
    ],
    locale: 'en_US',
    type: 'website'
  }
};

export default function SamplePage() {
  return (
    <main>
      <h1>Welcome to the Sample Page</h1>
      <p>This page includes Open Graph metadata for social sharing.</p>
    </main>
  );
}

Important Notes

Open Graph metadata improves how links look on social media, increasing clicks.

Always provide an image with correct size (1200x630 px recommended) for best display.

Missing or incorrect metadata may cause social sites to show default or no preview.

Summary

Open Graph metadata controls how your page looks when shared on social media.

Next.js App Router uses the metadata export to add these tags automatically.

Include title, description, URL, and images for best results.