Link Preview & URL Unfurl Guide — The Complete Developer Hub
Every link your team ships — every tweet, every Slack share, every email CTA — gets judged in half a second based on how it previews. A strong preview card earns the click. A broken card gets scrolled past. This is the complete, no-fluff hub for everything you need to know about link previews and URL unfurling: how the process works under the hood, which tags matter, what each platform requires, how to troubleshoot when a preview breaks, and how to audit previews at scale.
Everything here is written for shipping teams — engineers, marketers, SEOs, content ops — so you can get from "this link previews badly" to "fixed, verified, shipped" in the shortest possible path.
→ Test any URL on TryUnfurl · → Bulk-check 100 URLs at once
What Are Link Previews?
A link preview (also called a URL unfurl, an embed, or a rich card) is the preview tile that appears when someone pastes a URL into a social network, chat app, messaging platform, or AI assistant. The platform fetches your page, reads the metadata in the HTML <head>, and renders a compact card showing the title, description, image, and site name — so anyone scrolling can decide whether to click before they even do.
Every link preview is built from a small set of ingredients:
- Open Graph tags (
og:title,og:description,og:image,og:url,og:type) - Twitter Card tags (
twitter:card,twitter:title,twitter:description,twitter:image) - HTML fallbacks (
<title>,<meta name="description">) - A publicly reachable preview image
When any piece is missing or malformed, the preview breaks. And because platforms cache URL unfurl results — sometimes for days — a broken card stays broken long after you've deployed a fix unless you force a re-scrape.
The URL Unfurl Process Explained
Every social network and chat app runs roughly the same pipeline the moment a URL shows up:
- User pastes a URL into a post, message, or channel.
- Platform crawler fetches the page with a bot user-agent (Slackbot, Discordbot, facebookexternalhit, LinkedInBot, Twitterbot, WhatsApp, and so on).
- Server responds with HTML, containing the metadata tags in
<head>. - Platform parses the metadata, using its own priority order (Twitter prefers Twitter Card tags; LinkedIn ignores them entirely; Slack reads OG first).
- Preview card is rendered using the extracted title, description, and image.
- The preview is cached so the next share of the same URL doesn't re-hit your server.
The one thing nearly every platform has in common: they don't execute JavaScript. If your site relies on client-side rendering, your Open Graph tags must be in the initial HTML response. How link previews work covers the technical details in depth.
Platform-Specific Requirements at a Glance
Every platform renders URL unfurl cards slightly differently. Here's what matters most:
| Platform | Priority tags | Image minimum | Cache-clear mechanism |
|---|---|---|---|
| Facebook / Meta | Open Graph | 1200×630px | Sharing Debugger |
| Open Graph | 1200×627px | Post Inspector | |
| Twitter / X | Twitter Cards → OG fallback | 1200×628px | Card Validator |
| Slack | Open Graph | ~800×800px for large cards | Re-share the link |
| Discord | Open Graph | No strict minimum | Query-string cache-buster (?v=2) |
| iMessage | Open Graph + Apple-specific | 1200×630px | Delete and re-send |
| Open Graph | ~300×200px | Cache-buster query string | |
| Microsoft Teams | Open Graph | 1200×630px | Re-send / clear client cache |
| Telegram | Open Graph | 800×800px | Re-share or use /debug |
See our per-platform guides (Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Teams, Telegram) for the exact rules and fix workflows.
Common Unfurling Issues and Solutions
The same failure patterns show up in nearly every URL unfurl audit:
- Missing
og:image— the number-one cause of a broken card. - Image too small — Facebook and LinkedIn downgrade anything under 1200×630px.
- Relative image URLs — crawlers don't guess; always use absolute URLs.
- Cached preview stuck — the card is fine in your tester but wrong in the app. Force the platform to re-scrape.
- JavaScript-only tags — your React SPA injects OG tags client-side; crawlers see nothing. Switch to SSR, SSG, or pre-render.
- Blocked by bot protection — Cloudflare "I'm Under Attack" and aggressive WAFs block platform crawlers. Allow-list known bot user-agents.
- Redirect chains — too many hops and the crawler gives up. Keep redirects to 1–2 max.
- Mismatched tag injection — your theme sets OG tags and a plugin overrides them. Check the rendered HTML, not the template.
Full symptom-based diagnosis lives in the link preview troubleshooting guide, and the 7 root causes of broken previews goes deeper on each pattern.
Advanced Optimization Techniques
Once the basics are solid, these are the levers that separate a correct preview from a preview that actually earns clicks:
- Treat
og:titleas ad copy, not SEO copy. Write for the click, not the ranking. - Design the
og:imagefor the thumbnail. 1200×630px gets cropped on mobile. Put the brand and value prop in the center. - Set a site-wide default
og:imageso no page ever launches naked. - Use
og:typecorrectly.articlefor blog posts,productfor commerce,websiteas the default. - Add
og:site_namefor a consistent byline across every card. - Pre-load the image on your CDN so the first crawler request doesn't time out.
- Serve OG images with long cache headers — crawlers re-fetch often.
- Audit monthly. Use the bulk URL unfurl checker to sweep evergreen pages for silent regressions.
Testing and Validation Tools
Testing URL unfurl previews before you share is the single highest-leverage habit a shipping team can adopt. The tools fall into two buckets:
- Multi-platform link preview checkers — for confirming metadata and spotting issues across every network in one view. TryUnfurl is the fastest option (always fetches live, no login).
- Platform-specific social media debug tools — for forcing caches to refresh after a fix. Facebook Sharing Debugger, LinkedIn Post Inspector, X Card Validator.
Compare the tools side-by-side or jump straight to the testing checklist.
Checklist: Optimize Your Link Previews
Before your next big share, run through this:
-
og:titleset and ≤ 70 characters -
og:descriptionset and 100–200 characters -
og:imagepresent, absolute URL, ≥ 1200×630px, public -
og:urlmatches the canonical URL -
og:typeset appropriately -
og:site_nameset - Twitter Card tags present (
twitter:card,twitter:title,twitter:description,twitter:image) - Tags present in the initial HTML (not injected client-side)
- Preview tested on TryUnfurl across every platform
- Stale caches cleared via each platform's debugger
Guides in This Documentation
Core Concepts
- What Is URL Unfurling? — complete reference: Open Graph, Twitter Cards, caching, platform differences
- How Link Previews Work — the crawl, parse, and render pipeline explained
- How TryUnfurl Works — what the tool does, who it's for, and how it works under the hood
Metadata References
- Open Graph Tags — complete tag reference, HTML examples, image size requirements
- Twitter Card Tags — all card types, every tag, implementation examples
- Open Graph Image Size Guide — the correct
og:imagedimensions for every platform
Testing & Tools
- How to Test Link Previews — step-by-step testing workflow
- Link Preview Testing Tools — TryUnfurl vs Facebook Debugger vs Twitter Card Validator and more
- Bulk Link Preview Checker — check up to 100 URLs at once, free
Troubleshooting
- Link Preview Troubleshooting Guide — symptom-based diagnosis and fixes
- Why Link Previews Break — the 7 most common root causes
- Preview Image Not Showing — fix checklist for missing
og:image - How to Refresh a Link Preview — clear the cache on Facebook, Twitter, LinkedIn, Slack, Discord, and WhatsApp
- How to Fix Link Preview Problems — fixes for wrong title, missing image, no preview, stale cache
Platform-Specific Guides
- Slack Link Preview Wrong
- Discord Preview Not Updating
- WhatsApp Link Preview Not Working
- iMessage Link Preview Not Working
- LinkedIn Link Preview Not Showing
- Facebook Link Preview Wrong
- Microsoft Teams Link Preview
- Telegram Link Preview Not Working
Developer Resources
- Link Preview API — programmatic URL unfurling for CI/CD and server-side integrations
- URL Error Explanations — plain-English explanations of 403, 404, 500, 429, timeouts, and bot protection errors
Start Testing Now
You can audit your first URL in under 30 seconds.