Open Graph Tags
Definition
Open Graph is a small vocabulary of meta tags, each using a property attribute rather than a name attribute. Four carry most of the weight: og:title, og:description, og:image and og:url. Facebook published the protocol in 2010 and it became the common standard by default — Slack, WhatsApp, LinkedIn, Discord, Signal and iMessage all read the same tags, while Twitter layers its own twitter:card family on top and falls back to Open Graph when those are absent. og:image must be an absolute address, since the crawler that fetches it has no page context in which to resolve a relative one. The tags are separate from the meta description used in search results, and the values do not have to match, because the audiences do not.
Why It Matters
A link with a card occupies several times the space of a bare URL in a feed or a Slack channel, and it gets clicked in proportion. Shape matters as much as presence: the 1200 by 630 pixel convention exists because platforms crop to roughly 1.91 to 1, so a 400 by 400 logo is either letterboxed in grey or cut through the middle of the wordmark. The costly surprise is caching. Every platform stores the card, including the picture, against the URL it scraped, so a corrected image uploaded over the old filename changes nothing for anyone — the old card keeps circulating in every conversation it was already pasted into, sometimes for weeks.
How It Works
When someone pastes a link, the receiving platform sends its own crawler — facebookexternalhit, Slackbot-LinkExpanding, Twitterbot and their equivalents — to fetch the HTML and read the head only. It assembles a card from og:title, og:description and og:image, fetches that image once, and stores the result keyed on the URL. There is no cache invalidation you can trigger from your own side, which is why replacing the file at the same address does not refresh anything. The reliable fix is to publish the new picture at a new address, such as /og-v2.png, point og:image at it, and then run the page URL through the platform's own tool — the Sharing Debugger for Facebook, the Post Inspector for LinkedIn — to force a rescrape. Keep the image at 1200 by 630 and comfortably under 5 MB, as several platforms drop larger files without saying so.
Real-World Example
A charity uploads a campaign landing page to 99helpers, live at riverside-appeal.99helpers.site, with a photo at /images/hero.jpg named in og:image. The first Slack share renders perfectly. A week later someone uploads a better crop over the same filename, and every card already posted — Slack, WhatsApp, the LinkedIn update — still shows the original. Publishing the new crop as /images/hero-2.jpg and updating og:image fixes new shares at once, and the version history on 99helpers means the first photo is still one click away if the new crop turns out to be worse.
Common Mistakes
- ✕Giving og:image a relative path — the scraper fetches the image on its own, with no page to resolve against, so the card comes back blank
- ✕Replacing the image file at the same address and waiting for cards to update — platforms cache by URL and will not refetch it
- ✕Using a square logo — the card is close to 1.91 to 1, so the picture is cropped through the middle or padded with grey bars
- ✕Omitting og:url, so three addresses for the same page collect three separate caches and three separate share counts
Related Terms
Meta Description
A one-line summary of a page, written into a meta tag in the head of the HTML, that search engines often show as the grey text under a result. It affects clicks, not rankings.
Landing Page
A page built for one purpose, which people reach directly from an ad, an email or a shared link. It is judged by the share of visitors who do the one thing it asks.
Favicon
A favicon is the small icon a browser shows for a site — in the tab, in bookmarks, in history and on a phone home screen. It is a file in the site, pointed to from the HTML or found at a fixed path.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Cache Invalidation
Getting rid of cached copies of a file that is no longer correct, so visitors stop being served the old version. There are two ways to do it, and only one of them is reliable.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →