Open Graph Tags: How to Control How Your Links Look When Shared
Paste your link into Slack and get a bare URL with no image? Open Graph tags fix that. Learn the essential tags, image sizes, and why you must re-scrape.
The launch post goes out. You paste the link into the company Slack, and it renders as a naked blue URL — no title, no image, no description. Meanwhile a competitor’s link two messages up has a crisp card with a headline and a screenshot. Same effort spent on the actual page; wildly different first impression.
The difference is about eight lines of HTML. Here is what they are and how to stop them silently breaking.
What Open Graph is
Open Graph is a small set of <meta> tags that tell any platform reading your page how to represent it: what the title is, which image to use, what the summary says.
It started at Facebook, but it became the de-facto standard. Slack, LinkedIn, WhatsApp, Discord, iMessage, Signal, Teams, and most link-preview features in other apps all read OG tags. X/Twitter reads its own twitter: tags first and falls back to OG for anything it does not find.
That is the practical upshot: write OG tags once and nearly every platform is covered.
The essential tags
These live in the <head>, and unlike most meta tags they use the property attribute rather than name:
<meta property="og:title" content="Compress Images Without Uploading Them">
<meta property="og:description" content="A free, browser-based image compressor. Your files never leave your device.">
<meta property="og:image" content="https://example.com/og/image-compressor.png">
<meta property="og:url" content="https://example.com/tools/image-compressor">
<meta property="og:type" content="website">
<meta property="og:site_name" content="MyDailyKit">
<meta property="og:image:alt" content="A photo being compressed from 4 MB to 380 KB">og:title— the headline on the card. It need not match your<title>; a SERP and a Slack card are different contexts, and the card usually wants something shorter and punchier.og:description— one or two sentences. Many platforms truncate hard, so front-load it. Some show nothing at all.og:image— the tag that decides whether anyone notices the link. Details below.og:url— the canonical URL. Platforms use it to consolidate shares of the same page arriving with different tracking parameters.og:type— usuallywebsiteorarticle.articleunlocks extras likearticle:published_time.og:site_name— your brand, shown as a small label on many cards.og:image:alt— accessibility text for the image. Cheap to add, frequently skipped.
X/Twitter card tags
Add two or three lines and you control that surface too:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Compress Images Without Uploading Them">
<meta name="twitter:image" content="https://example.com/og/image-compressor.png">Note that twitter: tags use name, not property. The critical one is twitter:card:
summary— small square thumbnail beside the text.summary_large_image— the full-width image card. This is what you want in almost every case.
If you set twitter:card and nothing else, the title, description, and image fall back to your OG tags. That is a perfectly reasonable setup — add the extra twitter: tags only when you genuinely want different copy there.
The image is the whole ballgame
Everything else is text; the image is what stops a thumb. Get these right:
- Use 1200 × 630 pixels. The widely used safe size, landing on roughly the 1.91:1 ratio large-image cards expect. Sizes and crops differ per platform and change over time, so treat this as a sensible default rather than a spec.
- Absolute URLs only.
https://example.com/og/card.png, never/og/card.png. Relative image URLs are the most common reason a card renders with no picture. - Keep the file size reasonable. Scrapers time out. A multi-megabyte PNG fetches sometimes and not others, producing the maddening bug where the card appears for you and nobody else.
- Avoid small text in the image. Cards get scaled down hard, especially in compact chat layouts. Large type, high contrast, few words.
- Keep key content away from the edges. Platforms crop differently. Leave breathing room.
- Avoid transparency. A transparent PNG sits on whatever background the platform uses, including dark mode. Flatten it.
- Declare the dimensions with
og:image:widthandog:image:heightso platforms can lay out the card before the image downloads.
To get an existing asset to the right dimensions, the Image Resizer handles the crop and resize in the browser, and the Meta Tag Generator emits the full OG and Twitter block once you know the final URL.
Why cards silently break
Almost every failure is one of these:
- Relative image path. Renders fine in your own HTML, invisible to every scraper.
- The image is behind auth or on staging. If the crawler cannot fetch it anonymously, there is no card. Test the image URL in a private window.
- No
og:imageat all. Platforms then guess from page content, usually landing on a logo, an avatar, or nothing. - The image is blocked in robots.txt. Some scrapers respect it, and a disallowed image directory quietly kills your cards.
- A redirect chain on the image URL. Point directly at the final file.
- Tags injected by client-side JavaScript. Most scrapers read the raw HTML response and do not execute JS. OG tags must be in the server-rendered source.
- Duplicate tags. Two
og:imagedeclarations — one from your theme, one from a plugin — and you cannot predict which wins.
Platforms cache aggressively — you must re-scrape
This trips up everyone at least once.
The first time a URL is shared anywhere, that platform fetches your page and stores the result. Fix a typo in your og:title afterwards and it keeps serving the old card, sometimes for a long time, because it has no reason to look again.
So the order of operations matters:
- Get the tags right before the link is shared publicly.
- If you change them afterwards, use the platform’s own debugger or post inspector to force a fresh fetch. Most major platforms provide one, though names and availability change — check their current developer docs.
- As a last resort, changing the URL (a new slug, or a cache-busting parameter on the image) sidesteps the cache entirely.
The pragmatic habit is to preview the card before publishing, not after someone tells you it looks broken. The Open Graph Preview renders your tags across the common card layouts, so you catch a relative image path or a truncated title while it is still cheap to fix.
Quick answers
Are Open Graph tags a ranking factor? No. They affect how links look when shared, which affects clicks and referral traffic, not rankings directly.
Do I need both OG and Twitter tags? Not really. Set twitter:card for the large-image layout and let the rest fall back to your OG tags.
What size should the og:image be? 1200 × 630 (roughly 1.91:1) is the widely used safe default. Platforms crop differently, so keep key content centred.
Why does my card still show the old title? The platform cached it. Force a re-scrape with its debugger, or change the URL.
Can I use a different image per page? Yes, and you should. Generic site-wide cards perform far worse than ones that reflect the actual page.
The takeaway
Open Graph tags are the cheapest presentation win available: a handful of static lines in your <head> that decide whether your link looks like a designed product or a broken paste. Set the six essentials, ship a real 1200 × 630 image at an absolute URL, and preview the card before you publish — because after the first share, fixing it means asking the platform to look again.