Open Graph metadata in NextJS - Performance & Optimization

Performance: Open Graph metadata

LOW IMPACT

Open Graph metadata affects how social media platforms preview your page, impacting perceived load speed and user engagement but not the actual page rendering speed.

Adding social media preview metadata to a Next.js page

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page" />
        <meta property="og:description" content="Description here" />
        <meta property="og:image" content="/optimized-image.jpg" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
      </Head>
      <main>Content</main>
    </>
  );
}

Using optimized, properly sized images reduces asset size and speeds up social media preview loading.

📈 Performance GainSaves 1-2MB in asset size, improving network efficiency and preview generation speed.

Adding social media preview metadata to a Next.js page

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page" />
        <meta property="og:description" content="Description here" />
        <meta property="og:image" content="/large-image.jpg" />
        <meta property="og:image:width" content="4000" />
        <meta property="og:image:height" content="3000" />
      </Head>
      <main>Content</main>
    </>
  );
}

Using very large images for og:image increases page weight and delays social media preview generation.

📉 Performance CostAdds 2-3MB to page assets, increasing network load and preview generation time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large og:image with high resolution	0 (metadata only)	0	0	[X] Bad
Optimized og:image with proper size	0 (metadata only)	0	0	[OK] Good

Rendering Pipeline

Open Graph metadata is parsed by social media crawlers before rendering the page. It does not affect the browser's rendering pipeline for users.

→Network Request

→HTML Parsing

⚠️ BottleneckNetwork Request for large og:image assets can delay preview generation.

Optimization Tips

1Use optimized, properly sized images for og:image to reduce network load.

2Keep Open Graph metadata minimal and relevant to avoid unnecessary HTML size.

3Open Graph metadata does not affect browser rendering performance but impacts social media preview speed.

Performance Quiz - 3 Questions

How does adding Open Graph metadata affect the Largest Contentful Paint (LCP) metric?

A It significantly delays LCP by blocking rendering.

B It has minimal to no effect on LCP.

C It causes multiple reflows increasing LCP.

D It improves LCP by preloading content.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by images, and check og:image file size and load time.

What to look for: Look for large image files that increase load time; smaller images improve performance.

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'