What Is Unfurling? The Complete Guide to Link Previews (2026)
Definition
Unfurling is the process where a URL automatically expands into a rich preview showing metadata such as the page title, description, and image when shared in messaging or social media platforms.
When a user pastes a link into a social media platform, messaging app, or AI tool, the platform fetches the page's metadata and renders a visual preview card. This process is called link unfurling.
Unfurling is essential for how content is discovered, understood, and shared across the modern web.
→ Test your link now — paste any URL into TryUnfurl.com
What Is Unfurling?
Unfurling is the automatic extraction and display of structured information from a web page when its URL is shared.
When a link is pasted into a platform such as Slack, Twitter/X, Facebook, LinkedIn, Discord, iMessage, or WhatsApp, that platform sends a request to the URL, reads the page's metadata, and generates a preview card.
The preview card typically includes:
- Title — the headline of the page
- Description — a short summary of the page content
- Image — a visual thumbnail or hero image
- Site name — the name of the website or publisher
- URL — the canonical address of the page
Without proper metadata, the link appears as plain text with no context, reducing the likelihood that anyone will click or share it.
Why the term "unfurling"?
The word comes from the idea of unfolding or opening up something that is compact. A raw URL is compact and opaque. Unfurling opens it up so people can see what's inside before clicking.
How Unfurling Works
When a platform unfurls a link, the following process occurs:
- The user pastes a URL into a message, post, or input field.
- The platform sends an HTTP request to the URL, typically using a bot user-agent.
- The server responds with HTML, which contains metadata in the
<head>section. - The platform parses the metadata, looking for Open Graph tags, Twitter Card tags, standard HTML meta tags, and structured data.
- A preview card is rendered using the extracted title, description, image, and other fields.
- The preview is cached by the platform, often for hours or days.
Key technical details
- Most messaging and social platforms do not execute JavaScript. Slack, Discord, Facebook, LinkedIn, WhatsApp, and iMessage all fetch static HTML and read metadata directly from it. Pages built purely with client-side rendering (React, Vue, Angular SPAs) will appear blank to these crawlers unless meta tags are server-rendered.
- Search engine crawlers are different. Googlebot and Bingbot do execute JavaScript during indexing, so
<meta>tags injected by JavaScript may eventually be indexed — but this takes time. For link preview reliability, always inject critical meta tags in the initial HTML server response. - Redirect handling: Crawlers follow HTTP redirects but typically stop after 3–5 hops. Long redirect chains (e.g., HTTP → HTTPS → www → non-www → final URL) can cause crawlers to give up and show no preview. Keep redirect chains as short as possible.
- Bot detection: Some platforms' crawlers (especially Slackbot and Discordbot) may be blocked by aggressive bot-protection middleware like Cloudflare under "I'm Under Attack" mode. If previews work in a browser but not on Slack/Discord, check your bot protection settings.
- Image URLs must be absolute (not relative) and publicly accessible.
- Most platforms cache unfurl results. Updating metadata on your page may not immediately change existing previews.
Metadata Used for Unfurling
Platforms rely on several metadata standards to generate link previews. Most platforms check these in a specific order of priority.
Comparison of Unfurling Metadata Standards
| Metadata Type | Used By | Purpose |
|---|---|---|
| Open Graph (OG) | Facebook, LinkedIn, Slack, Discord, WhatsApp | Rich link preview cards with title, description, and image |
| Twitter Cards | X / Twitter | Optimized rich tweet previews with card types |
| Schema.org / JSON-LD | Google Search, AI assistants, LLMs | Structured context: author, type, dates, organization |
| oEmbed | Medium, WordPress, video platforms | Embedded media previews via JSON/XML endpoint |
| HTML meta tags | All platforms (fallback) | Basic page title and description when other tags are missing |
Each standard serves a different ecosystem, and most well-configured pages include multiple formats to ensure consistent previews across all platforms.
Open Graph (OG) Tags
Open Graph is the most widely used metadata standard for unfurling. It was created by Facebook and is now supported by nearly every platform — including LinkedIn, Slack, Discord, WhatsApp, and iMessage.
Core Open Graph tags
| Tag | Purpose | Example value |
|---|---|---|
og:title |
Page title for the preview | "How to Fix Broken Link Previews" |
og:description |
Short summary (≤155 chars) | "Step-by-step guide to diagnosing..." |
og:image |
Preview image (absolute URL) | "https://example.com/og-image.jpg" |
og:url |
Canonical URL of the page | "https://example.com/page" |
og:type |
Content type | "website", "article", "video.movie", etc. |
og:site_name |
Name of the website | "My Company" |
og:locale |
Language/region | "en_US" |
og:image:width |
Image width in pixels | "1200" |
og:image:height |
Image height in pixels | "630" |
og:image:alt |
Alt text for the image | "A diagram showing link unfurling" |
Complete Open Graph implementation example
<head>
<!-- Primary meta tags (fallback for all platforms) -->
<title>What Is Unfurling? The Complete Guide</title>
<meta name="description" content="Unfurling is how URLs expand into rich previews on Slack, Discord, and social media. Learn how it works and how to fix broken previews.">
<!-- Open Graph -->
<meta property="og:title" content="What Is Unfurling? The Complete Guide">
<meta property="og:description" content="Unfurling is how URLs expand into rich previews on Slack, Discord, and social media. Learn how it works and how to fix broken previews.">
<meta property="og:image" content="https://example.com/images/unfurling-guide-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Diagram illustrating link preview unfurling">
<meta property="og:url" content="https://example.com/what-is-unfurling">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">
<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="What Is Unfurling? The Complete Guide">
<meta name="twitter:description" content="Unfurling is how URLs expand into rich previews on Slack, Discord, and social media.">
<meta name="twitter:image" content="https://example.com/images/unfurling-guide-og.jpg">
<meta name="twitter:image:alt" content="Diagram illustrating link preview unfurling">
</head>
og:type valid values
The og:type property tells platforms what kind of content the page is. Common values:
| Value | Use case |
|---|---|
website |
Default — use for homepages and marketing pages |
article |
Blog posts, news articles, documentation |
video.movie |
Feature-length video content |
video.episode |
Episode of a TV series |
video.other |
Other video content |
music.song |
Individual music track |
music.album |
Music album |
book |
Books with optional ISBN |
profile |
Person's profile page |
If unsure, use website — it's the most broadly supported fallback.
Open Graph image requirements
| Requirement | Recommended value | Notes |
|---|---|---|
| Dimensions | 1200 × 630 px | The universal safe size for all platforms |
| Minimum size | 600 × 315 px | Below this, most platforms skip the image |
| File format | JPG or PNG | WebP has limited support; avoid GIF |
| File size | Under 8 MB | Smaller is faster to fetch |
| URL | Absolute HTTPS | Relative URLs and HTTP will fail on many platforms |
| Accessibility | Must be publicly reachable | Not behind login, auth headers, or blocked by robots.txt |
Twitter Card Tags
Twitter/X uses its own metadata format. When present, Twitter Card tags take priority over Open Graph on X. If Twitter Card tags are absent, X falls back to Open Graph.
Twitter Card types
| Card type | twitter:card value |
Use case |
|---|---|---|
| Summary | summary |
Article or page with small thumbnail |
| Summary Large Image | summary_large_image |
Best for visual content — shows a large hero image |
| App | app |
Mobile app promotion with store links |
| Player | player |
Video or audio embeds |
For most websites, summary_large_image is the best choice — it produces the most prominent, visual card in the feed.
All Twitter Card tags
| Tag | Purpose |
|---|---|
twitter:card |
Card type (required) |
twitter:title |
Title displayed on X (max 70 chars) |
twitter:description |
Description (max 200 chars) |
twitter:image |
Absolute URL to image |
twitter:image:alt |
Alt text for accessibility |
twitter:site |
Your Twitter @username |
twitter:creator |
Author's Twitter @username |
Standard HTML Meta Tags
If Open Graph and Twitter Card tags are missing, platforms fall back to standard HTML tags:
<title>— the page title<meta name="description">— the page description- Favicon — used as a fallback icon
These should always be present as a baseline, even on pages that also include Open Graph tags.
Schema.org / Structured Data (JSON-LD)
Some platforms and AI tools use JSON-LD structured data to extract additional context such as author, publication date, article type, and organization information. This is increasingly important for AI-powered search and assistants.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "What Is Unfurling?",
"description": "A complete guide to link previews and metadata.",
"image": "https://example.com/og-image.jpg",
"author": { "@type": "Organization", "name": "Example Site" },
"datePublished": "2026-01-01"
}
</script>
oEmbed
A protocol that allows content providers to offer embeddable previews via a JSON or XML endpoint. Used by platforms like WordPress, Medium, and some video hosting services.
Metadata Priority: Which Tag Wins?
When a page has multiple metadata standards present, each platform follows a priority order to decide which values to display. Understanding this prevents unexpected behavior when your OG tags and Twitter Card tags contain different values.
| Platform | Title priority | Description priority | Image priority |
|---|---|---|---|
og:title → <title> |
og:description → meta description |
og:image |
|
| Twitter / X | twitter:title → og:title → <title> |
twitter:description → og:description → meta description |
twitter:image → og:image |
og:title → <title> |
og:description → meta description |
og:image |
|
| Slack | og:title → <title> |
og:description → meta description |
og:image |
| Discord | og:title → twitter:title → <title> |
og:description → twitter:description |
og:image → twitter:image |
og:title → <title> |
og:description |
og:image |
|
| iMessage | og:title → <title> |
og:description |
og:image |
| Google Search | <title> (may rewrite) |
meta description (may rewrite) |
Schema.org image |
Key takeaway: Twitter Card tags only affect X/Twitter. For every other platform, Open Graph tags are the primary source. Always ensure your og:title, og:description, and og:image are present — they serve as the universal baseline.
If you want a different image on Twitter than on other platforms (e.g., a portrait crop for the square Twitter card), you can specify both og:image and twitter:image with different values.
Programmatic Unfurling via API
Beyond manual testing, developers can use a URL unfurling API to programmatically extract metadata from any page. This is useful for:
- Chat and messaging apps — auto-generating link previews when users share URLs
- CMS and publishing tools — auto-populating article metadata when an editor pastes a link
- SEO audit tools — scanning pages for metadata completeness at scale
- Social media schedulers — pre-visualizing how posts will appear before publishing
TryUnfurl provides an API that returns structured metadata — Open Graph, Twitter Cards, HTML meta, and favicon — in a single JSON response. See the API documentation for full details including request format, response schema, and rate limits.
Examples of Link Unfurling
Good unfurling
A well-configured page produces a preview card with:
- A clear, descriptive title (not truncated)
- A concise summary that explains what the page is about
- A high-quality image sized correctly for the platform (typically 1200×630 pixels for Open Graph)
- The site name and URL displayed cleanly
Poor unfurling
A poorly configured page may show:
- A generic or missing title (e.g., "Untitled" or the raw URL)
- No description, or a description pulled from random page text
- A missing, broken, or incorrectly sized image
- No site name or branding
Platform-specific behavior
| Platform | Primary metadata source | Fallback behavior |
|---|---|---|
| Open Graph | Falls back to HTML title and description | |
| Twitter / X | Twitter Cards, then OG | Falls back to HTML meta tags |
| Open Graph | Falls back to HTML meta tags | |
| Slack | Open Graph, then HTML | Shows URL with limited preview |
| Discord | Open Graph | Shows URL with basic embed |
| iMessage | Open Graph | Shows URL with favicon |
| Open Graph | Shows URL as plain text | |
| AI assistants | Structured data, OG, HTML | May skip page entirely |
Common Problems With Link Previews
These are the most frequent issues that cause link previews to display incorrectly or not at all.
Missing Open Graph tags
Problem: The page has no og:title, og:description, or og:image tags.
Result: Platforms either show no preview or generate a poor-quality one from page content.
Fix: Add complete Open Graph tags to the <head> section of every page.
Preview image not showing
Problem: The og:image URL is relative, behind authentication, blocked by robots.txt, or returns an error.
Result: The preview card appears without an image — or the entire preview is suppressed.
Fix checklist:
- Ensure the image URL is absolute (starts with
https://) - Open the image URL directly in a private browser window — if it doesn't load, crawlers can't fetch it either
- Confirm the image is not blocked in
robots.txt - Verify the image meets minimum size requirements (600 × 315 px minimum, 1200 × 630 px recommended)
- Ensure the image is under 8 MB and in JPG or PNG format
- Add
og:image:widthandog:image:heighttags — some platforms won't display images without explicit dimensions
Client-side rendered content
Problem: The page uses JavaScript frameworks (React, Vue, Angular) that render content in the browser. Most unfurling bots do not execute JavaScript.
Result: Bots see an empty page and extract no metadata.
Fix: Use server-side rendering (SSR), static site generation (SSG), or inject meta tags into the initial HTML response.
Cached previews showing old content
Problem: You updated your metadata, but platforms still show the old preview.
Result: Outdated or incorrect title, description, or image displayed.
Fix: See How to Refresh a Cached Link Preview below.
Truncated titles or descriptions
Problem: The title exceeds ~60 characters or the description exceeds ~160 characters.
Result: Text is cut off with ellipsis, losing important context.
Fix: Keep titles under 60 characters and descriptions under 155 characters.
Duplicate or conflicting metadata
Problem: The page has conflicting values between OG tags, Twitter Cards, and HTML meta tags.
Result: Different platforms show different information, creating an inconsistent experience.
Fix: Ensure all metadata sources are aligned and consistent.
No metadata at all — graceful degradation
If a page has no Open Graph tags and no Twitter Card tags, platforms don't simply show nothing — they fall back through a degradation chain:
- HTML
<title>tag — used as the preview title <meta name="description">— used as the preview description- First image on the page — some platforms attempt to use it (results are unpredictable)
- Favicon — shown as a small icon instead of a preview image
- Raw URL — the absolute last resort; no preview card at all
This means even a site with no Open Graph tags will show something on most platforms — but it will be low-quality, inconsistent, and uncontrolled. Always set og:title, og:description, and og:image explicitly to take control of your previews rather than leaving it to platform guesswork.
How to Refresh a Cached Link Preview
Most platforms cache link previews for hours or days. After fixing metadata on your page, you need to force a cache refresh on each platform before users see the corrected preview.
Facebook / Meta
Use the Facebook Sharing Debugger:
- Go to developers.facebook.com/tools/debug
- Paste your URL and click Debug
- If old data is shown, click Scrape Again
- Repeat until the correct metadata appears
Twitter / X
Use the Card Validator:
- Go to cards-dev.twitter.com/validator
- Paste your URL and click Preview Card
- Twitter re-fetches metadata on each validation request
Use the Post Inspector:
- Go to linkedin.com/post-inspector
- Enter your URL and click Inspect
- Click Regenerate preview to force a refresh
Slack
Slack does not have a public cache-clearing tool. Options:
- Delete the original message and re-share the link — Slack will re-fetch
- In some workspaces, hovering over the preview and clicking the refresh icon will re-fetch
- Wait for Slack's cache to expire (typically a few hours)
Discord
Discord does not offer a cache-clearing tool. Options:
- Add a cache-busting query string to the URL (e.g.,
?v=2) when sharing — Discord will treat it as a new URL - Wait for the embed cache to expire (typically a few hours to a day)
- Re-share the link in a new message after the cache expires
WhatsApp caches previews per device, not centrally. Options:
- Delete the message and re-send
- The recipient may need to clear their WhatsApp cache on their device
Platform-Specific Troubleshooting
Slack Link Preview Wrong or Missing
Slack generates unfurls by fetching Open Graph tags from the linked page at share time.
Common Slack-specific issues:
| Symptom | Likely cause | Fix |
|---|---|---|
| No preview appears | Page blocks Slack's crawler (user-agent: Slack) |
Check robots.txt and firewall rules |
| Wrong image shown | og:image missing or returning 4xx error |
Fix the image URL; verify it's publicly accessible |
| Old preview still showing | Cached result | Delete and re-share the link |
| Preview shows but image is tiny | Image below minimum size | Use 1200 × 630 px image |
| Title/description cut off | Title >80 chars or description >150 chars | Shorten your OG metadata |
| Preview works in browser but not Slack | JavaScript-rendered page | Use SSR or static HTML for meta tags |
Slack respects X-Frame-Options and fetches pages using its own bot user-agent. If your site uses bot-blocking middleware (like Cloudflare under aggressive settings), Slack's crawler may be blocked.
Discord Embed Not Working or Not Updating
Discord reads Open Graph tags to generate embeds. It embeds automatically when a URL is pasted in a channel.
Common Discord-specific issues:
| Symptom | Likely cause | Fix |
|---|---|---|
| No embed appears | Page has no Open Graph tags | Add og:title, og:description, og:image |
| Embed shows but no image | og:image missing, wrong URL, or too small |
Use absolute HTTPS image URL, min 300 × 157 px |
| Embed image is cropped oddly | Image dimensions don't match expected ratio | Use 1200 × 630 for summary_large_image style |
| Old embed still showing | Discord has cached the URL | Add ?v=2 to the URL as a cache-buster |
| Embed worked before, now broken | Page moved or og:image URL changed | Update OG tags and reshare |
| Video won't embed | Missing og:video or unsupported host |
Discord embeds video only from a small allowlist of hosts |
Discord interprets og:type = "article" and og:type = "website" differently. For articles with large images, set twitter:card to summary_large_image — Discord reads Twitter Card tags too.
LinkedIn Preview Wrong
LinkedIn caches previews aggressively. Use the LinkedIn Post Inspector to force a re-fetch.
Common LinkedIn-specific issues:
- LinkedIn requires images to be at least 1200 × 627 px for large previews
- LinkedIn ignores Twitter Card tags and only reads Open Graph
- LinkedIn may truncate descriptions at ~130 characters
- LinkedIn's crawler (
LinkedInBot) must not be blocked by robots.txt
iMessage Link Preview
iMessage reads Open Graph tags and displays a compact preview below the message.
- Image must be publicly accessible (iMessage fetches server-side)
- Use square or near-square images if you want a consistent thumbnail on iOS
- iMessage does not have a cache-clearing mechanism — recipients see whatever was cached when the link was first shared
How to Test Link Previews
Before sharing a link publicly, you should verify how it will appear across different platforms. Testing catches missing metadata, broken images, and inconsistent previews before your audience sees them.
Step-by-step testing checklist
- Check your metadata is present — view your page source and confirm
og:title,og:description, andog:imageexist in the<head> - Validate the image URL — open
og:imagein a private browser window to confirm it loads publicly - Test cross-platform previews — use TryUnfurl.com to see previews across all platforms at once
- Check platform-specific renderers — use official debugger tools for the platforms most important to you
- Clear caches — use platform debugger tools to force a fresh fetch after making changes
- Re-test after publishing — always re-check live URLs after deploys, since CDN or SSR caching can affect what crawlers see
TryUnfurl.com — test all platforms at once
Unlike platform-specific debuggers that only show how a link appears on one service, TryUnfurl.com shows you all previews simultaneously — Twitter/X, Facebook, LinkedIn, Slack, Discord, and iMessage — so you can spot inconsistencies immediately.
- Paste any public URL and see instant cross-platform previews
- View all detected metadata — Open Graph, Twitter Cards, HTML meta tags, and structured data
- Identify missing or misconfigured tags before they affect your traffic
- No login, no installation, no cost — paste and preview
Platform-specific testing tools
For single-platform debugging, these official tools can also help:
| Tool | Platform | URL |
|---|---|---|
| Sharing Debugger | developers.facebook.com/tools/debug | |
| Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| Post Inspector | linkedin.com/post-inspector | |
| Rich Results Test | Google Search | search.google.com/test/rich-results |
| Link Preview | Slack | Paste URL in any Slack channel |
Best practices for testing
- Test before publishing — check metadata before sharing links publicly
- Test across platforms — different platforms may render previews differently
- Clear caches after changes — use platform debuggers to force a metadata refresh
- Check mobile and desktop — preview cards may display differently on different devices
- Verify image dimensions — use 1200 × 630 pixels for maximum compatibility
- Test your actual deployed URL — testing localhost won't work for external platform crawlers
Why Unfurling Matters for SEO and AI
Unfurling is not a direct search engine ranking factor, but it strongly influences user behavior signals that affect SEO performance:
- Click-through rate — attractive previews get more clicks when shared
- Social sharing — good previews encourage resharing, increasing reach
- Brand perception — professional previews build trust and credibility
- AI discoverability — AI assistants and LLMs use structured metadata to understand, summarize, and recommend web pages
Pages that unfurl well tend to receive more engagement, more backlinks, and more traffic from both social platforms and AI-powered tools.
Frequently Asked Questions
What does unfurling mean?
Unfurling means automatically expanding a URL into a rich preview card showing the page's title, description, image, and other metadata. The term comes from "unfolding" something compact to reveal its contents.
Is unfurling only for developers?
No. Unfurling affects anyone who shares links online — marketers, content creators, business owners, and everyday users. Understanding how it works helps ensure links look professional when shared.
Can poor unfurling hurt website traffic?
Yes. Links with missing or broken previews receive fewer clicks and fewer shares. People are less likely to trust or engage with links that don't display properly. High-quality previews directly improve click-through rates when your content is shared on social platforms and in messaging apps.
Is unfurling automatic?
Unfurling only works automatically if the web page includes proper metadata tags such as Open Graph, Twitter Cards, and structured data in its HTML. Pages without metadata unfurl poorly or not at all.
Does unfurling cost anything?
No. Unfurling is based on metadata in your HTML. Adding the correct meta tags is free and requires no paid tools or services.
How do I fix broken link previews?
Use a tool like TryUnfurl.com to diagnose what metadata is missing or incorrect. Then add or update the Open Graph tags, Twitter Card tags, and structured data in your page's <head> section. After fixing, use platform-specific tools (Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator) to clear the cached preview.
Why do different platforms show different previews?
Each platform has its own metadata preferences and fallback behavior. Some prioritize Open Graph, others use Twitter Cards, and some fall back to basic HTML tags. Testing across platforms ensures consistency.
Why is my og:image not showing?
The most common causes are: the image URL is relative instead of absolute, the image is behind authentication, the image URL returns a 404 error, or the image doesn't meet minimum size requirements (600 × 315 px minimum). Open the image URL in a private browser window to verify it loads publicly.
Why is my Discord embed not updating?
Discord caches link embeds and doesn't provide a direct cache-clearing tool. The quickest workaround is to append a query parameter to the URL when resharing (e.g., ?v=2) — Discord treats this as a new URL and fetches fresh metadata.
Why is my Slack preview wrong?
Slack reads Open Graph tags at the time the link is shared and caches the result. If your metadata has changed, delete the original message and re-share the link to force Slack to re-fetch. Also verify Slack's crawler (Slackbot) isn't blocked by your robots.txt or firewall.
Does unfurling work on JavaScript-rendered pages?
Not reliably. Most platform crawlers do not execute JavaScript, so pages that rely on client-side rendering (React, Vue, Angular SPAs) will appear empty to crawlers unless meta tags are injected into the initial server-sent HTML. Use SSR, SSG, or pre-rendering to ensure crawlers can read your metadata.
What image size should I use for link previews?
The universally safe size is 1200 × 630 pixels (1.91:1 aspect ratio). This works for Facebook, LinkedIn, Slack, Discord, Twitter/X, and iMessage. Always use an absolute HTTPS URL, keep the file under 8 MB, and use JPG or PNG format.
How do I know if my link preview tags are correct?
Paste your URL into TryUnfurl.com. It shows you all detected metadata and renders previews for each major platform in seconds — no login required.
Summary
Unfurling is the process that turns a plain URL into a rich, informative preview card. It relies on metadata standards — primarily Open Graph tags, Twitter Cards, and structured data. Proper unfurling improves click-through rates, social sharing, brand perception, and AI discoverability.
Key takeaways:
- Always include
og:title,og:description, andog:imageon every public page - Use a 1200 × 630 px image with an absolute HTTPS URL
- Add Twitter Card tags alongside Open Graph for full coverage
- Test before sharing — use TryUnfurl.com for cross-platform previews in one step
- After fixing metadata, clear platform caches using official debugger tools
→ Test your link on TryUnfurl.com now — free, no login required