The Open Graph Protocol, Explained: What Every Marketer Needs to Know

Open Graph powers every link preview on the internet. Here's how the protocol works, which tags actually matter, and what happens when you get them wrong.

Every time you share a link on Twitter, LinkedIn, iMessage, or Slack, something decides what the preview looks like. That something is the Open Graph protocol — and understanding it takes about ten minutes.

Here’s what every marketer and developer needs to know.

Where It Came From

Open Graph was created by Facebook and launched at their f8 developer conference in 2010. The goal was simple: give web publishers a standard way to control how their content appears when shared on Facebook.

It worked. Within a few years, every major platform — Twitter, LinkedIn, Slack, iMessage, Discord, WhatsApp — adopted some version of it. Today, Open Graph meta tags are the de facto standard for link previews across the internet.

How It Works

When you share a URL, the platform’s crawler fetches the page and reads the <meta> tags in the <head>. No JavaScript, no rendering — just the raw HTML. The crawler extracts a handful of values and uses them to build the preview card you see.

The tags live in your HTML like this:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="One or two sentences about the page." />
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:url" content="https://yoursite.com/your-page" />
  <meta property="og:type" content="website" />
</head>

That’s the core set. Most platforms will render a usable preview from just these five.

The Tags That Actually Matter

Not all OG tags carry equal weight. Here’s what moves the needle:

`og:image`

This is the most impactful tag by far. A good image makes a link look professional and trustworthy. A missing image produces a bare grey box. The spec recommends 1200×630px for best results across platforms — roughly 1.91:1 aspect ratio.

One important note: the image URL must be publicly accessible. Localhost URLs, staging environments behind basic auth, and S3 buckets with private ACLs will all fail silently.

`og:title`

The bold headline in the preview. If this is missing, most platforms fall back to the <title> tag — which is usually fine for a blog post, but often shows something like “Dashboard | Acme Inc” for app pages, which isn’t useful for sharing.

`og:description`

The grey text under the headline. Treat this like a meta description: one or two sentences, clear value prop, no keyword stuffing. Most platforms truncate around 200 characters.

`og:url`

The canonical URL. This matters when your content is accessible from multiple paths (with and without trailing slashes, www vs non-www, etc.). Setting this explicitly prevents platforms from generating duplicate preview cards.

`og:type`

Defaults to website. Use article for blog posts — some platforms (especially Facebook) render article cards differently, including author and publish date if you add the extended article: tags.

Twitter Cards: The Parallel System

Twitter (now X) has its own meta tag system called Twitter Cards. The tag names are different (twitter:title, twitter:card, etc.) but they largely mirror Open Graph values. Most platforms look for OG tags first and fall back to Twitter Card tags, so you generally only need to set both if you want Twitter-specific behavior.

The most important Twitter Card tag is twitter:card, which controls the preview format:

summary_large_image recommended

1200×628

Full-width image above title & description

content="summary_large_image"

<div class="px-3 py-2.5 border-b border-zinc-800 flex items-center justify-between">
  <code class="text-xs font-semibold text-zinc-400">summary</code>
  <span class="text-xs text-zinc-500">default</span>
</div>
<div class="p-3">
  <div class="flex gap-2 items-start">
    <div class="relative flex-shrink-0 bg-zinc-800 rounded overflow-hidden" style="width: 72px; height: 72px;">
      <div class="absolute inset-0 flex items-center justify-center text-xs text-zinc-500">1:1</div>
    </div>
    <div class="flex-1 pt-0.5">
      <div class="w-full h-2 bg-zinc-600 rounded mb-1.5"></div>
      <div class="w-4/5 h-1.5 bg-zinc-700 rounded mb-1"></div>
      <div class="w-3/5 h-1.5 bg-zinc-700 rounded"></div>
    </div>
  </div>
  <p class="text-xs text-zinc-500 mt-2">Square thumbnail beside text — less visual impact</p>
  <code class="text-xs text-zinc-600 mt-1 block">content="summary"</code>
</div>

<meta name="twitter:card" content="summary_large_image" />

What Breaks Previews

Even with correct tags, previews can fail. Common causes:

Caching. Platforms aggressively cache link previews. If you update your OG image, old previews persist until the cache expires — often 24-72 hours. Facebook has a Sharing Debugger that lets you force-refresh. LinkedIn has a Post Inspector. Twitter/X refreshes automatically but slowly.

Image size. Images over ~5MB may fail to load during a crawl. Optimize your OG images — 200-400KB is a sweet spot.

Wrong dimensions. An image that’s too narrow, too tall, or square will get cropped awkwardly on platforms that expect the 1200×630 format. Always design for that canvas first.

JavaScript-rendered content. Crawlers read raw HTML. If your page renders meta tags via JavaScript (common in single-page apps), most crawlers will never see them. Server-side rendering or static generation is required.

Why Unique Per-Page Images Matter

Most sites set one OG image for the entire domain and call it done. It works, but it’s a missed opportunity.

When every page has a unique image that reflects its actual content — the article title, the product name, the key stat — previews become meaningful signals rather than generic branding. The click-through difference between a branded OG image with the article title and a generic logo card is measurable.

Generating unique images at scale is the hard part. You either need a pipeline that renders an HTML template for each page and screenshots it, or a service that does this dynamically at request time.

ShareMagic handles the latter: point your og:image at a ShareMagic URL, and we generate a custom branded card per page, pulling from your page’s actual title and description. No pipeline to build or maintain.

The protocol is simple. Consistent execution at scale is where most sites fall short.

Want beautiful link previews automatically?

ShareMagic generates branded OG images for every page on your site — no design work, no pipeline to maintain.

Try ShareMagic free →