Open Graph Meta Tags: Control How Your Links Look on Social Media

Open Graph: Your Link's First Impression

When someone shares your URL on Twitter, LinkedIn, Slack, or WhatsApp, the platform fetches your page and renders a preview card. Without Open Graph tags, you get a bare URL or a random snippet of text. With them, you get a title, description, and image that make people want to click.

Essential Open Graph Tags

<head>
  <!-- Required -->
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A compelling description under 200 chars" />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  <!-- Recommended -->
  <meta property="og:site_name" content="Your Site Name" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Description of the image" />
</head>

Twitter Cards

Twitter (X) uses its own tags that fall back to Open Graph if missing:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@youraccount" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Compelling description" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Card types:

Type	Layout	Best For
`summary`	Small image left, text right	Articles, general pages
`summary_large_image`	Large image on top, text below	Blog posts, landing pages (recommended)
`player`	Embedded video/audio player	Media content
`app`	App download card	Mobile apps

The Perfect og:image

Size: 1200 x 630 pixels (1.91:1 ratio) — works on all platforms
File size: Under 5MB (under 1MB preferred)
Format: JPG or PNG (JPG for photos, PNG for text/graphics)
URL: Must be absolute (https://...), not relative
Text on image: Keep key text in the center 60% — edges get cropped on some platforms

Next.js Implementation

// app/page.tsx (App Router)
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'Your page description',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description',
    url: 'https://example.com',
    siteName: 'Your Site',
    images: [
      {
        url: 'https://example.com/og.jpg',
        width: 1200,
        height: 630,
        alt: 'Description of the image',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description',
    images: ['https://example.com/og.jpg'],
  },
};

Dynamic OG Images

For blogs and dynamic pages, generate OG images on the fly:

// app/api/og/route.tsx (Next.js)
import { ImageResponse } from 'next/og';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white', fontSize: 60, fontWeight: 'bold',
        padding: 60,
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Testing and Debugging

Platform	Debugger
Facebook	Sharing Debugger (developers.facebook.com)
Twitter/X	Card Validator (cards-dev.twitter.com)
LinkedIn	Post Inspector (linkedin.com/post-inspector)
General	opengraph.xyz — preview across multiple platforms

Common issue: Platforms cache OG data aggressively. After changing your tags, use the platform's debugger to force a re-scrape. LinkedIn caches for 7 days.

Checklist

Every page has og:title, og:description, og:image, og:url
og:image uses absolute URL with HTTPS
og:image is 1200x630px, under 1MB
Twitter card type is set (summary_large_image recommended)
og:title is different from og:description (not duplicated content)
Test with platform debuggers before launching

Generate your tags: Meta Tag Generator — fill in the fields, get copy-paste-ready meta tags with Open Graph and Twitter Cards.