Free Open Graph & Social Card Preview

What is link unfurling and why does it matter?

When you paste a URL into Facebook, Twitter, LinkedIn, Slack, Discord, iMessage, or WhatsApp, the platform sends a crawler to that URL, reads the meta tags inside the page head, and renders a preview card with a title, description, and image. That preview is called an unfurl, a link card, or a social card depending on the platform. It is the first thing every viewer sees before deciding whether to click. A well-rendered card lifts click-through rates by a wide margin compared to a plain blue link, and a broken card kills engagement entirely.

The system runs on the Open Graph protocol, which Facebook published in 2010 to give sharing platforms a standard way to extract a clean preview. Open Graph defines a namespace of meta tags prefixed with og: — og:title, og:description, og:image, og:url, og:type, and a long tail of optional fields for video, audio, articles, and products. Twitter built its own Twitter Card protocol on top in 2012, with a twitter: namespace that overrides Open Graph when both are present. LinkedIn, Slack, Discord, and most messaging apps read Open Graph directly and add their own quirks on top.

Every platform applies its own rendering logic. Facebook and LinkedIn render a hero image with a title and description below, occupying roughly four lines of feed space. Twitter's summary_large_image card renders a hero image with the URL host underneath. Slack renders a compact attachment with a small inline thumbnail. Discord renders a card that pulls in any video or audio embed when the type is set. iMessage renders a vertical-format card with a square image. The same set of meta tags drives all of them, but the visual outcome varies enough that previewing on each surface separately is the only way to catch problems.

The cost of a broken unfurl is real. A campaign tweet without an image gets a fraction of the engagement of one with a card. A LinkedIn post that unfurls to a generic globe icon instead of the article hero looks unfinished. A Slack channel where a link unfurls to a 404 image breaks trust in the link itself. None of these are catastrophic on their own, but on a marketing or content team that ships dozens of links a week, the cumulative loss is significant.

How to use this preview tool

The previewer renders one URL across all the major platforms at once, so you can spot platform-specific issues without testing on each one separately.

Step 1 — Paste your URL. Drop a full URL into the input. The crawler fetches the page, reads the head, and extracts every relevant Open Graph and Twitter Card tag. If the page requires authentication or is behind Cloudflare's bot challenge, the fetch fails and the previewer shows the error so you know the unfurl will fail on real platforms too.

Step 2 — Scan all five platform cards. Facebook, LinkedIn, Twitter, Slack, and Discord render side by side. Look for missing images, truncated text, and aspect-ratio crops that clip your hero artwork. The previewer flags missing required tags in red and suboptimal dimensions in amber.

Step 3 — Edit and re-preview. Update your meta tags in the source page and click Refresh. The previewer fetches a fresh copy without any cache, so you see the new state immediately. Once it looks right here, the live shares on the actual platforms will match — assuming you remember to invalidate Facebook's and LinkedIn's caches after the update.

Platform-specific rendering quirks

The same meta tags produce different cards on different platforms because each one has its own renderer. Knowing the differences saves time when something looks wrong on one platform but right on the others.

Facebook

Facebook reads og:title, og:description, og:image, and og:url and renders a hero card with the image at the top, title bold underneath, description in gray, and the host domain in small caps at the bottom. The image is cropped to a 1.91:1 aspect ratio if it does not match. Facebook caches the result aggressively — the first time a URL is shared, the crawler scrapes the tags, and subsequent shares reuse the cached card for hours or days. To refresh, paste the URL into the Sharing Debugger and click Scrape Again. There is no other reliable way to invalidate the cache. The Open Graph crawler identifies itself with the facebookexternalhit user agent.

Twitter

Twitter reads twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site first, falling back to og: equivalents when the twitter: tag is missing. The twitter:card value drives the layout choice: summary produces a small square thumbnail to the left of the title and description, occupying about one tweet of vertical space; summary_large_image produces a large hero image above the title with the URL host underneath, doubling the visual real estate. Twitter Card validation moved into Twitter Ads in 2022, so the standalone Card Validator is gone, but the platform still respects the protocol exactly as it did before.

LinkedIn

LinkedIn reads Open Graph identically to Facebook and renders a similar hero card. The crawler is LinkedInBot, and it caches results for around seven days unless you invalidate via Post Inspector at linkedin.com/post-inspector. LinkedIn requires the og:image to be at least 1200 by 627 pixels (note the slightly different lower bound) and under 5MB. Images served over HTTP are dropped silently. LinkedIn also ignores the og:image:width and og:image:height hints when validating, so always test with a real fetch.

