Open graph tags are the handful of <meta> lines in your <head> that tell social platforms, messaging apps, and link-preview tools how to display your URL when someone shares it. Get them right and your link shows up with the correct title, a sharp image, and a description that earns the click. Skip them and the platform guesses — usually badly.
That's the whole deal. Four tags do most of the work. The rest of this post explains each one, shows what breaks without them, and ends with the minimal block you need on every page. If you want to see how OG fits into the wider picture of meta tags for SEO and social sharing, start there.
What is Open Graph?
Facebook created the Open Graph protocol in 2010 and published it at ogp.me. The goal was simple: give website owners a standard way to define what a page is and how it should be represented when linked anywhere outside the page itself. You declare metadata using <meta property="og:..."> tags in the document <head>, and any app that knows the protocol reads those tags instead of guessing.
The protocol took off fast because it solved a real problem. Before OG, every platform scraped pages differently and made its own choices about which image to pull, which heading to use as a title, and what to show as a description. The results were unpredictable — often embarrassing. OG gave everyone a single source of truth to read from.
Today, LinkedIn, Slack, Discord, iMessage, WhatsApp, and a long list of others all read Open Graph tags. It's not a Google thing at all — Google has its own signals for search — but for social, OG is the standard.
The four tags that carry the weight
The spec defines a lot of optional properties, but four are required and they're the ones that actually control what you see in a preview card.
<meta property="og:title" content="Open Graph Tags Explained: og:title, og:description, og:image, og:type">
<meta property="og:description" content="What each OG tag does, the mistakes that break previews, and the minimal block every page needs.">
<meta property="og:image" content="https://example.com/images/open-graph-tags-explained.jpg">
<meta property="og:type" content="article">
Here's what each one does.
og:title
The title that shows up in the preview card — not necessarily the same as your <title> tag. They're separate. A common pattern is making og:title slightly longer or more social-friendly than the SEO title, since a share card has more visual space than a search result line. You still want it clear and direct.
Keep it under 90 characters so nothing gets clipped on the smaller preview formats.
og:description
The description under the preview title. LinkedIn shows the first ~300 characters; Facebook tends to cut around 200; Slack is tighter still. Write for the shortest format and you're covered everywhere. This isn't a ranking factor, it's a click-through factor — make it interesting.
Don't recycle the og:title word for word.
og:image
The preview image. This is where most things go wrong (there's a whole section on it below). The short version: use an absolute URL, aim for 1200×630 pixels at a 1.91:1 aspect ratio — which is what the ogp.me spec specifies — and stay under 8 MB so crawlers don't time out before fetching it. See the dedicated og:image size guide for the full breakdown including safe zones and per-platform quirks.
og:type
Tells platforms what kind of content this is. The two you'll actually use are website (for homepages and landing pages) and article (for blog posts, news, any dated content). The article type unlocks additional optional properties like article:published_time and article:author — platforms that surface publication dates (LinkedIn, for instance) pick those up. For everything else, website is the safe default.
The og:image absolute-URL gotcha
This is the one that catches everyone. Your og:image must be an absolute URL — protocol, domain, and full path. No exceptions.
<!-- Wrong — relative paths break in every crawler -->
<meta property="og:image" content="/images/my-hero.jpg">
<!-- Right -->
<meta property="og:image" content="https://yoursite.com/images/my-hero.jpg">
Why? Because the Open Graph crawler fetches your page, then goes off to download the image separately. It's not your browser — it has no base URL context to resolve a relative path from. A relative path returns a 404 for the crawler every single time, and the preview card renders with no image.
Same rule applies to og:url if you include it (which you should — it canonicalises the shared URL). Absolute. Always.
og:image:alt — the one nobody adds
Once you've got your image sorted, add this too:
<meta property="og:image:alt" content="Screenshot showing open graph tag code in a browser developer tools panel">
og:image:alt is the alt text for your preview image. Screen readers that encounter shared cards read it out. It's not optional from an accessibility standpoint, and it's a four-second addition. Add it.
What breaks without Open Graph tags
Without any OG tags, platforms fall back to their own heuristics. In practice, that means:
- Title: usually the first
<h1>or<title>they find — not necessarily the one you want - Description: often the first paragraph of body text, or nothing
- Image: the first
<img>large enough to pass their threshold — frequently a logo, an icon, a nav element, or nothing at all
The result is unpredictable in ways that are hard to debug because you're not the one doing the sharing. A colleague pastes your URL in Slack and it looks like garbage. A piece you spent two hours writing shows up on LinkedIn with a headshot from the sidebar. A link shared on Twitter cards blank because the fallback image was too small.
None of that shows up in your analytics as "broken," which is why it stays broken for so long.
Open Graph and Twitter/X Cards
Twitter/X has its own card system (twitter:card, twitter:title, etc.), but it falls back to your Open Graph tags when the Twitter-specific ones are missing. So if you implement OG properly, you're already most of the way there for Twitter. The main thing you actually need to add is twitter:card to choose the preview format — use summary_large_image for the big card layout.
The full comparison of when OG is enough and when you need both: Twitter Cards vs Open Graph.
For the framework side — if you're on Next.js and want typed, structured metadata that makes duplicate-tag bugs structurally impossible — the whole setup is in meta tags in Next.js.
The minimum viable OG block
Here's the block I put on every page, no exceptions:
<head>
<!-- Required Open Graph -->
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A description that earns the click, under 200 characters.">
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg"> <!-- absolute URL, 1200×630 -->
<meta property="og:image:alt" content="Describe what's in the image">
<meta property="og:type" content="article"> <!-- or "website" for non-post pages -->
<meta property="og:url" content="https://yoursite.com/your-page-slug">
<!-- Twitter/X — falls back to OG for the rest -->
<meta name="twitter:card" content="summary_large_image">
</head>
Seven lines. That's it. og:image:width and og:image:height are technically optional but worth including if you know your image dimensions — some crawlers skip the layout calculation step when the dimensions are declared, which means faster rendering. Add them like this:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Once this is live, test it in the Facebook Sharing Debugger and the LinkedIn Post Inspector. Both show exactly what they're reading and let you force a cache refresh when you've updated tags and the old preview is stubbornly sticking around.
Sources (retrieved 2026-06-03):
- The Open Graph protocol — tag definitions, required properties, image ratio — ogp.me