Open Graph mistakes, in order of how often they happen

Most broken link previews come from a short list of recurring mistakes, and the frequent ones are all cheap to fix. Here they are roughly in the order I’ve seen them, each with the fix and the check.

Work down the list on any site with preview problems and you’ll usually find it in the first five.

1. No tags at all

The card is built from whatever the platform can guess — often the page title plus some navigation text, and no image.

Fix: add og:title, og:description, og:image, og:url to your site’s head template.

Check: curl -s <url> | grep -i 'og:' returns something.

2. Tags added client-side

Present in devtools, absent from the served HTML, because a script adds them after load. Preview crawlers mostly don’t run JavaScript.

Fix: render them server-side, in the initial HTML response.

Check: the same curl — it doesn’t run JavaScript, so it sees roughly what a crawler sees.

3. name instead of property

<meta name="og:title" content="…">   <!-- wrong -->
<meta property="og:title" content="…"> <!-- right -->

Open Graph uses property. Twitter tags use name. Backwards is invisible to strict parsers and looks completely fine in review.

Fix: property for og:* and article:*, name for twitter:* and description.

Check: grep the served HTML for name="og: — should return nothing.

4. A relative image URL

<meta property="og:image" content="/images/card.png">   <!-- won't load -->

Crawlers need an absolute URL. Some resolve relative paths, most don’t.

Fix: full https:// URL including the host.

Check: copy the tag’s value into a browser address bar. If it doesn’t load, neither will the card.

5. The same tags on every page

A template with hard-coded values, so every article shares as the homepage. This one is easy to miss because the card looks correct — just not for the page you shared.

Fix: generate og:title, og:description, og:url and ideally og:image per page.

Check: compare two different pages’ tags.

6. Wrong image dimensions

A square logo, a tiny thumbnail, or a screenshot at an unrelated aspect ratio. Result: letterboxing, an awkward crop, or a downgrade to the small-thumbnail layout.

Fix: 1200 × 630, and declare og:image:width / og:image:height.

Check: actual pixel dimensions of the file, not the declared ones.

7. A cached old card

Tags are correct, platform shows the previous version. Card caches are separate from image caches and expire independently.

Fix: the platform’s debug tool to force a re-fetch; a new image filename if the image itself changed.

Check: whether curl on the page shows the new values. If it does, it’s cache.

8. Missing twitter:card

Without it, Twitter-style platforms default to the small thumbnail layout even with a large image available.

Fix: one line — <meta name="twitter:card" content="summary_large_image">. Everything else falls back to Open Graph.

Check: the tag exists, with name not property.

9. Duplicate tags

Two og:image tags from a theme and a plugin both trying to help. Which wins depends on the parser, so behaviour differs per platform.

Fix: find the second source and disable it.

Check: curl -s <url> | grep -c 'og:image' — expect one per distinct tag.

10. og:url pointing at the wrong place

Either a tracking-parameter URL, or the homepage on every page. Fragments share counts and can send people somewhere unintended.

Fix: clean canonical address, matching rel="canonical".

Check: both tags present with identical values.

11. Unreadable image at card size

A 1200-pixel-wide image renders around 500 pixels wide, and smaller in compact layouts. Small text and low contrast vanish.

Fix: headline text at 60px or more in the source, high contrast, generous margins.

Check: view the image at 40% zoom. If you can’t read it, nobody can.

12. An image the crawler can’t fetch

Behind authentication, behind hotlink protection, behind bot challenges, or too large.

Fix: publicly reachable, no referrer requirement, under a megabyte.

Check: fetch the image URL with curl -sI and look for a 200 and an image/* content type.

13. A description that restates the title

Wastes the one line you get to add information.

Fix: say something the title doesn’t.

Check: read them together. If the second adds nothing, rewrite it.

14. Truncated titles that lose the point

Layouts cut titles at different lengths, sometimes near 60 characters.

Fix: front-load the meaning; put branding at the end or omit it.

Check: read the first 55 characters alone.

15. Blocked crawlers

robots.txt, a WAF rule, or bot protection rejecting preview crawlers. Card falls back to generic regardless of correct tags.

Fix: allow known preview crawlers.

Check: whether a plain curl gets a 200 or a challenge page.

The five-minute audit

For any site, on one representative page:

curl -s https://example.com/page/ | grep -i 'og:\|twitter:\|canonical'

Read the output against this list. Then compare against a second page to catch the template problem, and fetch the image URL to catch the unreachable-image problem.

Three commands. Most preview bugs don’t survive them.