NextJSframework~30 mins

Open Graph and Twitter cards in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Open Graph and Twitter Cards in Next.js

📖 Scenario: You are building a simple Next.js website for a blog post. You want to make sure that when people share your blog post link on social media like Facebook and Twitter, the preview shows a nice title, description, and image.

🎯 Goal: Learn how to add Open Graph and Twitter card meta tags in a Next.js page to improve social media sharing previews.

📋 What You'll Learn

Create a Next.js page component with basic HTML structure

Add a configuration variable for the blog post metadata

Use the Head component from Next.js to add Open Graph meta tags

Add Twitter card meta tags inside the Head component

💡 Why This Matters

🌍 Real World

Adding Open Graph and Twitter card meta tags helps websites show rich previews when their links are shared on social media platforms, improving user engagement and click rates.

💼 Career

Web developers often need to optimize websites for social sharing and SEO by adding proper meta tags. Knowing how to do this in Next.js is a valuable skill for frontend and full-stack roles.

Progress0 / 4 steps

Create the Next.js page component

Create a Next.js page component called BlogPost that returns a <main> element with a heading <h1> containing the text My First Blog Post.

NextJS

export default function BlogPost() {
  // Your code here
}

Need a hint?

Use a function named BlogPost that returns JSX with a <main> and <h1> inside.

Add blog post metadata configuration

Add a constant object called postMeta with these exact properties and values: title set to 'My First Blog Post', description set to 'This is a blog post about learning Next.js.', and image set to 'https://example.com/blog-image.png'.

NextJS

const postMeta = {
  // Your code here
}

export default function BlogPost() {
  return (
    
      My First Blog Post
    
  )
}

Need a hint?

Create an object named postMeta with the exact keys and values for title, description, and image.

Add Open Graph meta tags using Next.js Head

Import the Head component from next/head. Inside the BlogPost component, add a <Head> element before <main>. Inside <Head>, add these meta tags using the postMeta values: <meta property="og:title" content={postMeta.title} />, <meta property="og:description" content={postMeta.description} />, and <meta property="og:image" content={postMeta.image} />.

NextJS

import Head from 'next/head'

const postMeta = {
  title: 'My First Blog Post',
  description: 'This is a blog post about learning Next.js.',
  image: 'https://example.com/blog-image.png'
}

export default function BlogPost() {
  return (
    
      {/* Your code here */}
      
        My First Blog Post
      
    
  )
}

Need a hint?

Use the Head component to add meta tags with property="og:title", og:description, and og:image using postMeta values.

Add Twitter card meta tags inside Head

Inside the existing <Head> element, add these Twitter card meta tags using postMeta: <meta name="twitter:card" content="summary_large_image" />, <meta name="twitter:title" content={postMeta.title} />, <meta name="twitter:description" content={postMeta.description} />, and <meta name="twitter:image" content={postMeta.image} />.

NextJS

import Head from 'next/head'

const postMeta = {
  title: 'My First Blog Post',
  description: 'This is a blog post about learning Next.js.',
  image: 'https://example.com/blog-image.png'
}

export default function BlogPost() {
  return (
    
      
        
        
        
        {/* Your code here */}
      
      
        My First Blog Post
      
    
  )
}

Need a hint?

Add Twitter card meta tags inside <Head> using name attributes and postMeta values.