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.

Practice

1. What is the main purpose of Open Graph metadata in a Next.js app?

easy

A. To improve the page loading speed

B. To handle user authentication

C. To add custom fonts to the page

D. To control how the page appears when shared on social media

Solution

1. Step 1: Understand Open Graph metadata role

   Open Graph metadata defines how a webpage looks when shared on social media platforms.

2. Step 2: Relate to Next.js usage

   Next.js uses the metadata export to automatically add Open Graph tags for sharing previews.

3. Final Answer:

   To control how the page appears when shared on social media -> Option D

4. Quick Check:

   Open Graph = Social media preview [OK]

Hint: Open Graph controls social media preview appearance [OK]

Common Mistakes:

• Confusing Open Graph with performance optimization
• Thinking it manages fonts or styles
• Assuming it handles user login

2. Which is the correct way to define Open Graph metadata in a Next.js App Router page?

easy

A. export const metadata = { openGraph: { title: 'My Page' } }

B. const openGraph = { title: 'My Page' }; export default openGraph

C. export function metadata() { return { title: 'My Page' } }

D. import metadata from 'next/metadata'; metadata.title = 'My Page';

Solution

1. Step 1: Recall Next.js metadata export syntax

   Next.js App Router expects a named export called metadata as an object.

2. Step 2: Check Open Graph nested object

   Open Graph metadata is nested inside openGraph property within metadata.

3. Final Answer:

   export const metadata = { openGraph: { title: 'My Page' } } -> Option A

4. Quick Check:

   metadata export with openGraph object = A [OK]

Hint: Use named export 'metadata' with openGraph object [OK]

Common Mistakes:

• Using default export instead of named export
• Defining metadata as a function instead of an object
• Trying to import and mutate metadata

3. Given this metadata export in a Next.js page:

export const metadata = {
  openGraph: {
    title: 'Welcome',
    description: 'Home page',
    url: 'https://example.com',
    images: ['https://example.com/image.png']
  }
}

What will be the Open Graph og:title content in the rendered HTML?

medium

A. https://example.com/image.png

B. Home page

C. Welcome

D. https://example.com

Solution

1. Step 1: Identify the Open Graph title property

   The title inside openGraph sets the og:title tag content.

2. Step 2: Match the value to the tag

   The value is 'Welcome', so og:title will be 'Welcome'.

3. Final Answer:

   Welcome -> Option C

4. Quick Check:

   og:title = metadata.openGraph.title = 'Welcome' [OK]

Hint: og:title matches openGraph.title value [OK]

Common Mistakes:

• Confusing description or url as title
• Using images URL as title
• Not recognizing nested openGraph object

4. You wrote this metadata in a Next.js page:

export const metadata = {
  openGraph: {
    title: 'Page',
    images: 'https://example.com/img.png'
  }
}

Why might the Open Graph image not appear correctly when shared?

medium

A. images should be an array, not a string

B. title property is missing

C. openGraph must be a function, not an object

D. metadata must be default export

Solution

1. Step 1: Check images property type

   Open Graph expects images as an array of URLs, not a single string.

2. Step 2: Identify the issue

   Using a string instead of an array causes the image tag to be missing or invalid.

3. Final Answer:

   images should be an array, not a string -> Option A

4. Quick Check:

   images array required for Open Graph images [OK]

Hint: images must be an array even for one image [OK]

Common Mistakes:

• Passing a string instead of array for images
• Forgetting to export metadata as named export
• Thinking openGraph should be a function

5. You want to add Open Graph metadata with a dynamic image URL based on a page prop imageUrl. Which approach correctly sets the metadata in a Next.js App Router page?

hard

A. export const metadata = { openGraph: { images: [imageUrl] } }

B. export function generateMetadata({ params }) { return { openGraph: { images: [params.imageUrl] } } }

C. const metadata = { openGraph: { images: [imageUrl] } }; export default metadata

D. export async function metadata() { return { openGraph: { images: [await getImage()] } } }

Solution

1. Step 1: Understand dynamic metadata in Next.js App Router

   For dynamic metadata, Next.js uses a generateMetadata function that receives page props.

2. Step 2: Check options for correct dynamic usage

   export function generateMetadata({ params }) { return { openGraph: { images: [params.imageUrl] } } } correctly defines generateMetadata returning metadata using params.imageUrl.

3. Final Answer:

   export function generateMetadata({ params }) { return { openGraph: { images: [params.imageUrl] } } } -> Option B

4. Quick Check:

   Dynamic metadata uses generateMetadata function [OK]

Hint: Use generateMetadata function for dynamic Open Graph data [OK]

Common Mistakes:

• Trying to use static metadata export for dynamic data
• Using default export instead of named export
• Defining metadata as async function named 'metadata'