You publish a page, paste the link into a chat or a social post, and the card shows the wrong picture, no picture, or last month's title. The page is fine; the tags are not, or the platform is showing a copy it read earlier. This article lists the tags that matter, works through how each platform crops a share image with real numbers, and ends with the mistakes behind most broken previews. You can build and check the tags in the Open Graph and meta tag generator as you read.
The tags a page actually needs
Platforms read a small set of tags from the page's <head>. For a typical article this is enough:
<title>How to brew pour-over coffee at home</title>
<meta name="description" content="A step-by-step pour-over guide: the 1:16 ratio, a 30-second bloom and about three minutes in total." />
<link rel="canonical" href="https://example.com/guides/pour-over-coffee" />
<meta property="og:type" content="article" />
<meta property="og:title" content="How to brew pour-over coffee at home" />
<meta property="og:description" content="A step-by-step pour-over guide: the 1:16 ratio, a 30-second bloom and about three minutes in total." />
<meta property="og:url" content="https://example.com/guides/pour-over-coffee" />
<meta property="og:image" content="https://example.com/images/pour-over-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A glass pour-over dripper on a mug" />
<meta name="twitter:card" content="summary_large_image" />Three details decide whether this works:
- Open Graph uses `property`, not `name`. Most parsers forgive it, a few do not. X's own tags use
name. - Every URL is absolute.
og:imageset to/images/card.jpgis not resolved against the page by most crawlers. Write the fullhttps://address. - `twitter:card` is the one X tag you cannot skip. X falls back to
og:title,og:descriptionandog:image, but withouttwitter:cardset tosummary_large_imageit shows the small square layout or nothing.
og:image:width and og:image:height are optional, but they let Facebook draw the card on the first share instead of waiting until it has downloaded and measured the image.
How each platform crops a 1200 x 630 image
1200 x 630 is the size most platforms recommend: Meta asks for at least 1200 x 630 for sharp results (600 x 315 is its minimum before the card shrinks to a thumbnail), and LinkedIn asks for 1200 x 627. The ratio is 1200 / 630 = 1.905, close to the 1.91:1 that Facebook and LinkedIn draw. Other layouts crop it. Assuming a centred crop, which is what they usually do:
| Where | Card ratio | Part of a 1200 x 630 image kept | Lost |
|---|---|---|---|
| Facebook, LinkedIn | 1.91:1 | 1200 x 628 | 1 px top and bottom |
| X large card | 2:1 | 1200 x 600 | 15 px top and bottom |
| X summary card, many chat apps | 1:1 | 630 x 630 | 285 px left and right |
The last row is the one that surprises people: a square thumbnail keeps barely more than half the width. So design the image with a safe area: anything that must survive every crop goes in the central 600 x 600 pixels (the square crop is 630 wide, the 2:1 crop is 600 high). Logos in a corner and text running edge to edge are the first to go.
Square images go the other way. A 1080 x 1080 Instagram picture used as og:image on a 1.91:1 card keeps 1080 x 565: 257 pixels are cut from the top and from the bottom, which often removes a face or a headline. Make a separate 1200 x 630 version; the image crop tool does it with a fixed frame.
Titles and descriptions: how long?
There is no single limit, because each platform cuts at a different place:
- Google cuts titles by pixel width, about 600 px on desktop, which is roughly 50 to 60 characters.
- X's card markup accepts 70 characters of title and 200 of description.
- Facebook usually shows one or two lines of title and may hide the description entirely on phones.
A practical target is a title under 60 characters that starts with the words that matter, and a description of 110 to 160 characters that makes sense when cut after the first sentence. The generator counts characters the way readers do, so "Cà phê" is six characters, not eight code units.
Why the old picture keeps coming back
Platforms read a URL once and keep the result. Change og:image and the next share often still shows the old one. What helps:
- Facebook: open the Sharing Debugger, enter the URL and press "Scrape again".
- LinkedIn: the Post Inspector re-reads the page when you inspect it.
- X has no public refresh button now; the card updates after its cache expires.
- Everywhere: give the new image a new file name (
card-v2.jpg). A changed URL is a new image to every cache, including CDNs.
Common mistakes
- Relative `og:image`. The most frequent cause of a card without a picture.
- The image is behind a login, a firewall rule or `robots.txt`. Crawlers such as
facebookexternalhitmust be allowed to fetch it. - A huge or exotic file. Keep it a JPEG or PNG under a few megabytes; WebP and AVIF are not read everywhere.
- Different text in `og:title` and `<title>` by accident. It is allowed, but it is usually a forgotten template default such as "Home".
- No `og:url` or canonical on pages with tracking parameters. Shares of
?utm_source=...URLs then count as different pages. - Testing only on your own feed. Paste the link into a private chat on each platform before announcing it.
Try it
Paste your current page source into the Open Graph and meta tag generator under "Start from an existing page's HTML". The checks list shows a relative image or an over-long title at once, and the previews show how a square crop treats your picture. Pick the image file from your computer to see it in the cards; nothing is uploaded.