Open Graph and Twitter cards in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js component render in the HTML head?

Consider this Next.js component that sets Open Graph and Twitter card meta tags. What will be the content of the tag in the rendered HTML?

NextJS

import Head from 'next/head';

export default function Seo() {
  return (
    <Head>
      <meta property="og:title" content="Learn Next.js SEO" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
}

A Learn Next.js SEO

B summary_large_image

C og:title

D Twitter card

💡 Hint

Look at the content attribute of the meta tag with property 'og:title'.

The meta tag with property 'og:title' sets the Open Graph title. Its content attribute is 'Learn Next.js SEO', which is what will appear in the HTML head.

📝 Syntax

intermediate

Which option correctly adds a Twitter card meta tag in Next.js?

You want to add a Twitter card meta tag for a summary with a large image in a Next.js component. Which code snippet is syntactically correct and will render the correct meta tag?

NextJS

import Head from 'next/head';

export default function TwitterCard() {
  return (
    <Head>
      {/* Your meta tag here */}
    </Head>
  );
}

A <meta twitter:card="summary_large_image" />

B <meta name="twitter:card" content=summary_large_image />

C <meta content="summary_large_image" name="twitter:card" />

D <meta name="twitter:card" content="summary_large_image" />

💡 Hint

Meta tags require name and content attributes as strings.

Option D uses correct syntax with name and content attributes as strings. Option D misses the content attribute. Option D misses quotes around content value. Option D reverses attributes but is still valid HTML; however, the standard is name first then content.

🔧 Debug

advanced

Why does this Next.js page not show the Open Graph image on social shares?

This Next.js page includes Open Graph meta tags but the image does not appear when sharing the URL on social media. What is the likely cause?

NextJS

import Head from 'next/head';

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

A The og:title meta tag is missing a content attribute.

B The og:image URL is relative and should be absolute with full domain.

C Next.js Head component cannot render meta tags.

D The main content is missing an alt attribute.

💡 Hint

Social media platforms require full URLs for images in Open Graph tags.

Open Graph image URLs must be absolute URLs including the domain. Using a relative path like '/images/og-image.png' will cause social platforms to not find the image.

🧠 Conceptual

advanced

What is the main purpose of Twitter card meta tags in a Next.js app?

Why do developers add Twitter card meta tags to their Next.js pages?

A To enable Twitter login authentication.

B To improve page loading speed on Twitter.

C To control how the page preview looks when shared on Twitter.

D To add Twitter widgets to the page.

💡 Hint

Think about what happens when you share a link on Twitter.

Twitter card meta tags define the title, description, and image shown in the preview when a link is shared on Twitter. They do not affect loading speed, authentication, or widgets.

❓ state_output

expert

What is the final HTML output of this Next.js Head component with dynamic Open Graph tags?

Given this Next.js component that uses props to set Open Graph meta tags, what is the rendered HTML inside the when title="Hello World" and image="https://site.com/img.png"?

NextJS

import Head from 'next/head';

export default function DynamicSeo({ title, image }) {
  return (
    <Head>
      <meta property="og:title" content={title} />
      <meta property="og:image" content={image} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
}

A <meta property="og:title" content="Hello World" />\n<meta property="og:image" content="https://site.com/img.png" />\n<meta name="twitter:card" content="summary_large_image" />

B <meta property="og:title" content="title" />\n<meta property="og:image" content="image" />\n<meta name="twitter:card" content="summary_large_image" />

C <meta property="og:title" content="Hello World" />\n<meta name="twitter:card" content="summary_large_image" />

D <meta property="og:title" content="Hello World" />\n<meta property="og:image" content="/img.png" />\n<meta name="twitter:card" content="summary_large_image" />

💡 Hint

Props are used as values for content attributes.

The component uses the props title and image directly as content values. So the rendered meta tags have content="Hello World" and content="https://site.com/img.png" respectively.

Practice

1. What is the main purpose of adding Open Graph and Twitter card meta tags in a Next.js page?

easy

A. To speed up the page loading time

B. To improve how links appear when shared on social media platforms

C. To add custom fonts to the page

D. To enable server-side rendering

Solution

1. Step 1: Understand Open Graph and Twitter cards

   These meta tags control how links look when shared on social media, like showing images and descriptions.

2. Step 2: Identify their purpose in Next.js

   Adding these tags inside the Head component improves link previews, not performance or fonts.

3. Final Answer:

   To improve how links appear when shared on social media platforms -> Option B

4. Quick Check:

   Open Graph = Better social media previews [OK]

Hint: Open Graph tags control social media link previews [OK]

Common Mistakes:

• Thinking they speed up page loading
• Confusing with styling or fonts
• Assuming they enable server-side rendering

2. Which of the following is the correct way to add an Open Graph title tag inside a Next.js page using the Head component?

easy

A. My Page Title

B.

C.

D.

Solution

1. Step 1: Recall Open Graph meta tag syntax

   Open Graph tags use property="og:..." attribute, not name.

2. Step 2: Check Next.js Head usage

   Meta tags go inside Head with correct attributes; property="og:title" is correct for Open Graph title.

3. Final Answer:

   <Head><meta property="og:title" content="My Page Title" /></Head> -> Option D

4. Quick Check:

   Open Graph uses property="og:title" [OK]

Hint: Use property="og:title" for Open Graph title meta tag [OK]

Common Mistakes:

• Using name="og:title" instead of property
• Confusing Twitter card tags with Open Graph
• Placing meta tags outside <Head>

3. Given this Next.js component, what will be the rendered meta tag for Twitter card title?

import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <meta name="twitter:title" content="Welcome to Next.js" />
    </Head>
  );
}

