Why Your Links Look Broken When You Share Them

A link preview card with an empty crossed-out image slot above two filled text lines

You paste your link into Facebook and it comes up as a line of grey text with no picture. Or the picture is there and the wrong half of it. Nothing on the site looks broken, because nothing on the site is broken: the problem is in a handful of tags nobody sees, and it is the kind of fault that sits there for months. I spent an afternoon fixing mine and found three separate things wrong, so here is what to check and what the fixes actually are.

The tags that decide what the card looks like

When anything scrapes your link, it reads Open Graph tags out of the page head. Four matter: og:title, og:description, og:url and og:image. Facebook, LinkedIn, Messenger, Slack and X all read the same set, so this is one job rather than five.

If a page has none of them, the scraper falls back to guessing from the page: the title tag, the first paragraph, and whichever image it happens to like. That is where the grey text card comes from, and it is why the fix is not “add a nicer photo” but “say which photo”.

The image is almost certainly the wrong size

The documented size is 1200 by 630. This is the one I got wrong on my own site for months, and the cause is worth knowing because it will be the same on most WordPress sites.

My markup asked WordPress for the featured image at its large size. That sounds right. WordPress’s large is 1024 pixels wide. So every share card on the site was being built from a 1024 by 538 copy of an image that existed at exactly 1200 by 630, because I had asked for a named size instead of the one I meant.

The obvious repair is to ask for the full-size original instead, and on my site that would have made things worse. Two of my featured images are homepage screenshots that WordPress had already scaled to 2560 pixels wide and around 280 KB each, at aspect ratios of 2.2:1 and worse. Every platform would have cropped those to its own taste anyway.

What actually works is a dedicated image size at 1200 by 630, cropped, used only for share cards. Blog cards authored at that exact size pass through untouched; oversized screenshots get cut down once, predictably, by me rather than by five different scrapers.

Where you crop from is not a detail

I set that crop to centre, which is the default and sounds neutral. Then I looked at the result.

My screenshots are wider than 1.91:1, so it is the width that gets cropped, not the height. A centred crop took 196 pixels off each side. On one card that removed the first letter of the hero headline and turned the label above it from “PAVER SEALING ACADEMY” into “VER SEALING ACADEMY”.

Anchoring the crop to the left fixed it. In a left-to-right layout the logo, the navigation and the headline all begin at the left edge, so that is the edge worth keeping; what falls off the right is usually a button. Anchor the vertical to the top for the same reason: the useful part of a homepage is its header and hero, and a centred crop removes precisely that.

None of this was reasoning. I generated the card, opened it, and saw the beheaded headline.

Tell the scraper the dimensions

og:image:width and og:image:height are optional and worth adding. With them, a scraper can lay out the card before it has finished downloading the file, which is the difference between a preview appearing immediately and appearing a beat late or not at all on the first paste.

One condition: read the numbers from the same place you read the URL, so they cannot drift apart. A declared size that disagrees with the actual file is worse than declaring nothing, because now the scraper has been told something false. On my site two cards legitimately come out 1200 by 607 and 1200 by 523, because the source screenshots are not 630 tall and WordPress will not upscale. The tags say 607 and 523, because that is what the files are.

The description comes from somewhere you forgot

On most WordPress setups the share description traces back to the post excerpt. Leave the excerpt empty and something still appears, because WordPress generates one from the opening of the post.

That generated text starts wherever the post starts and gets cut at around 155 characters. One of my posts was sharing itself as “I get asked this a lot, usually by someone who’s already been told the wrong answer by whoever they talked to before me. So let me be direct: there…” That is a sentence from the middle of a conversation, offered to somebody who has not had it.

Write the excerpt. Two sentences, under 155 characters, saying what the page is for. It is the same field the search result uses, so it is two jobs for one piece of work.

How to actually check it

Do not paste the link into Facebook and judge by eye. Both Facebook and LinkedIn have their own debugging tools that show you exactly what they read, and both cache aggressively; their tools also let you force a re-scrape, which is the only way to see a fix take effect on a link you have already shared.

That caching is the reason for the most common false alarm here. You fix the tags, paste the link, see the old broken card, and conclude the fix did not work. It did; you are looking at a stored copy of the page from before it.

Why it is worth an afternoon

A share by somebody else is the only distribution you get for free. Somebody thought your page was worth passing to a colleague, and the card is what that colleague sees before deciding whether to click.

It will not change your rankings. Open Graph tags are not a search signal and nobody should tell you otherwise. What they change is the click-through on every link anyone shares, which is a smaller claim and an easier one to keep.

If the page behind the card is the problem rather than the card, that is different work, and it starts with the same ground as why your WordPress site feels slow. A performance audit covers both: what your pages score, and what they are telling search engines and scrapers about themselves.

← Back to the blog