Ever shared a link on Slack or posted a URL on Twitter and noticed that some sites show a beautiful preview card — a big image, a crisp title, a short description — while others show nothing but a bare URL? That's not luck. It's Open Graph tags, and getting them right is one of the highest-leverage improvements you can make to how your site looks when people share it.

What Is the Open Graph Protocol?

Open Graph (OG) is a metadata protocol originally developed by Facebook in 2010 to let websites control how their content appears when shared on social platforms. Today it's a de-facto web standard — used by Facebook, Twitter/X, LinkedIn, Slack, Discord, iMessage, and most other platforms that generate link previews.

OG tags are <meta> elements placed in your page's <head>. When someone shares a URL, the platform's crawler fetches the page and reads these tags to build the preview card. Without them, platforms fall back to guessing — which usually produces inconsistent or ugly results.

The Required Tags and What They Do

Core Open Graph tags

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short description of the page.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
TagPurposeRecommendation
og:titleHeadline shown in the preview card40–60 characters
og:descriptionSupporting text below the title80–120 characters
og:imageThumbnail image URL1200×630 px, absolute URL
og:urlCanonical URL for the pageAlways absolute URL
og:typeContent typewebsite / article / product

Twitter Card — do you need both?

Twitter/X has its own card system with tags like twitter:card and twitter:image. The good news: Twitter falls back to OG tags when Twitter-specific tags are absent. In practice, most developers add both to be safe. At minimum, add twitter:card to set the card style:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A short description of the page.">
<meta name="twitter:image" content="https://example.com/og-image.png">

summary_large_image gives you the big banner-style card. summary gives a smaller thumbnail on the side.

Implementation and Debugging

og:image size guidelines

The industry standard for OG images is 1200×630 pixels (an aspect ratio of 1.91:1). This size works across Facebook, Twitter, LinkedIn, and Slack without cropping. Minimum viable size is 600×315 px — anything smaller risks being ignored by some platforms. Keep file size under 5 MB, and always use an absolute URL (starting with https://), not a relative path.

How to debug OG tags

  • Facebook Sharing Debugger (developers.facebook.com/tools/debug): paste your URL to see exactly what Facebook's crawler sees, plus a rendered preview
  • Twitter Card Validator: verify how your card looks on X
  • OGP Checker on this site: enter any URL to inspect all OG tags and see a preview — no login required

Setting OG tags in Next.js

In Next.js App Router, use the metadata export instead of manual <meta> tags:

// app/page.tsx
export const metadata = {
  title: "Your Page Title",
  openGraph: {
    title: "Your Page Title",
    description: "A short description of the page.",
    images: [{ url: "https://example.com/og-image.png", width: 1200, height: 630 }],
    url: "https://example.com/page",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Your Page Title",
    images: ["https://example.com/og-image.png"],
  },
};

Frequently Asked Questions

I updated my OG image but the old one keeps showing up — what's happening?
Social platforms cache OG data aggressively. After updating your image, you need to manually bust the cache. For Facebook, use the Sharing Debugger to re-scrape the URL. Twitter's cache is harder to clear — a common workaround is adding a query parameter to your URL (e.g., ?v=2) to make platforms treat it as a new URL. Going forward, some teams version their OG image filenames (e.g., og-image-v2.png) to avoid cache issues on updates.
What values can I use for og:type?
The most common values are website (generic web page), article (blog posts and news articles), product (e-commerce items), and video.movie (video content). Using article unlocks additional tags like article:published_time and article:author, which platforms can use to enrich the preview. When in doubt, website is safe for any page.
Do I need both Open Graph and Twitter Card tags?
Not strictly. Twitter falls back to OG tags, so OG-only is often sufficient. But explicitly setting twitter:card gives you control over the card format (summary_large_image vs. summary), which OG tags can't specify. For any page where presentation matters, adding the four Twitter Card tags on top of OG tags takes five minutes and removes ambiguity across all platforms.

Key Takeaways

  • Open Graph tags let you control the title, description, and image shown when your page is shared on social platforms
  • The four required tags are og:title, og:description, og:image, and og:url
  • OG images should be 1200×630 px and referenced with an absolute URL
  • Add twitter:card alongside OG tags for explicit control over X/Twitter preview format
  • After updating OG tags, use Facebook's Sharing Debugger to clear the cache

Setting up OG tags is a half-hour task that pays dividends every time someone shares your content. Use the tools below to generate and verify your tags.