How Link Previews Work — The Crawl, Parse & Render Process Explained
When you paste a URL into Slack, Discord, Twitter, or any messaging app, a preview card appears almost instantly — showing a title, description, and image. That preview is generated through a consistent process that every major platform follows.
Understanding this process makes it much easier to diagnose and fix problems when previews go wrong.
The Three-Step Process
Every link preview is generated through the same fundamental pipeline:
1. Crawl — The platform fetches your page
When a URL is shared, the platform sends an HTTP request to that URL using its crawler bot. This happens server-side — not in a browser. The crawler requests the raw HTML of the page.
Important: Most platform crawlers do not execute JavaScript. They retrieve only the initial HTML response from the server. This is why pages that rely on client-side rendering (React SPAs, Vue apps without SSR) often produce empty or broken previews.
Each platform uses its own crawler identity:
| Platform | Crawler user-agent |
|---|---|
facebookexternalhit |
|
| Twitter / X | Twitterbot |
LinkedInBot |
|
| Slack | Slackbot |
| Discord | Discordbot |
WhatsApp |
2. Parse — Metadata is extracted from the HTML
Once the HTML is retrieved, the platform scans the <head> section for metadata tags. It reads these in a specific priority order:
- Open Graph tags (
<meta property="og:*">) — the primary source for most platforms - Twitter Card tags (
<meta name="twitter:*">) — used by X, also read by Discord - HTML
<title>and<meta name="description">— fallback for all platforms - Favicon — used for small icon previews
The platform stores the extracted title, description, image URL, site name, and other values.
3. Render — The preview card is built and cached
Using the extracted metadata, the platform renders a visual preview card according to its own layout rules — applying its title length limits, image crop dimensions, and card format.
The rendered result is then cached. Future shares of the same URL serve the cached preview without re-fetching the page, which is why outdated previews persist even after you update your metadata.
What Metadata Powers Link Previews
Different platforms rely on different metadata standards:
| Standard | Tags | Used by |
|---|---|---|
| Open Graph | og:title, og:description, og:image, og:url, og:type |
Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage |
| Twitter Cards | twitter:card, twitter:title, twitter:description, twitter:image |
Twitter / X (also read by Discord) |
| HTML meta | <title>, <meta name="description"> |
All platforms as fallback |
| Favicon | <link rel="icon"> |
Compact preview icons |
Most platforms prefer Open Graph if it's present, and fall back to HTML meta tags if it isn't. This is why adding Open Graph tags is the single most impactful metadata improvement for link previews.
Why Caching Affects Previews
After a platform fetches and parses your page, it caches the preview result. Cache durations vary:
| Platform | Typical cache duration |
|---|---|
| 24 hours to several days | |
| Hours to days | |
| Twitter / X | Hours |
| Slack | A few hours |
| Discord | A few hours to ~24 hours |
This means updating your metadata doesn't immediately change existing previews. You need to force a cache refresh using platform-specific tools or workarounds — see How to Refresh a Link Preview.
Why JavaScript-Rendered Pages Break Previews
This is the most common technical cause of missing link previews.
Modern web apps often use JavaScript frameworks that build the page in the browser after the initial HTML loads. The initial HTML response contains almost nothing — just a script tag. Platform crawlers receive this empty shell and find no metadata.
The fix: Ensure your meta tags are present in the initial server-rendered HTML, not injected by JavaScript. Solutions:
- Server-side rendering (SSR) — e.g., Next.js, Nuxt.js, SvelteKit
- Static site generation (SSG) — e.g., Gatsby, Astro, Hugo
- A prerendering service that generates static HTML snapshots for crawlers
How to Verify Your Link Preview
Since platform crawlers work differently from a regular browser, the best way to see what they actually read is to use a tool that fetches pages the same way they do.
TryUnfurl.com fetches any URL server-side (no JavaScript execution), extracts all metadata, and shows you rendered preview cards for every major platform — in seconds.