Social & technical SEO guide
Open Graph and Twitter Cards: the tags that decide how a link looks shared
When a link is pasted into Slack, iMessage, LinkedIn, or shared on X or Facebook, the platform doesn’t show the raw URL — it fetches the page and builds a card from a specific set of meta tags. Get them right and the card is the same reason someone clicks; get them wrong and the platform guesses, badly, or shows nothing at all. The checker above fetches the page and reads exactly what those platforms would see.
The tags that matter
<meta property="og:title" content="How We Cut Load Time by 70%">
<meta property="og:description" content="Three changes, no rewrite.">
<meta property="og:image" content="https://example.com/og/load-time.png">
<meta property="og:url" content="https://example.com/blog/load-time">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">- og:title, og:description, og:image — the three that build the card. Facebook, LinkedIn, Slack, iMessage and most others read Open Graph tags whether or not a page has Twitter-specific ones.
- og:image must be an absolute URL —
https://example.com/x.png, never/x.png— because the crawler fetching it has no page to resolve a relative path against. - og:url — the canonical URL for the shared page. Without it, a share of a link with tracking parameters can get cached under the wrong address.
- twitter:card — set to
summary_large_imagefor a full-width image card. When absent, X still falls back to the Open Graph tags above, so it’s a nice-to-have, not a requirement, as long as og:image is set.
What breaks a share card in practice
- No og:image at all. The most common failure, and the costliest — a text-only card gets a fraction of the clicks an image card does.
- A relative og:image path. Works when tested on the live domain, silently fails when copy-pasted onto a staging URL or a different subdomain during testing, then ships broken.
- A description over ~200 characters. Every platform truncates differently and none publish the exact limit — write short and the ending never gets cut off mid-sentence.
- og:url on a different domain than the page. Usually a copy-pasted template left over from a staging environment or a different site.
Frequently asked
Do I need separate twitter: tags if I already have og: tags?
No, not to get a working card. Only add twitter:title or twitter:description when you want X specifically to show different copy than everywhere else — otherwise the fallback to Open Graph is exactly what most sites rely on.
What size should og:image be?
1200×630px is the safe default nearly every platform renders well, at roughly a 1.91:1 ratio. Square or portrait images get cropped unpredictably in the wide card format most platforms now default to.
Why does the preview here look different from what I see in Slack?
Every platform crops, truncates, and caches differently, and some (Slack, X, Facebook) keep their own cache of a URL’s card for hours or days after the tags change. The preview above is a reasonable approximation of the most common layout, not a pixel match for any one platform.
My card looks right in some places and wrong in others — why?
Almost always a stale cache on the platform showing it wrong, not the tags. Facebook’s Sharing Debugger and X’s Card Validator both have a “re-scrape” button for exactly this.
