NextjsHow-ToBeginner · 4 min read

How to Add OG Tags in Next.js for Social Sharing

In Next.js, add Open Graph (OG) tags by using the Head component from next/head. Place your OG meta tags inside <Head> in your page or component to customize social sharing previews.

📐

Syntax

Use the Head component from next/head to insert meta tags into the HTML document's <head> section. Inside <Head>, add <meta> tags with property attributes for OG tags and content for their values.

<Head>: Wraps head elements.
<meta property="og:title" content="Your Title" />: Sets the OG title.
<meta property="og:description" content="Your description" />: Sets the OG description.
<meta property="og:image" content="URL" />: Sets the OG image URL.
<meta property="og:url" content="Page URL" />: Sets the page URL.

jsx

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Your Title" />
        <meta property="og:description" content="Your description" />
        <meta property="og:image" content="https://example.com/image.jpg" />
        <meta property="og:url" content="https://example.com/page" />
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

💻

Example

This example shows a Next.js page with OG tags for title, description, image, and URL. These tags help social media platforms display rich previews when sharing the page link.

jsx

import Head from 'next/head';

export default function HomePage() {
  return (
    <>
      <Head>
        <title>My Awesome Site</title>
        <meta property="og:title" content="My Awesome Site" />
        <meta property="og:description" content="Welcome to my awesome Next.js site!" />
        <meta property="og:image" content="https://myawesomesite.com/og-image.png" />
        <meta property="og:url" content="https://myawesomesite.com" />
        <meta property="og:type" content="website" />
      </Head>
      <main>
        <h1>Welcome to My Awesome Site</h1>
        <p>Enjoy your stay!</p>
      </main>
    </>
  );
}

Output

Page renders with a title 'My Awesome Site' and includes OG meta tags in the HTML head for social sharing previews.

⚠️

Common Pitfalls

Not using the Head component causes OG tags to not appear in the HTML head.
Using name instead of property for OG tags will not work correctly.
For dynamic pages, forgetting to update OG tags per page leads to incorrect previews.
OG image URLs must be absolute and accessible publicly.

jsx

import Head from 'next/head';

// Wrong way: using name instead of property
export default function WrongPage() {
  return (
    <>
      <Head>
        <meta name="og:title" content="Wrong Title" /> {/* This won't work for OG tags */}
      </Head>
      <main>Content</main>
    </>
  );
}

// Right way:
export function RightPage() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Right Title" />
      </Head>
      <main>Content</main>
    </>
  );
}

📊

Quick Reference

Use these common OG tags inside <Head> in Next.js:

OG Tag	Purpose	Example
og:title	Title of the page
og:description	Short description
og:image	Image URL for preview
og:url	Canonical URL of the page
og:type	Type of content (e.g., website, article)

✅

Key Takeaways

Use the Head component from next/head to add OG tags in Next.js pages.

Always use property attribute for OG meta tags, not name.

Ensure OG image URLs are absolute and publicly accessible.

Update OG tags dynamically for pages with changing content.

OG tags improve how your pages look when shared on social media.