NextJSframework~30 mins

Open Graph metadata in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Adding Open Graph Metadata in Next.js

📖 Scenario: You are building a simple Next.js website for a local bakery. You want to make sure that when people share your website link on social media, the preview shows the bakery's name, a description, and a nice image.

🎯 Goal: Learn how to add Open Graph metadata to a Next.js page using the Head component so social media platforms show a rich preview when the page is shared.

📋 What You'll Learn

Create a Next.js page component with a basic HTML structure

Add a configuration variable for Open Graph image URL

Use the Head component to add Open Graph meta tags

Complete the page with a title and description meta tags

💡 Why This Matters

🌍 Real World

Adding Open Graph metadata helps social media platforms show rich previews when users share your website link, improving click rates and user engagement.

💼 Career

Web developers often need to optimize websites for social sharing and SEO by adding proper metadata in frameworks like Next.js.

Progress0 / 4 steps

Create the Next.js page component

Create a Next.js page component called HomePage that returns a main element with a heading Welcome to Sweet Treats Bakery.

NextJS

function HomePage() {
  // Your code here
}

Need a hint?

Use a function named HomePage that returns JSX with a main and h1 inside.

Add Open Graph image URL variable

Inside the HomePage component, create a constant called ogImageUrl and set it to "https://example.com/images/bakery-og.jpg".

NextJS

export default function HomePage() {
  // Your code here
  return (
    
      Welcome to Sweet Treats Bakery
    
  )
}

Need a hint?

Declare a constant named ogImageUrl with the exact URL string inside the component.

Add Open Graph meta tags with Head

Import Head from next/head at the top. Inside the HomePage component's return, add a <Head> element with these meta tags: og:title set to "Sweet Treats Bakery", og:description set to "Delicious homemade pastries and cakes.", and og:image set to the ogImageUrl variable.

NextJS

import Head from "next/head"

export default function HomePage() {
  const ogImageUrl = "https://example.com/images/bakery-og.jpg"
  return (
    // Your code here
    
      Welcome to Sweet Treats Bakery
    
  )
}

Need a hint?

Use the Head component to add meta tags with the exact properties and content values.

Add page title and description meta tags

Inside the Head component, add a <title> tag with text "Sweet Treats Bakery" and a meta tag with name="description" and content "Freshly baked goods every day." to complete the page metadata.

NextJS

import Head from "next/head"

export default function HomePage() {
  const ogImageUrl = "https://example.com/images/bakery-og.jpg"
  return (
    
      
        {/* Add title and description meta tags here */}
      
      
        Welcome to Sweet Treats Bakery
      
    
  )
}

Need a hint?

Add a <title> tag and a meta tag with name="description" inside the Head component.