Social Preview
Definition
A social preview is the block LinkedIn, Facebook, X, Pinterest or Mastodon draws under a shared link. The platform's crawler fetches the page, reads its Open Graph tags, and assembles a card from og:title, og:description and og:image, falling back to the title tag and the first usable image if those are missing. X reads its own twitter:card family too, where summary_large_image gives the wide banner and summary gives the small square thumbnail. The image is the part that does the work: 1200 by 630 pixels is the usual target, under about 5 MB, in JPEG or PNG, referenced by an absolute https address rather than a relative path. Everything is read once, at crawl time, from the HTML the crawler is served.
Why It Matters
A post with a proper card takes up roughly three times the vertical space in a feed as a naked link, and people click what they can see. Get the image wrong and the damage is oddly durable, because platforms cache the card against the URL. Fix a typo in og:title an hour after posting and the old headline keeps appearing on every new share of that same address, sometimes for a week. Teams often discover this during a launch, when the placeholder image they meant to replace is already sitting on 400 reposts.
How It Works
The crawler issues a GET for your URL with its own user agent — facebookexternalhit, LinkedInBot, Twitterbot — and reads only the markup that comes back in that first response. It stores the resulting card in a cache keyed by the exact URL, including query string, so my-page and my-page/ can hold different cards. Replacing the image file at the same address does not refresh anything, because the cache is keyed by page URL, not by image contents. Two fixes work: run the URL through the platform's own debugger, which forces a re-crawl, or change the address the tag points at, for example by publishing banner-v2.png instead of overwriting banner.png. On 99helpers the tags live in the file you upload, and version history lets you correct them and republish at the same address in seconds.
Real-World Example
An agency posts a case study at rebrand-case.99helpers.site with no og:image set. LinkedIn picks a 180-pixel logo from the footer and the card renders as a grey smear. They add og:image pointing at a 1200 by 630 JPEG, republish, and nothing changes — the card is cached. Uploading the banner as a new file name and updating the tag to match produces the correct card on the next share, and the reposted link earns four times the clicks of the first attempt.
Common Mistakes
- ✕Using a relative path in og:image — crawlers do not resolve it, so the card falls back to whatever stray image it can find
- ✕Overwriting the image file and expecting the card to update — the preview is cached against the page URL, so the stale version keeps appearing
- ✕Writing og:description as a keyword list rather than a sentence — it appears verbatim under the headline and reads like spam
Related Terms
Link Preview
The general behaviour of software fetching a pasted URL and rendering a summary of it — in chat apps, messaging clients, email, note tools and feeds. A social preview card is one visible result of it.
Open Graph Tags
Meta tags in the head of a page that tell other sites how to draw a link to it — the title, the summary and the picture in a shared card. Without them a link shows as a bare URL.
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.
Link Sharing
Link sharing means sending someone a web address that points at your file, rather than sending a copy of the file itself. One address, one source of truth, any number of recipients.
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 →