You paste your link into a chat or a post and it shows up as a bare URL — no title, no image, no description. That empty preview is costing you clicks, and the fix is a handful of meta tags.
Share a well-set-up link and it blooms into a rich card: a big image, a bold title, a line of description. Share a badly-set-up one and it's a naked URL, or a card with the wrong image and a title pulled from who-knows-where. That difference is entirely down to a few meta tags in your page's <head>, and since the preview is often the only thing a person sees before deciding whether to click, getting it wrong quietly costs you traffic on every share.
What Open Graph is
The system behind those cards is the Open Graph protocol. Its own specification describes the goal:
"The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook."
— The Open Graph protocol (ogp.me)
Originally from Facebook, it's now the de facto standard that messaging apps, social platforms, and chat tools read to build link previews. Add the tags and your page tells every platform exactly how to present itself.
The four tags you actually need
The protocol has many properties, but four carry almost all the weight:
og:title— the headline on the card. Not necessarily your<title>tag; you control it separately.og:description— the line of text under the title.og:image— the picture, and the single biggest driver of whether anyone clicks.og:url— the canonical URL the card should point to.
Set those four correctly and you've handled the overwhelming majority of link-preview quality. Everything else is refinement.
Why the image is the part that breaks
The og:image is where previews most often go wrong, and usually for one of two reasons. First, dimensions: platforms want a reasonably large landscape image (around 1200×630 is the widely-used target), and an image that's too small, wrong-shaped, or square gets cropped awkwardly or rejected in favour of nothing. Second, the URL must be absolute (https://…), not a relative path — a relative og:image that works on your page fails when a remote platform tries to fetch it. If your title and description show but the image doesn't, it's almost always the size or a relative URL.
The caching trap
Here's the one that makes people think they're going mad. Platforms aggressively cache the preview the first time a link is shared. So you paste your link, see a broken or old card, fix your tags, paste again — and it's still broken, because the platform is showing its cached version, not re-reading your page. The fix isn't more tag changes; it's forcing a refresh through the platform's own sharing debugger, which re-scrapes the page and updates the cache. Chasing a "broken" preview by editing tags over and over, when the real problem is a stale cache, wastes a lot of time. Change the tags once, then clear the cache.
Twitter Cards and the platform-specific layer
Open Graph covers most platforms, but Twitter (now X) has its own parallel system called Twitter Cards, using twitter:card, twitter:title, and twitter:image meta tags. If Twitter-specific tags are absent, the platform falls back to Open Graph — so OG tags are a good default. But Twitter Cards add one property worth knowing: twitter:card controls the card layout itself. Set it to summary_large_image and your link gets the full-width image card; leave it out and you get a small thumbnail. LinkedIn, Slack, Discord, and iMessage all read OG tags natively. The practical rule is: get OG tags right first, then add twitter:card as the one platform-specific property that genuinely changes the result.
Dynamic pages and server-side rendering
Single-page applications built with React, Vue, or Angular often fail to produce link previews at all, because the OG tags are injected by JavaScript after the page loads — and most platform crawlers don't execute JavaScript. They fetch the raw HTML, find no meta tags, and render a bare link. The fix is server-side rendering (SSR) or static pre-rendering for any page that needs to be shared: the tags must be present in the initial HTML response, not added later by a framework. This catches teams who test their previews by viewing page source in a browser (which shows the JS-rendered result) instead of fetching the raw response (which is what the crawler sees). If your SPA's links preview as blank, the tags aren't missing — they're arriving too late.
Character limits and truncation
Each platform truncates OG fields at different lengths, and none of them tell you where the cut falls. Titles over about 60 characters get clipped on most platforms; descriptions over 150–200 characters are trimmed. An og:title that works perfectly on LinkedIn may lose its last three words on Twitter. Write both fields as if the platform will cut them short, because it will — front-load the meaning, and don't rely on the last word of the title to carry the point.
Preview before you post
The reliable workflow is to check the card before you share it anywhere public. An Open Graph preview tool renders how your page will actually look as a shared card, so you catch a missing image or a truncated title before it goes out — not after it's cached wrong across three platforms. Confirm your og:url and og:image are absolute, correctly-formed links with a URL parser, since relative URLs are the number-one image failure. And size that share image to the right landscape dimensions with an image resizer so it fills the card cleanly instead of getting cropped or refused. A link is a first impression — a few meta tags decide whether it lands as a polished card or a bare, ignorable URL.