A broken link preview is the fastest way to make a share look untrustworthy. No image, the wrong title, or a description pulled from your nav menu — all fixable with six meta tags most sites get half-right.

The tags you actually need

<meta property="og:title" content="Get Your Link Previews Right">
<meta property="og:description" content="Open Graph and Twitter Card tags, plus how to debug a broken preview.">
<meta property="og:image" content="https://yoursite.com/images/og/get-your-link-previews-right.png">
<meta property="og:url" content="https://yoursite.com/posts/open-graph-tags-correctly/">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

Twitter/X falls back to og: tags for everything except twitter:card, so you don’t need to duplicate title/description/image under twitter: prefixes unless you want different copy specifically for that platform.

Image size and format rules that actually matter

• 1200x630px, roughly a 1.91:1 ratio. Off-ratio images get cropped unpredictably by different platforms.
• Absolute URL, not relative — og:image with a relative path silently fails on most crawlers.
• Under ~5MB, ideally well under 1MB. Some crawlers time out on large images and just show nothing.
• JPEG or PNG. Don’t use WebP here — several platforms’ preview crawlers still don’t render it.

Generate the image per post, not one static fallback

A single generic OG image for the whole site works, but a per-post image with the actual title rendered on it gets more clicks in a feed full of other links. If you’re on Hugo, you can generate these at build time with a script that overlays the post title on a template image, output to static/images/og/<slug>.png, and reference it from front matter.

Debugging a broken preview

The preview didn’t update after you fixed it — that’s the single most common “still broken” report, and it’s almost always caching, not your tags. Check what’s actually being served first:

curl -s https://yoursite.com/posts/your-post/ | grep -i 'property="og:'

If the tags look right there, the platform is showing you a cached version. Force a re-scrape:

Common bugs, in order of how often they happen

1. Relative og:image path. content="/images/og.png" instead of the full https://... URL. Works fine when you view source in a browser, fails silently for crawlers.
2. Image behind auth or a redirect chain. Preview crawlers usually don’t follow redirects or logins. Point directly at the final static asset.
3. Tags only in a JS-rendered <head>. If your OG tags get injected by client-side JavaScript, most preview crawlers never see them — they don’t execute JS. They need to be in the server-rendered HTML, which is the default for a Hugo site as long as you’re not overriding it with client-side head manipulation.
4. Missing og:type. Not fatal, but article gets you slightly better treatment (author/date metadata) on platforms that support it, versus the default website.

Set these once in your base template with sensible defaults, override per-post via front matter, and you never have to think about it again.