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?

What happens if we forget the Twitter card meta tag?

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

Visual Quiz - 3 Questions

Test your understanding

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" />

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.