OpenGraph & Social Card Preview
Paste a URL and see how it renders on Twitter, LinkedIn, Facebook, Slack, and Discord. Audits OpenGraph + Twitter Card meta tags, flags missing fields, and lists the raw meta tags found.
Fetched via Toolsana's edge worker (Cloudflare) — returned to your browser and not logged, though the edge may cache a fetched page for up to 5 minutes. The third-party public CORS proxies corsproxy.io and allorigins.win are used as automatic fallback. Paste HTML mode makes no network requests at all.
Enter a URL above and click Fetch to see how the link will appear on social platforms.
About OpenGraph & Social Card Preview
The OpenGraph & Social Card Preview tool fetches any URL, parses its OpenGraph and Twitter Card meta tags, and renders approximate mock previews for the five platforms that drive almost all social-share traffic: X (Twitter), LinkedIn, Facebook, Slack, and Discord. Beyond the previews, it audits which of the recommended tags are present, flags common mistakes (declared image size too small, description too long, missing twitter:card), and lists the raw meta tags it found for debugging. URL fetching is handled by Toolsana's own Cloudflare edge worker (the third-party public CORS proxies corsproxy.io and allorigins.win are an automatic fallback), while parsing, previews, and the audit run entirely in your browser. It also accepts pasted HTML directly when you can't expose your URL publicly (staging, behind-auth, localhost).
Why use a OpenGraph & Social Card Preview?
OpenGraph and Twitter Card metadata are the single biggest factor in whether a shared link gets clicked. A missing `og:image` makes a link far less eye-catching on most platforms; a wrong aspect ratio can crop your title out of frame on LinkedIn; a missing `twitter:card` falls back to plain text on X. Most teams discover these problems only after a launch tweet underperforms. This tool catches them before you ship: paste the URL, see exactly what each platform will render, fix the missing tags, ship with confidence. It also surfaces the differences between platforms — LinkedIn prefers 1200x627, Twitter wants 1200x675 for the large card, Discord picks up the theme-color, Slack collapses the description aggressively. The platform tabs show those differences so you can tune per-platform if it matters.
Who is it for?
Built for SEO and content marketing teams sanity-checking page metadata before publishing, developers writing meta-tag generation logic in CMS or static-site setups, product managers reviewing how a feature launch will look in social previews, designers verifying that the chosen og:image renders well across every platform's crop and aspect ratio, and anyone who has ever tweeted a link and been disappointed by how it appeared. Pairs well with the Meta Tag Generator and Canonical URL Checker in this same Developer Tools set.
How to use the tool
Paste a public URL into the input and click Fetch — the tool fetches the page, parses its head, and renders previews for five platforms
Or switch to 'Paste HTML' if your page isn't publicly accessible and you want to test the meta tags directly from your dev environment
Use the platform tabs (X / LinkedIn / Facebook / Slack / Discord) to see how each one will render the link
Review the audit panel — green ticks for tags that are present, amber/red for missing or problematic ones (e.g. og:image too small, description too long for X)
Open the 'Raw meta tags' panel to see the tags found, tag by tag (relative og:image URLs are resolved to absolute ones in the previews)
Iterate: fix the missing tags in your CMS or HTML, refetch, re-verify. Most fixes are one or two tags away from a great preview
Key Features
Five platform previews
X (Twitter) summary + summary_large_image, LinkedIn, Facebook, Slack unfurl, Discord embed — all rendered from the same fetched metadata so you see exactly how a link will look in every channel.
Tag audit with severity
Tag-by-tag presence check for og:title, og:description, og:image, og:url, og:type, twitter:card, the standard <title> and the canonical link. Each row shows good / warning / missing based on platform-specific recommendations.
Common-mistake detection
Flags a declared og:image:width/height below 1200x630 (or below 600x315), descriptions longer than X's 200-character limit, a missing twitter:card, and similar gotchas before you ship. The tool does not download the image, so it can't detect broken image URLs or measure images that don't declare their size.
First-party URL fetching
Paste a URL and the tool fetches the live HTML through Toolsana's own Cloudflare edge worker — no third-party proxy in the primary path. If that endpoint is rate-limited or briefly unavailable, the third-party public CORS proxies corsproxy.io and allorigins.win are tried automatically as a fallback, so a fetch rarely fails outright.
Manual HTML paste fallback
For staging URLs, behind-auth pages, or localhost work, paste the rendered HTML directly and the tool extracts and previews the same tags — no fetch needed.
Raw meta-tag dump
Open the panel to see the list of meta tags found in the page, including tags the previews don't use. Useful for debugging unfamiliar generators.
100% client-side parsing
Parsing, preview rendering, and the audit run entirely in your browser — none of that logic touches a server. The one exception is the initial URL fetch, handled by Toolsana's edge worker (or a third-party public proxy as fallback) and returned to your browser. The worker does not log the pages it fetches, but Cloudflare's edge cache may keep a fetched page for up to 5 minutes.
Common Use Cases
Pre-launch social preview check
Scenario: You're shipping a new product page or blog post that will be tweeted, posted to LinkedIn, and shared in Slack — and you want to be sure the previews look good in every channel before going live.
✓ Run the URL through the tool, look at the five platform tabs, fix anything that looks wrong (cropped title, missing image, wrong description), publish with confidence. Saves the post-launch 'why does our LinkedIn preview look broken' Slack message.
Auditing a CMS / static-site meta-tag setup
Scenario: You inherited a Next.js / Astro / Hugo site and want to verify that pages are emitting OG tags correctly across types (blog post, product, landing page).
✓ Check three or four representative URLs through the tool. Patterns of missing tags (e.g. og:type defaulting to website everywhere, including for articles) jump out. Fix once at the template level.
Debugging a 'this link looks bad on Slack' report
Scenario: A teammate pasted a link in Slack, got a broken preview, and tagged you. You need to know whether it's a Slack quirk, a missing tag, or a 404 image.
✓ Open the URL in the tool. The Slack tab shows an approximation of what they saw; the audit panel and raw tags show likely causes (e.g. a missing or relative og:image). Broken image URLs aren't detected, so also open the og:image URL directly.
Designer QA on og:image artwork
Scenario: You produced a new hero image at 1200x630. You want to see how it looks in actual platform crops (Twitter crops to 2:1, LinkedIn to 1.91:1, Discord to roughly square).
✓ Set the URL of any test page that has the new image as og:image. The platform tabs show an approximation of the crop each platform applies — catch text getting cut off before publication.
Comparing your meta-tag setup to a competitor's
Scenario: A competitor's links always look clean on social; you want to know what they're doing right.
✓ Run their URL through the tool, compare to yours. The audit panel and raw-tags dump make it obvious which fields they fill that you don't.
Mock previews approximate the X / LinkedIn / Facebook / Slack / Discord layouts; the audit is the more reliable signal.
Parsing and previewing run client-side. URL fetch transits Toolsana's edge worker (pages are not logged, but may be cached at the edge for up to 5 minutes), with third-party public CORS proxies as automatic fallback; switch to 'Paste HTML' to make no network call.
Static site — no backend dependency.
Frequently Asked Questions
Why does the URL fetch sometimes fail?
The tool fetches primarily through Toolsana's own Cloudflare edge worker, rate-limited to 10 requests per minute per IP, limited to HTML pages of up to 2 MB and a 10-second fetch time. If that limit is hit, or the worker is briefly unavailable, the tool automatically falls back to the third-party public CORS proxies corsproxy.io and allorigins.win, which have their own independent rate limits. If the worker rejects the URL itself (a private address or a non-HTML response), there is no fallback and you see the reason. If both paths fail — usually because the target site blocks automated fetches outright — switch to 'Paste HTML' and supply the `<head>` section directly from your browser's view-source.
Are these previews pixel-perfect?
They are approximate mock-ups of each platform's layout, crop and truncation rules, and platforms change their unfurl rendering periodically. Treat the previews as 'will this work?' not 'this is exactly what users see'. The audit panel is the more reliable signal.
What size should my og:image be?
1200x630 (1.91:1 aspect) is the sweet spot — it satisfies LinkedIn's minimum, Facebook's minimum, and Twitter's summary_large_image. Discord and Slack are flexible. Twitter still accepts 1200x675 (16:9) for summary_large_image and renders it taller. Below 600x315 and most platforms refuse to render the large card and fall back to thumbnail.
Why is twitter:card needed if I have og:title and og:description?
X (Twitter) reads OG tags as fallback, but the *type of card* it renders is controlled by the twitter:card meta tag (`summary` for small thumbnail, `summary_large_image` for the big banner). Without it, X falls back to the small summary card by default — which often makes the link look weaker than it should.
Does this tool work on URLs behind auth or on localhost?
No — and this is by design, not a limitation. The first-party fetch endpoint deliberately refuses requests to localhost, private IP ranges (10.x, 172.16-31.x, 192.168.x), and link-local/cloud-metadata addresses as an SSRF protection, and the public CORS proxy fallback can't reach behind-auth pages or your local network either. For staging, behind-auth pages, or localhost work, use 'Paste HTML' mode instead — open your browser's DevTools, copy the rendered `<head>`, and paste it. The tool extracts and previews the same tags with zero network calls.
Why does my image have the right dimensions but the preview still looks weird?
Two common causes: (1) The image is being served with a wrong content-type or is behind a redirect that some scrapers don't follow. (2) Each platform has its own crop rules — a 1200x630 image is centered on LinkedIn but cropped to 2:1 on Twitter and roughly square on Discord. Test critical text near the center, not at the edges.
Does this tool send my URL or HTML anywhere?
Parsing, previewing, and auditing run entirely in your browser — that part never touches a server. The URL you enter in 'Fetch URL' mode transits Toolsana's own Cloudflare edge worker: it fetches the page and returns the HTML to your browser. The worker doesn't log the pages it fetches, but Cloudflare's edge cache may keep a fetched page for up to 5 minutes. If the worker is unavailable, the tool falls back to the third-party public CORS proxies corsproxy.io and allorigins.win, which see the URL and the page they fetch but not your browser session. To avoid any network call entirely, use 'Paste HTML' mode.
Where is og:type required vs optional?
All platforms accept any og:type but most use it for richer rendering: og:type=article on Twitter and LinkedIn enables the byline and reading-time hints; og:type=product on Facebook unlocks structured product cards. If you don't set it, it defaults to website everywhere, which is functional but less rich.
Technical Specifications
Supported Formats
- ✓Meta tag extraction: og:* (OpenGraph), twitter:* (Twitter Card), <title>, meta name=description, link rel=canonical, meta name=theme-color
- ✓URL absolutization: relative og:image / twitter:image URLs resolved against og:url, the canonical link or the fetched URL
- ✓Platform previews: X (Twitter) summary + summary_large_image, LinkedIn feed card, Facebook feed card, Slack unfurl, Discord embed
- ✓Audit checks: presence of og:title, og:description, og:image, og:url, og:type, twitter:card, <title> and canonical; declared og:image:width/height; og:description length
- ✓URL fetch: Toolsana edge worker (Cloudflare) primary, third-party public CORS proxy fallback (corsproxy.io, allorigins.win)
- ✓Manual mode: paste-HTML fallback with no network call
Limits & Performance
- •File Size: URL fetch limited to 10 requests/minute per IP, 2 MB pages and 10 seconds on the first-party edge endpoint; the public-proxy fallback has its own limits; manual paste has no limit
- •Validations: Live parsing as the URL/HTML changes; preview render is sub-100ms
- •Response Time: Fetch typically 100-800ms via the edge worker; proxy fallback (when triggered) adds 200-1500ms depending on target; subsequent previews are instant
- •Browsers: All modern browsers (Chrome, Firefox, Safari, Edge); works offline only in paste-HTML mode
Pro Tips
- 1200x630 is the safest og:image dimension across all five platforms. If you only set one image size, set this one.
- Always include og:url with the canonical URL — it tells crawlers which version of the page to attribute the share to (important when you have utm parameters in the link being shared).
- Twitter's twitter:image overrides og:image when both are present. Use this if you want a different image specifically for Twitter shares.
- Discord picks up the theme-color meta tag as the embed border accent — easy way to add brand consistency to your link unfurls.
- Keep og:description under 200 characters. Anything past that gets truncated on Twitter and most other platforms; long descriptions also get re-summarized aggressively by Slack.
- If your og:image lives on a CDN with hotlink protection, double-check it's accessible without auth. Platform crawlers don't carry your cookies.
- After updating tags on a previously-shared URL, force a re-scrape in each platform's debugger (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) — they cache aggressively.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.