Paste a link into Slack or iMessage and you usually get a title, a short description, and a thumbnail image, all pulled together into a preview card. That card doesn't come from the page's visible content -- it comes from Open Graph tags sitting in the <head> of the HTML, tags most people never look at until their own link shows up broken.
What Open Graph actually is
Open Graph is a protocol Facebook introduced so any webpage could describe itself the same way a Facebook post does -- with a title, description, image, and type. The tags look like this:
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Short summary here">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">
Every major platform that generates link previews -- Facebook, LinkedIn, Slack, Discord, WhatsApp -- reads these tags (or falls back to its own scraping logic if they're missing). It's a convention, not a legal requirement, but it's so widely honored that skipping it means your links show up with whatever the platform guesses instead: sometimes the page title, sometimes a random image it found, sometimes nothing at all.
Why the same page can look different in different apps
Twitter/X doesn't fully rely on Open Graph -- it has its own overlapping system called Twitter Cards, using twitter: prefixed tags instead of og:. If a page only has Open Graph tags, X will often still render something reasonable by falling back to them, but if you want control over how your link looks specifically on X (a larger "summary_large_image" card, for instance), you need the Twitter Card tags set explicitly alongside the Open Graph ones. That's why a link can look great in Slack and mediocre on X -- two different tag sets, and only one of them was filled in.
The image is the part that actually goes wrong
Most broken previews come down to the image tag, for a few recurring reasons:
- The
og:imageURL is relative (/images/preview.jpg) instead of absolute -- some crawlers won't resolve it. - The image is too small. Most platforms want at least 1200x630px for a large preview card; anything smaller gets cropped oddly or rejected.
- The page is behind a login or bot-blocking rule, so the crawler fetching the preview can't reach the image at all.
- There's simply no
og:imagetag, so the platform falls back to the first<img>it finds on the page -- which is often a logo or an ad.
Caching makes fixes feel like they didn't work
One more thing that trips people up: once a platform has scraped and cached your link preview, it usually won't re-check it for a while, sometimes days. If you fix your tags and the old broken preview still shows up, that's caching, not a failed fix -- most platforms have a debugging/cache-refresh tool (Facebook's Sharing Debugger, LinkedIn's Post Inspector) specifically for forcing a re-scrape.
Building the tags without memorizing the spec
You don't need to hand-write these tags or remember the exact property names every time. The Open Graph Tag Generator builds a full, correctly formatted set of og: tags from a simple form, and the Twitter Card Generator does the same for the twitter: tags -- so both platforms get proper preview data instead of whatever they can scrape on their own.