Slack

Slack reads Open Graph but renders a more compact attachment by default. The og:title becomes the link title, og:description becomes the body, and og:image becomes a small inline thumbnail to the side. Workspaces can configure unfurl behavior per channel and per app, which means the same link can appear as a full card in one channel and a plain text URL in another. Slack also de-duplicates unfurls within a short window, so re-pasting the same URL after editing meta tags often shows the cached version. Bot accounts and incoming webhooks have separate unfurl settings that may need to be enabled explicitly.

Discord

Discord renders Open Graph cards as embeds inside the message, with the image rendered inline as a hero. It also respects og:video and embeds video players directly when present, which makes Discord one of the few mainstream platforms where video Open Graph tags pay off. Card colors come from theme-color in the meta head when no other color is specified. The crawler is Discordbot, and unlike Facebook or LinkedIn, Discord does not cache aggressively — most edits reflect within minutes.

Image size requirements per platform

The single most common reason a card downgrades to a thumbnail or fails to render is the image. Each platform has its own preferred dimensions and minimum sizes.

Facebook and LinkedIn prefer 1200 by 630 pixels at a 1.91:1 aspect ratio. Both will render a card with images down to 600 pixels on the long edge, but they downgrade to a small thumbnail layout below that threshold. File size should stay under 5MB. PNG and JPG both work; WebP is supported by Facebook but not consistently by LinkedIn, so use PNG or JPG for the og:image.

Twitter prefers 1200 by 675 pixels for summary_large_image, a slightly wider 16:9 ratio. The minimum is 300 by 157, but anything under 600 wide produces a visible quality drop. For summary cards, the image is square and cropped to 144 by 144 in feed; design for the center of the image to carry the meaning.

Slack accepts almost any size and scales the image down to fit a small thumbnail. The thumbnail is roughly 80 by 80 pixels in the side rendering. Detail in a 1200-wide image is wasted in this layout, but the same image works fine because Slack scales rather than crops.

Discord renders the full image inline up to the largest dimension the chat surface supports, typically up to 1280 pixels wide on desktop. Larger images are scaled down with quality preserved. Discord does crop tall images to a maximum aspect ratio, so avoid portrait-format images for hero cards.

The og:image:width and og:image:height tags are dimension hints that crawlers use to reserve layout space before the image finishes loading. They do not change the image, but they help the preview render without a layout shift. Always include them when they are stable, and use the actual pixel dimensions of the file you are serving.

Common mistakes that hurt sharing

Relative og:image URLs. Open Graph and Twitter Card both require absolute URLs. A path like /og.png is silently rejected by every major platform. Always use the full https://example.com/og.png form.

HTTP og:image on an HTTPS page. Mixing HTTP image URLs into an HTTPS page causes most platforms to drop the image. The card downgrades to a thumbnail or renders without an image at all. All Open Graph URLs should be HTTPS regardless of the page protocol.

Missing og:image:width and og:image:height. Without dimension hints, crawlers wait for the image to load before deciding the card layout. On slow image hosts, the platform times out and falls back to a smaller card. Always include the hints when serving a known-size image.

Identical og:image across thousands of pages. A single shared image works for the homepage but makes every article look identical when shared. Templated dynamic OG images, generated server-side from the title and a background, give each page a distinctive card without manual work.

Forgetting to refresh Facebook's cache after edits. Edits made after a URL was already shared are invisible until you re-scrape via the Sharing Debugger. Teams that update meta tags without invalidating the cache often think their changes did not work, when in reality the platforms are showing cached old versions.

Wrong twitter:card value. Setting summary when you have a 1200-wide hero image produces a small thumbnail card, wasting the asset. Setting summary_large_image without an actual large image produces a card with empty space where the hero should be. Match the card type to the image size you are serving.

Description copied verbatim from the page body. A truncated lead paragraph as the og:description rarely sells the click. Sharing previews are sales copy in 200 characters; treat them that way and write description text that frames the link, not summarizes the page.

Edge cases nobody mentions

Open Graph crawlers see a different version of your page than browsers do. They typically do not execute JavaScript, do not store cookies, and time out faster than a regular fetch. Single-page apps that inject meta tags client-side via React Helmet or document.head produce empty cards because the crawler reads the initial server-rendered HTML before any JS runs. The fix is to render meta tags server-side via Next.js metadata, Nuxt's useHead, or equivalent. Some CDN configurations also block bot user agents at the edge, returning a 403 to facebookexternalhit while serving humans normally — a bug that is invisible until someone shares the link and the card fails to render.