NextJSframework~3 mins

Why Open Graph and Twitter cards in NextJS? - Purpose & Use Cases

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

The Big Idea

Want your website links to stand out and get more clicks on social media? Here's how!

The Scenario

Imagine sharing your website link on social media and seeing a plain URL with no image or description.

It looks boring and uninviting, so fewer people click on it.

The Problem

Manually adding meta tags for each page is tedious and easy to forget.

Without proper tags, social media platforms show ugly or no previews, hurting your site's appeal.

The Solution

Open Graph and Twitter cards let you define how your pages look when shared.

Next.js makes it easy to add these tags dynamically, so your links always look great.

Before vs After

✗ Before

<meta property="og:title" content="My Site">
<meta name="twitter:card" content="summary">

✓ After

import Head from 'next/head';

export default function Page({ pageTitle }) {
  return (
    <Head>
      <meta property="og:title" content={pageTitle} />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  );
}

What It Enables

You can control exactly how your website appears on social media, making it more attractive and clickable.

Real Life Example

When you share a blog post link on Twitter, the card shows the post title, a summary, and a nice image, inviting more readers.

Key Takeaways

Manual meta tags are boring and easy to mess up.

Open Graph and Twitter cards improve link previews on social media.

Next.js helps add these tags easily and dynamically.