Open Graph metadata in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js component with Open Graph metadata?

Consider this Next.js component that sets Open Graph metadata using the element. What will be the rendered HTML meta tags in the page head?

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="A description of my page." />
        <meta property="og:image" content="https://example.com/image.png" />
      </Head>
      <main>
        <h1>Welcome</h1>
      </main>
    </>
  );
}

A <meta name="og:title" content="My Page Title" />\n<meta name="og:description" content="A description of my page." />\n<meta name="og:image" content="https://example.com/image.png" />

B <meta property="title" content="My Page Title" />\n<meta property="description" content="A description of my page." />\n<meta property="image" content="https://example.com/image.png" />

C <meta content="My Page Title" property="og:title" />\n<meta content="A description of my page." property="og:description" />\n<meta content="https://example.com/image.png" property="og:image" />

D <meta property="og:title" content="My Page Title" />\n<meta property="og:description" content="A description of my page." />\n<meta property="og:image" content="https://example.com/image.png" />

💡 Hint

Open Graph meta tags use the 'property' attribute, not 'name'.

Open Graph metadata requires meta tags with the 'property' attribute set to 'og:title', 'og:description', and 'og:image'. The content attribute holds the value. Option D correctly uses this format.

📝 Syntax

intermediate

Which option causes a syntax error in Next.js Open Graph metadata usage?

Identify which code snippet will cause a syntax error when used inside a Next.js component's for Open Graph metadata.

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        {/* Insert meta tags here */}
      </Head>
      <main><h1>Hello</h1></main>
    </>
  );
}

A <meta property="og:title" content="Title" />

B <meta property='og:description' content='Description' />

C <meta property="og:image" content="https://example.com/image.png" />

D <meta property="og:url" content="https://example.com" />

💡 Hint

Self-closing tags in JSX must end with a slash.

In JSX, all tags must be properly closed. Option B misses the closing slash on the meta tag, causing a syntax error.

🔧 Debug

advanced

Why does the Open Graph image not appear when sharing the page?

A developer added Open Graph meta tags in Next.js but the image does not show when sharing the page on social media. What is the most likely cause?

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Site" />
        <meta property="og:image" content="/images/og-image.png" />
      </Head>
      <main><h1>Welcome</h1></main>
    </>
  );
}

A The image URL is relative and should be absolute for Open Graph.

B The meta tags must be inside <body>, not <head>.

C The og:title property is missing a content attribute.

D Next.js does not support Open Graph metadata.

💡 Hint

Open Graph requires full URLs for images.

Open Graph metadata requires absolute URLs for images so social platforms can fetch them. Relative URLs like '/images/og-image.png' won't work.

❓ state_output

advanced

What is the effect of dynamically changing Open Graph metadata in Next.js?

If you update Open Graph meta tags dynamically on the client side after page load in Next.js, what will be the effect when sharing the page URL on social media?

NextJS

import Head from 'next/head';
import { useState, useEffect } from 'react';

export default function Page() {
  const [title, setTitle] = useState('Initial Title');

  useEffect(() => {
    setTimeout(() => setTitle('Updated Title'), 3000);
  }, []);

  return (
    <>
      <Head>
        <meta property="og:title" content={title} />
      </Head>
      <main><h1>{title}</h1></main>
    </>
  );
}

A Open Graph metadata is ignored by social media.

B Social media will see 'Updated Title' because metadata updates dynamically.

C Social media will see 'Initial Title' because metadata is set at server render time.

D The page will crash due to changing meta tags dynamically.

💡 Hint

Social media scrapers read metadata from the server response, not client updates.

Open Graph metadata is read by social media bots from the server-rendered HTML. Client-side changes after load do not affect what social media sees.

🧠 Conceptual

expert

Which Next.js feature best supports setting Open Graph metadata for multiple pages efficiently?

You want to set unique Open Graph metadata for many pages in a Next.js app without repeating code. Which approach is best?

A Create a reusable Head component that accepts props for Open Graph tags and use it in each page.

B Manually add <Head> with meta tags in every page component separately.

C Use a global CSS file to define Open Graph metadata styles.

D Set Open Graph metadata only in _app.js once for all pages.

💡 Hint

Think about code reuse and passing data per page.

A reusable Head component lets you pass different Open Graph data per page, avoiding repetition and keeping metadata dynamic and maintainable.

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'