0
0
NextJSframework~5 mins

Open Graph and Twitter cards in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Open Graph and Twitter cards help your web pages look nice when shared on social media. They show images, titles, and descriptions automatically.

You want your website links to look attractive when shared on Facebook or Twitter.
You want to control what image and text appear when someone shares your page.
You want to increase clicks by making your shared links more engaging.
You want to improve your website's social media presence with rich previews.
Syntax
NextJS
import Head from 'next/head';

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

        {/* Twitter Card tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Page Title" />
        <meta name="twitter:description" content="Page description here." />
        <meta name="twitter:image" content="https://example.com/image.jpg" />
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

Use the Head component from Next.js to add meta tags inside the HTML <head> section.

Open Graph uses property attributes, Twitter cards use name attributes in meta tags.

Examples
Basic Open Graph tags for a blog post page.
NextJS
<Head>
  <meta property="og:title" content="My Blog Post" />
  <meta property="og:description" content="A short summary of my post." />
  <meta property="og:image" content="https://example.com/blog-image.jpg" />
  <meta property="og:url" content="https://example.com/blog-post" />
</Head>
Basic Twitter card tags for the same blog post.
NextJS
<Head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="My Blog Post" />
  <meta name="twitter:description" content="A short summary of my post." />
  <meta name="twitter:image" content="https://example.com/blog-image.jpg" />
</Head>
Open Graph tags without an image. Social sites may show a default or no image.
NextJS
<Head>
  {/* No image provided */}
  <meta property="og:title" content="Page Without Image" />
  <meta property="og:description" content="This page has no image." />
  <meta property="og:url" content="https://example.com/no-image" />
</Head>
Twitter card with minimal tags and only an image.
NextJS
<Head>
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Single Image Card" />
  <meta name="twitter:image" content="https://example.com/single-image.jpg" />
</Head>
Sample Program

This Next.js page sets Open Graph and Twitter card meta tags inside the Head component. When shared on social media, the link will show the title, description, and image defined here.

NextJS
import Head from 'next/head';

export default function SocialPreviewPage() {
  return (
    <>
      <Head>
        {/* Open Graph tags */}
        <meta property="og:title" content="Welcome to My Site" />
        <meta property="og:description" content="This is a simple page with Open Graph and Twitter cards." />
        <meta property="og:image" content="https://example.com/welcome-image.jpg" />
        <meta property="og:url" content="https://example.com/welcome" />

        {/* Twitter Card tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Welcome to My Site" />
        <meta name="twitter:description" content="This is a simple page with Open Graph and Twitter cards." />
        <meta name="twitter:image" content="https://example.com/welcome-image.jpg" />
      </Head>
      <main>
        <h1>Welcome to My Site</h1>
        <p>This page has meta tags for social media previews.</p>
      </main>
    </>
  );
}
OutputSuccess
Important Notes

Open Graph tags improve how your page looks on Facebook, LinkedIn, and other platforms.

Twitter cards require specific meta tags to show images and summaries on Twitter.

Always use absolute URLs (starting with https://) for images and links in meta tags.

Summary

Open Graph and Twitter cards make your shared links look better on social media.

Use Next.js Head component to add these meta tags inside your pages.

Include title, description, image, and URL for best results.