Open Graph metadata in NextJS - Mini Project: Build & Apply

Adding Open Graph Metadata in Next.js

📖 Scenario: You are building a simple Next.js website for a local bakery. You want to make sure that when people share your website link on social media, the preview shows the bakery's name, a description, and a nice image.

🎯 Goal: Learn how to add Open Graph metadata to a Next.js page using the Head component so social media platforms show a rich preview when the page is shared.

📋 What You'll Learn

Create a Next.js page component with a basic HTML structure

Add a configuration variable for Open Graph image URL

Use the Head component to add Open Graph meta tags

Complete the page with a title and description meta tags

💡 Why This Matters

🌍 Real World

Adding Open Graph metadata helps social media platforms show rich previews when users share your website link, improving click rates and user engagement.

💼 Career

Web developers often need to optimize websites for social sharing and SEO by adding proper metadata in frameworks like Next.js.

1

Create the Next.js page component

Create a Next.js page component called HomePage that returns a main element with a heading Welcome to Sweet Treats Bakery.

NextJS

function HomePage() {
  // Your code here
}

Hint

Use a function named HomePage that returns JSX with a main and h1 inside.

2

Add Open Graph image URL variable

Inside the HomePage component, create a constant called ogImageUrl and set it to "https://example.com/images/bakery-og.jpg".

NextJS

export default function HomePage() {
  // Your code here
  return (
    
      Welcome to Sweet Treats Bakery
    
  )
}

Hint

Declare a constant named ogImageUrl with the exact URL string inside the component.

3

Add Open Graph meta tags with Head

Import Head from next/head at the top. Inside the HomePage component's return, add a <Head> element with these meta tags: og:title set to "Sweet Treats Bakery", og:description set to "Delicious homemade pastries and cakes.", and og:image set to the ogImageUrl variable.

NextJS

import Head from "next/head"

export default function HomePage() {
  const ogImageUrl = "https://example.com/images/bakery-og.jpg"
  return (
    // Your code here
    
      Welcome to Sweet Treats Bakery
    
  )
}

Hint

Use the Head component to add meta tags with the exact properties and content values.

4

Add page title and description meta tags

Inside the Head component, add a <title> tag with text "Sweet Treats Bakery" and a meta tag with name="description" and content "Freshly baked goods every day." to complete the page metadata.

NextJS

import Head from "next/head"

export default function HomePage() {
  const ogImageUrl = "https://example.com/images/bakery-og.jpg"
  return (
    
      
        {/* Add title and description meta tags here */}
      
      
        Welcome to Sweet Treats Bakery
      
    
  )
}

Hint

Add a <title> tag and a meta tag with name="description" inside the Head component.

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'