Open Graph metadata in NextJS - Step-by-Step Execution

Concept Flow - Open Graph metadata

Start Next.js page

↓

Add Open Graph metadata in <head>

↓

Browser reads metadata

↓

Social media scrapers fetch metadata

↓

Display rich preview on social platforms

↓

User clicks link with preview

This flow shows how Open Graph metadata is added in a Next.js page head, read by browsers and social media scrapers, and used to display rich previews.

Execution Sample

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page Title" />
        <meta property="og:description" content="Page description here." />
        <meta property="og:image" content="https://example.com/image.png" />
      </Head>
      <main>Content here</main>
    </>
  );
}

This code adds Open Graph metadata tags inside the Next.js Head component to define title, description, and image for social previews.

Execution Table

Step	Action	Metadata Added	Browser Reads	Social Scraper Reads	Result
1	Render Next.js page	No metadata yet	No OG data	No OG data	No rich preview
2	Add <Head> with OG tags	og:title, og:description, og:image	Reads OG tags	Reads OG tags	Rich preview data available
3	Browser loads page	OG metadata present	Uses OG for SEO	Uses OG for preview	Page shows with metadata
4	Social media scrapes URL	OG metadata present	N/A	Fetches OG tags	Displays rich preview with title, description, image
5	User shares link	OG metadata present	N/A	N/A	Link preview shown on social platforms
6	End	Process complete	OG metadata used	OG metadata used	Rich preview displayed

💡 All Open Graph metadata tags are read and used by browsers and social media scrapers to show rich previews.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
og:title	undefined	"My Page Title"	"My Page Title"	"My Page Title"
og:description	undefined	"Page description here."	"Page description here."	"Page description here."
og:image	undefined	"https://example.com/image.png"	"https://example.com/image.png"	"https://example.com/image.png"

Key Moments - 3 Insights

Why do we add Open Graph metadata inside the <Head> component?

Because the <Head> component inserts metadata into the HTML head section, which browsers and social media scrapers read to generate previews, as shown in execution_table step 2.

What happens if Open Graph metadata is missing?

Without OG metadata, social platforms cannot create rich previews, so links show plain URLs or default info, as seen in execution_table step 1.

Can Open Graph metadata affect SEO or only social previews?

OG metadata mainly affects social previews, but browsers also use it for better sharing info, improving user experience, as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what Open Graph metadata is added at step 2?

A og:url, og:type, og:locale

B og:title, og:description, og:image

C Only og:title

D No metadata added

💡 Hint

Check the 'Metadata Added' column in execution_table row for step 2.

At which step does the social media scraper read the Open Graph tags?

A Step 4

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Social Scraper Reads' column in execution_table.

If we remove the og:image tag, how would the variable_tracker change after step 2?

A og:image would be empty string

B og:image would have a default URL

C og:image would be undefined

D og:image would still have the original URL

💡 Hint

Check the 'og:image' row in variable_tracker after step 2.

Concept Snapshot

Open Graph metadata is added inside the Next.js <Head> component.
Use <meta property="og:title" content="..." /> for title.
Add og:description and og:image for description and preview image.
Browsers and social media scrapers read these tags.
They create rich link previews on social platforms.
Missing OG tags means no rich preview.

Full Transcript

Open Graph metadata is special information added inside the HTML head section of a Next.js page using the Head component. This metadata includes tags like og:title, og:description, and og:image. When the page loads, browsers read these tags for SEO and display purposes. Social media platforms also scrape these tags when someone shares the page link. They use the metadata to show a rich preview with a title, description, and image. If the metadata is missing, the preview will be plain or default. Adding Open Graph metadata improves how links look when shared and helps users understand the content better.

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'