Open Graph and Twitter cards in NextJS - Step-by-Step Execution

Concept Flow - Open Graph and Twitter cards

Start Next.js page

↓

Add <Head> component

↓

Insert Open Graph meta tags

↓

Insert Twitter card meta tags

↓

Page renders with meta tags

↓

Social media reads meta tags

↓

Display rich preview card

This flow shows how a Next.js page includes Open Graph and Twitter meta tags in the <Head> to enable rich social media previews.

Execution Sample

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="My Page Title" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <main>Content here</main>
    </>
  );
}

This code adds Open Graph and Twitter card meta tags inside the Next.js Head component for social media previews.

Execution Table

Step	Action	Meta Tags Added	Page Render State	Social Media Preview
1	Start Next.js page render	None	Page starts rendering	No preview available
2	Add <Head> component	None yet	Head component ready	No preview available
3	Insert Open Graph meta tags	<meta property="og:title" content="My Page Title" />	Meta tags added to head	Preview title set
4	Insert Twitter card meta tags	<meta name="twitter:card" content="summary_large_image" />	Twitter card meta added	Preview card type set
5	Page fully rendered	All meta tags present	Page content visible	Rich preview ready for social media
6	Social media scrapes page	Reads meta tags	No change	Displays rich card with title and large image
7	End	No further changes	Page stable	Preview shown on social platforms

💡 All meta tags are added and page is rendered; social media platforms use these tags to show rich previews.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
metaTags	[]	[{property: 'og:title', content: 'My Page Title'}]	[{property: 'og:title', content: 'My Page Title'}, {name: 'twitter:card', content: 'summary_large_image'}]	[{property: 'og:title', content: 'My Page Title'}, {name: 'twitter:card', content: 'summary_large_image'}]
pageRendered	false	false	false	true
socialPreviewReady	false	false	false	true

Key Moments - 3 Insights

Why do we add meta tags inside the <Head> component?

Because Next.js uses the <Head> component to insert tags into the HTML <head> section, which social media platforms read to create previews. See execution_table step 3 and 4.

What happens if we forget the Twitter card meta tag?

Social media may not show a rich Twitter card preview, only a simple link. The execution_table step 4 shows adding the Twitter card tag enables the rich preview.

Can we add these meta tags anywhere else in the page?

No, meta tags must be inside the <head> section. Next.js <Head> component ensures this. Adding them elsewhere won't be recognized by social media scrapers.

Visual Quiz - 3 Questions

Look at the execution_table, what meta tag is added at step 3?

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

B <meta property="og:title" content="My Page Title" />

C <meta name="description" content="Page description" />

D <meta charset="UTF-8" />

💡 Hint

Check the 'Meta Tags Added' column at step 3 in the execution_table.

At which step does the page become fully rendered?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Page Render State' column for when the page content is visible.

If we remove the Twitter card meta tag, what changes in the execution_table?

A Step 4 meta tags will be empty and social preview may lack Twitter card

B Step 3 meta tags will be missing

C Page will not render at all

D Social media preview will show a large image anyway

💡 Hint

Refer to step 4 'Meta Tags Added' and 'Social Media Preview' columns.

Concept Snapshot

Open Graph and Twitter cards enable rich previews on social media.
Add meta tags inside Next.js <Head> component.
Use property="og:title" for Open Graph title.
Use name="twitter:card" for Twitter card type.
Social platforms read these tags to show previews.
Always place meta tags in <head> for recognition.

Full Transcript

This lesson shows how to add Open Graph and Twitter card meta tags in a Next.js page using the <Head> component. The flow starts with rendering the page, adding the <Head> component, then inserting Open Graph meta tags like og:title, followed by Twitter card meta tags such as twitter:card. Once the page is fully rendered with these tags, social media platforms scrape the page and display rich preview cards with titles and images. The execution table traces each step, showing when meta tags are added and how the page state changes. The variable tracker follows metaTags, pageRendered, and socialPreviewReady states. Key moments clarify why meta tags must be inside <Head>, the effect of missing Twitter card tags, and the importance of placing meta tags in the head section. The visual quiz tests understanding of which tags are added at which step, when the page is fully rendered, and the impact of removing Twitter card tags. The concept snapshot summarizes the key points for quick reference.

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