medium

A. <meta name="og:title" content="Welcome to Next.js" />

B. <meta property="twitter:title" content="Welcome to Next.js" />

C. <meta name="twitter:title" content="Welcome to Next.js" />

D. No meta tag will be rendered

Solution

1. Step 1: Check the meta tag syntax in the component

   The component uses name="twitter:title" which is correct for Twitter cards.

2. Step 2: Confirm rendering behavior

   Next.js Head renders meta tags as written, so the tag will appear exactly as coded.

3. Final Answer:

   <meta name="twitter:title" content="Welcome to Next.js" /> -> Option C

4. Quick Check:

   Twitter card title uses name="twitter:title" [OK]

Hint: Twitter card title uses name="twitter:title" attribute [OK]

Common Mistakes:

• Using property instead of name for Twitter tags
• Confusing Open Graph and Twitter meta attributes
• Assuming Next.js modifies meta tags automatically

4. You added this code to your Next.js page but the Twitter card image is not showing:

<Head>
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="/images/card.png" />
</Head>

What is the most likely reason the image does not appear on Twitter?

medium

A. The image URL is relative and should be absolute with full domain

B. The meta tag name should be property instead of name

C. Twitter cards do not support images

D. The content attribute is missing

Solution

1. Step 1: Check the image URL format

   Twitter requires absolute URLs (including https://domain) for images, not relative paths.

2. Step 2: Verify meta tag attributes

   Using name="twitter:image" is correct; Twitter supports images in cards.

3. Final Answer:

   The image URL is relative and should be absolute with full domain -> Option A

4. Quick Check:

   Twitter image URLs must be absolute [OK]

Hint: Use full URL for Twitter card images, not relative paths [OK]

Common Mistakes:

• Using relative image URLs
• Changing name to property for Twitter tags
• Thinking Twitter cards don't support images

5. You want to create a Next.js page that sets both Open Graph and Twitter card meta tags for title, description, and image. Which code snippet correctly combines these tags inside the Head component?

hard

A.

B.

C.

D.

Solution

1. Step 1: Verify Open Graph meta tags

   Open Graph tags use property="og:..." with absolute image URL, which is correct in options A, C, D.

2. Step 2: Verify Twitter card meta tags

   Twitter tags use name="twitter:..." and include twitter:card with value summary_large_image for large image preview, correctly done only in A.

3. Step 3: Check image URLs and completeness

   uses absolute URLs for images and includes all required tags for both Open Graph and Twitter cards.

4. Final Answer:

   Option A correctly combines Open Graph and Twitter card meta tags with proper attributes and URLs -> Option A

5. Quick Check:

   Open Graph uses property, Twitter uses name, absolute URLs needed [OK]

Hint: Use property for Open Graph, name for Twitter, absolute URLs for images [OK]

Common Mistakes:

• Using name instead of property for Open Graph
• Using relative URLs for images
• Omitting twitter:card meta tag