Open Graph metadata in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a basic Open Graph title meta tag in a Next.js Head component.

NextJS

<Head>
  <meta property="og:title" content="[1]" />
</Head>

Drag options to blanks, or click blank then click option'

A"My Website"

Bog:title

Ccontent

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the property name inside the content attribute.

Using the wrong attribute name instead of content.

The content attribute holds the Open Graph title text. Here, "My Website" is the correct value.

2fill in blank

medium

Complete the code to add an Open Graph image meta tag with the URL '/og-image.png'.

NextJS

<Head>
  <meta property="og:image" content=[1] />
</Head>

Drag options to blanks, or click blank then click option'

A'/og-image.png'

Bog:image

C"/og-image.png"

D/og-image.png

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the URL.

Using single quotes which can cause JSX errors.

The content attribute must be a string with quotes. Double quotes are standard in JSX.

3fill in blank

hard

Fix the error in the Open Graph meta tag for description by completing the content attribute correctly.

NextJS

<Head>
  <meta property="og:description" content=[1] />
</Head>

Drag options to blanks, or click blank then click option'

A"This is my site"

BThis is my site

C'This is my site'

D{`This is my site`}

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the string unquoted causes syntax errors.

Using single quotes inside JSX attributes.

The content attribute requires a string wrapped in double quotes in JSX. Option A is correct.

4fill in blank

hard

Fill both blanks to add Open Graph title and type meta tags correctly.

NextJS

<Head>
  <meta property="[1]" content="My Site" />
  <meta property="[2]" content="website" />
</Head>

Drag options to blanks, or click blank then click option'

Aog:title

Bog:site_name

Cog:type

Dog:url

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up property names like using 'og:url' instead of 'og:type'.

Using 'og:site_name' for the type property.

The first meta tag sets the Open Graph title, and the second sets the type of content.

5fill in blank

hard

Fill all three blanks to add Open Graph title, description, and image meta tags correctly.

NextJS

<Head>
  <meta property="[1]" content="Welcome to my site" />
  <meta property="[2]" content="The best site ever" />
  <meta property="[3]" content="/images/og.png" />
</Head>

Drag options to blanks, or click blank then click option'

Aog:title

Bog:description

Cog:image

Dog:url

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'og:url' instead of 'og:image' for the image tag.

Swapping description and image property names.

The meta tags set the Open Graph title, description, and image respectively.

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'