Open Graph tags and link previews, explained
When someone shares a link, the platform fetches the page and looks for Open Graph meta tags to build the preview card: a title, a description and an image. Open Graph was created by Facebook and is now read by LinkedIn, WhatsApp, Slack, Discord, iMessage, Bluesky and many others. X also reads its own Twitter card tags and falls back to Open Graph for the title, description and image. Without these tags you get a bare link or a random image from the page.
The tags every page needs
<meta property="og:type" content="website">
<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:alt" content="What the image shows">
<meta name="twitter:card" content="summary_large_image">
Open Graph tags use the property attribute, Twitter tags use name. Put them in the <head> of the HTML that the server sends: platforms don't run JavaScript, so tags added later by a single-page app are invisible to them.
The og:image size
| Size | What you get |
|---|
| 1200 × 630 px (1.91:1) | The reference size: a sharp large card everywhere |
| 600 × 315 px or more | Still a large card, softer on high-resolution screens |
| Smaller, or square | A small thumbnail next to the text on most platforms |
| Below 200 × 200 px | Facebook ignores the image |
Keep text and logos away from the edges: platforms crop other ratios from the centre, and X puts the title on top of the bottom-left corner. Use PNG or JPEG, keep the file well under a few megabytes and use an absolute https URL. You can make one with the screenshot beautifier at the Open Graph size.
Title and description length
Titles of up to about 60 characters show completely on almost every platform; longer ones are cut, often after the first line. Descriptions of 100 to 160 characters fit the one or two lines that Facebook, X's summary card, Slack and WhatsApp show; LinkedIn and X's large card don't show the description at all, so the title and image must stand on their own.
og:url and the canonical URL
og:url tells platforms the preferred address of the page, so likes and shares from different URLs (with tracking parameters, with or without www) count together. It should match <link rel="canonical">, which does the same for search engines.
Why your old preview keeps showing
Platforms cache link previews, sometimes for a week or longer. After you change the tags, ask them to fetch the page again: the Facebook Sharing Debugger (also used by WhatsApp and Instagram) has a "Scrape again" button, and the LinkedIn Post Inspector refreshes LinkedIn's copy. X no longer has a public card validator; check the card in a draft post. Slack and Discord refresh on their own after a while.
Google uses different tags
Search results show the <title> and meta name="description", not Open Graph, and Google may rewrite both. Fill in both sets of tags: they can be the same text.
How the check works
Browsers can't read another website's HTML directly, so the page is fetched through a public CORS proxy (allorigins, with corsproxy.io as a fallback); those services see the URL you check. Sites with bot protection may block it, and the proxy sees what a server sees, not what a logged-in user sees. For private, staging or protected pages, paste the HTML source: then nothing is sent anywhere. The image is loaded straight from its URL to measure it.