Link Preview
Quick Access to Coding Tools
Go straight to the formatter, validator, encoder, generator, or developer utility you need.
How to Use the Link Preview
Enter the URL to preview
Enter the URL to preview.
Click Fetch
Click Fetch.
See the title, description, and thumbnail preview
See the title, description, and thumbnail preview.
Link Preview Checker — Test Open Graph and Twitter Card Tags Before You Share
You spend hours writing a blog post or building a landing page, share it in a group chat or post it on social media, and the preview that shows up is a blank grey box, a randomly cropped image, or the wrong title entirely. That first visual impression is what determines whether people click through to your content or scroll past it. A link preview — the card that appears when a URL is shared on Facebook, X, LinkedIn, WhatsApp, Slack, or Discord — isn't controlled by the platform's magic. It's driven by a handful of specific HTML meta tags sitting in your page's <head>. Get them right and your content looks professional everywhere it appears. Get them wrong and you're leaving clicks on the table.
This tool fetches a live URL, parses its Open Graph and Twitter Card meta tags, and renders approximate preview cards matching how each platform would display the link. Use it before publishing, before sharing a new product page, or when debugging a preview that isn't rendering the way you expect.
Open Graph Tags — The Foundation of Social Previews
Open Graph (og:) was originally developed by Facebook in 2010, but it quickly became the de facto standard across the industry. LinkedIn, WhatsApp, Telegram, Slack, Discord, iMessage, and dozens of other apps all parse Open Graph tags when generating link cards. If your page has proper OG tags, you cover roughly 95% of the platforms your content will ever be shared on.
The four essential Open Graph tags every page should have:
og:title — The headline shown in the preview card. This can and often should differ from your HTML <title> tag. Your page title might include brand suffixes for SEO ("Pricing | Acme Corp"), while the OG title can be punchier for social contexts ("See how Acme pricing actually works"). Keep it under 60 characters to avoid truncation — Facebook cuts off around 65 characters on desktop, fewer on mobile.
og:description — The body text beneath the title. Think of it as a tweet-length pitch for the page: 2–3 sentences, ideally under 150 characters. This isn't the same as your HTML meta description (which Google uses for search snippets), so write it for people who are deciding whether to click, not for crawlers.
og:image — The visual anchor of your card. This is the single most important tag for click-through rate — a compelling image pulls dramatically more traffic than text alone. The URL must be absolute and use HTTPS. Relative paths, HTTP URLs, or image URLs that require authentication will fail silently. Facebook's minimum is 200×200 pixels, but for a clean large-card layout aim for at least 1200×630.
og:url — The canonical URL for this piece of content. If the same article is accessible at multiple paths, point this to the single canonical version so platforms don't treat duplicated URLs as separate pieces of content.
Beyond the essentials, a few optional tags round things out: og:type (set to "website" for standard pages, "article" for blog posts — some platforms use this to add extra UI elements), og:site_name (your site's name, sometimes displayed as a sub-header on the card), and og:locale (language and region code like en_US — affects character rendering for non-Latin scripts).
Twitter Card Tags — Fine-Tuned Control for X
Twitter Card tags use the twitter: prefix and give you explicit control over the X/Twitter card without affecting how other platforms render the same URL. If Twitter Card tags are missing, X falls back to Open Graph tags — but falling back often means less-optimal rendering, because Twitter's own tags let you specify the exact card layout and branding you want.
The most impactful tag here is twitter:card. Set it to summary_large_image for content pages — this renders a large banner image above the title, dramatically more visible in a timeline than the small square thumbnail that the summary card type produces. Blog posts, product pages, and landing pages almost always perform better with large image cards.
twitter:title and twitter:description override the OG equivalents on X specifically. twitter:image lets you use a different image than what Facebook or LinkedIn shows (for example, a different crop optimized for Twitter's 2:1 aspect ratio). twitter:site is your brand's handle (@yourcompany) and appears as attribution on the card.
One common pitfall: setting twitter:card to summary by default or forgetting to set it at all. Without an explicit value, Twitter defaults to the small summary card — even if you have a perfectly sized large image in og:image. Always set twitter:card explicitly.
Getting Your Preview Image Right — Dimensions, Formats, and Pitfalls
The preview image is what stops someone mid-scroll. A blurry, cropped, or missing image tanks your share engagement. Here's what actually matters:
Facebook and LinkedIn (Open Graph): The recommended dimensions are 1200×630 pixels — a 1.91:1 aspect ratio. Facebook tolerates images as small as 200×200 but renders them poorly in large-card layouts; the practical minimum for a good-looking card is 600×315. LinkedIn follows similar guidelines. The image must be publicly accessible with no authentication requirements.
X/Twitter (summary_large_image): 1200×628 pixels is the sweet spot. The image gets cropped to roughly 2:1, so center your subject matter. Anything narrower than 300×157 will be rejected.
Common mistakes with images: Using a relative path like /images/og-banner.jpg instead of a full absolute URL. Hosting the image behind Cloudflare's bot protection or a CDN that returns 403 to crawlers. Using SVG (not supported by any major platform's crawler). Forgetting to resize — a 5MB hero image from your CMS will be slow to fetch, and Facebook imposes an 8MB hard limit. Serving images over HTTP instead of HTTPS (most platforms block mixed content). And perhaps the sneakiest: setting the image in your dev/staging environment with a localhost URL, pushing to production, and forgetting to update it — the card keeps pointing at a URL that only worked on your machine.
Preview Caching — Why Your Updated Tags Aren't Showing
When you change your meta tags or swap an OG image, the change doesn't appear instantly on social platforms. Facebook and LinkedIn cache preview data aggressively — sometimes for 24–48 hours — and every existing share of that URL continues showing the cached version until the cache expires or is manually cleared. This is the number one source of "I updated the image but the preview still shows the old one" support requests.
Facebook provides the Sharing Debugger at developers.facebook.com/tools/debug — paste your URL and hit "Scrape Again" to force an immediate re-fetch. LinkedIn's equivalent is the Post Inspector at linkedin.com/post-inspector, which works the same way. For Twitter/X, no official manual refresh tool exists, but newly shared links will generally pick up updated metadata within minutes. This checker always fetches live data, so it shows what your current tags actually say — not the stale version that Facebook is still caching.
A practical tip: after deploying a page, immediately run it through both Facebook's debugger and LinkedIn's post inspector before sharing it publicly. This "primes" the cache with your correct metadata so the first organic share renders cleanly.
WhatsApp, Discord, and Slack — Platform-Specific Behavior
While all three of these platforms read Open Graph tags, each renders previews differently:
WhatsApp reads og:title, og:description, and og:image — it shows a large, prominent image when available. If your OG image is missing or broken, WhatsApp falls back to a very minimal text-only preview. Keep in mind WhatsApp compresses images aggressively, so subtle gradients and fine text in your OG image may not survive the round-trip.
Discord embeds a rich preview with the image displayed prominently alongside the title and description. Discord follows redirects on image URLs, but it won't follow auth-protected URLs. It also respects a theme-color meta tag for the embed's left border color — a small touch that helps brand your Discord link previews.
Slack unfurls links in messages, pulling the title, description, and image from OG tags. Slack caches aggressively too, so newly updated tags may not appear until the old cache expires. Slack also reads twitter:card for additional formatting hints.
Frequently Asked Questions About Link Previews
og:image URL is relative instead of absolute (e.g. /images/banner.jpg instead of https://example.com/images/banner.jpg); the image server returns a 301/302 redirect that the platform's crawler doesn't follow; the image is behind authentication or a WAF that blocks bot user-agents; the image dimensions are below 200×200 pixels; or the image is in SVG format (not supported). Debug by opening the image URL in a fresh incognito browser tab — if it doesn't load there, it won't load for the crawler either. Also check your server's Content-Security-Policy headers, which can block external sites from loading your images.
<title> tag serves two audiences: browsers (it sets the tab name) and search engines (it appears as the clickable heading in Google results). og:title serves a third audience — social platforms rendering link cards. They can (and often should) have different values. Your <title> might be "Acme Corp — Enterprise Pricing" for SEO, while your og:title could be "How Acme's pricing actually works" for a more conversational social hook. If og:title is absent, platforms fall back to <title>, so having a clean, shareable <title> serves as a useful safety net.
<head> section of your HTML:<meta property="og:title" content="Your Page Title"><meta property="og:description" content="A compelling page description."><meta property="og:image" content="https://example.com/images/og-banner.jpg"><meta property="og:url" content="https://example.com/your-page"><meta property="og:type" content="website">In WordPress, plugins like Yoast or RankMath manage OG tags automatically — but always verify the output with a live fetch, because plugin conflicts and theme overrides can silently strip or overwrite tags. In Laravel, you can set them per-view with
push('meta') blocks or use a package like artesaos/seotools. For static HTML, you add them directly — there is no magic, just meta tags.
og:) — it completely ignores Twitter Card tags. Twitter/X reads both but gives priority to its own twitter: tags and falls back to Open Graph only when they're absent. WhatsApp, Slack, Discord, and Telegram all read Open Graph. The practical takeaway: if you implement only one set of tags, make it Open Graph — it covers the widest range of platforms. Add Twitter Card tags on top for fine-tuned control of your X presence specifically.
og:image for the image Facebook, LinkedIn, and most other platforms will use, then set twitter:image for a separate X-specific image. This is useful when your OG image is a 1.91:1 landscape photo but you want a tighter 2:1 crop for Twitter, or when you want entirely different visuals for each platform. The key is that both tags must point to valid, publicly accessible HTTPS image URLs — if one fails, that platform falls back to the other or shows no image at all.
img-src directive. Also, if your site returns different HTML based on the User-Agent string (common with some bot-detection setups), make sure the meta tags are present in the response sent to crawlers. A quick test: curl your URL with a browser User-Agent and check that the OG tags appear in the raw HTML response.