Link preview tester
Paste a link into a chat and it turns into a card with a picture, a headline and a line of text. Or into a sad gray box. This check reads the tags that feed the card, measures the image and draws the result for six places.
What happens when you paste a link
The moment you paste an address into a post or a chat, a server belonging to that service requests the page. It doesn’t display it. It reads the first part of the HTML, looks for a handful of <meta> tags, downloads the picture one of them points to, and builds a card out of those pieces. Then it stores the card, and everyone who sees the link gets the stored version.
The tags follow a convention called Open Graph, which Facebook introduced in 2010 and nearly every network and messaging app now reads. Each one starts with og:. X reads the same tags and adds one of its own, twitter:card, to choose the layout.
The tags, in order of effect
og:image- The picture. More than anything else, it decides whether the link gets noticed. The address has to be absolute, starting with
https://. og:title- The headline of the card. Without it, services fall back to the
<title>tag, which often ends with a site name you didn’t want repeated. og:description- One or two sentences under the headline. The fallback is the meta description, and after that a passage the service picks for you.
twitter:card- Set it to
summary_large_imageand X shows the picture at full width. Without it you get a small square beside the text. og:url- The address that likes and shares are counted under. It should be the same as the page’s canonical URL.
og:site_name,og:type,og:locale,og:image:alt- Supporting details: the label above the headline in Slack and Discord, the kind of content, the language, and a description of the picture for screen reader users.
How the image is judged
Our server downloads the file named in og:image (or twitter:image when that’s the only one) and measures it against these thresholds.
| Measured | Result |
|---|---|
No og:image at all | Problem. If only twitter:image exists, this becomes a warning, since X has a picture and the others don’t. |
| File can’t be fetched, isn’t an image, or exceeds 5 MB | Problem |
| Smaller than 600 × 315 px | Problem. Facebook and LinkedIn shrink it to a thumbnail or drop it |
| Smaller than 1200 × 630 px | Warning. Shown, but soft on high-density screens |
| Width divided by height below 1.6 or above 2.2 | Warning. Cards are about 1.91 to 1, so the edges get cropped |
| Heavier than 1 MB | Warning. Some fetchers stop waiting |
Relative address such as /img/share.jpg | Warning. Several services need the full URL |
If you want a recipe that works everywhere, make one JPEG or WebP of 1200 × 630 pixels, under 300 KB, and keep any lettering away from the edges. The check also notes a missing title or description, a <title> longer than 60 characters, a description over 200, and an og:url that disagrees with the canonical link.
The six cards drawn in the results are reconstructions made from your tags. Your browser loads the picture from our server, in a reduced copy, so the tested site never sees your visit.
Adding the tags and refreshing old cards
The results end with a block filled in from what we found. It goes inside <head>:
<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">Watch the attribute. Open Graph tags use property= and the X tag uses name=. On a CMS you rarely type any of this by hand. WordPress SEO plugins, Shopify themes, Squarespace and Webflow all have a “social image” field per page and a site-wide default.
Fixing the tags doesn’t change cards that already exist. Each service keeps its stored copy for days or weeks. You can ask for a new fetch with Facebook’s Sharing Debugger or LinkedIn’s Post Inspector. In chat apps, adding an extra parameter such as ?v=2 to the link makes it count as a new address.
Two limits to keep in mind. Layouts change, so the drawings show which pieces appear, not the exact pixels. And the check reads the HTML without running scripts, which is also how the preview fetchers work. Tags inserted by JavaScript will be missing here, and they’ll be missing on the networks too.
Questions people ask
What size should an og:image be?
1200 × 630 pixels, a ratio of 1.91 to 1, in JPEG, PNG or WebP. Keep it under 300 KB if you can and under 1 MB whatever happens. Below 600 × 315, Facebook and LinkedIn stop showing it as a large card.
Why does my link show an old image after I changed it?
The service cached the card the first time the link was shared. Run the address through Facebook’s Sharing Debugger and press “Scrape Again”, or through LinkedIn’s Post Inspector. WhatsApp, iMessage and Slack have no such tool, so change the URL slightly to force a new card.
Does X still need twitter: tags?
Only one. X reads og:title, og:description and og:image when the twitter: versions are absent. Add twitter:card with the value summary_large_image to get the wide picture.
Why is there no preview at all when I paste my link?
It’s usually a page that needs JavaScript to produce its tags, a server or firewall that turns the preview bots away, a login wall, or an og:image address that returns an error. This check reports the image error when there is one.
Do Open Graph tags help search ranking?
No. Search engines build their snippets from the title tag and the meta description. Open Graph tags only shape how the link looks where people share it, and that affects how many of them click.