Open Graph tags fail in the most inconvenient way possible: silently. The page loads perfectly. Search results look fine. Nothing in your content management system warns you. And then somebody shares the link on WhatsApp and it arrives as a naked URL, or on LinkedIn with the wrong image and a sentence lifted from your cookie banner.
By the time you notice, the post is already out there.
What these tags do
When a link is pasted into Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram or a dozen other places, that platform fetches the page and looks for a specific set of meta tags describing how the link should be presented. That set is the Open Graph protocol, originally created by Facebook and now the de facto standard everywhere.
If the tags are there, you get a card: image, headline, description, source. If they are missing, each platform falls back to guessing — usually the <title> tag, the meta description if there is one, and whichever image on the page it decides looks important. Sometimes that guess is fine. Often it is your logo, a stock icon, or nothing at all.
The four tags that matter
og:title is the headline on the card. It does not have to match your page title, and often should not — the page title is written for search results and may carry a brand suffix that wastes space in a card.
og:description is the line underneath. One or two sentences. Platforms truncate at different lengths, so front-load the important part.
og:image is the one that does the work. A link with an image occupies several times the visual space of one without, and that difference in a crowded feed is the difference between being noticed and scrolled past.
og:url is the canonical address of the page. This matters when the same content is reachable at several URLs — with tracking parameters, for instance. Setting og:url means shares of all those variants are counted as shares of one page.
Getting the image right
More link previews are ruined by the image than by anything else, and there are three common causes.
Wrong dimensions. The safe size is 1200 by 630 pixels, a ratio of roughly 1.91:1. Supply something squarer and platforms crop it, usually from the centre, usually through the middle of whatever text you put on it.
A relative URL. The image path must be absolute — https://example.com/image.jpg, not /image.jpg. The platform is fetching from its own servers and has no way to resolve a relative path. This is easily the most common reason an image silently fails to appear.
Too large a file. Some platforms refuse images over about 5 MB. A large uncompressed screenshot can exceed that without you noticing.
Twitter Cards
X uses its own tag set, prefixed twitter:, though it falls back to Open Graph when those are absent. In practice you need one extra tag, twitter:card, set to summary_large_image for a full-width image or summary for a small thumbnail beside the text.
If you set nothing at all, X generally falls back to a small card, which wastes the image you prepared.
Why the tags are right but the preview is wrong
Two answers, and both catch people out.
Caching. Platforms cache what they fetch, sometimes for weeks. Fix your tags and reshare, and you will very often see the old broken preview because the platform never re-fetched. Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a button to force a refresh. Use them after any change, then test the share again.
JavaScript. If your tags are inserted client-side after the page loads, most platform crawlers will not see them. Unlike Googlebot, these crawlers generally do not execute JavaScript. They fetch the HTML, read it, and leave. Your tags must be in the server's response.
How to check before you publish
The reliable method is to look at what the server actually returns, rather than at what your CMS says it configured. Fetch the page and read the tags — our Meta Tags Checker lists every Open Graph and Twitter tag a page serves, along with the title, description and canonical URL.
Then run the page through Facebook's Sharing Debugger and LinkedIn's Post Inspector, both of which show the rendered card and let you clear the cache. Between the three you will see any problem before your audience does.
A minimum viable set
If you add nothing else, add these five:
og:title— the headline for the cardog:description— one or two sentencesog:image— absolute URL, 1200 × 630og:url— the canonical addresstwitter:card—summary_large_image
It is perhaps twenty minutes of work on a template, applied once, affecting every link anyone ever shares. Few things on a website return that much for that little.
