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 shows the raw HTML head output.
Uses public CORS proxies (corsproxy.io / allorigins.win) with fallback. The page you fetch never goes through Toolsana.
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 pixel-faithful 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 (image too small, description too long, missing twitter:card), and dumps the raw `<head>` meta output for debugging. It runs in your browser via a CORS proxy and 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` cuts click-through by 40-60% on most platforms; a wrong aspect ratio crops 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 previews show those differences side-by-side 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 — the tool fetches the page, parses its head, and renders previews for five platforms
Or click '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 exact tag-by-tag output, with values resolved (relative og:image URLs are absolutized)
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, standard <title> and meta description. Each row shows green / amber / red based on platform-specific recommendations.
Common-mistake detection
Flags og:image dimensions below the 1200x630 minimum LinkedIn / Facebook expect, descriptions longer than X's 200-character limit, missing twitter:card on a Twitter share button page, og:image URLs that 404, and similar gotchas before you ship.
Live URL fetching with CORS proxy
Paste a URL and the tool fetches the live HTML via a public CORS proxy with automatic fallback if one is rate-limited. Multiple retries, never fails silently.
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
Toggle to see the exact list of meta tags found in the head, with relative URLs resolved against the canonical, and unknown tags (theme-color, application-name, etc.) included. Useful for debugging unfamiliar generators.
100% client-side parsing
URL fetching uses a public proxy, but parsing, preview rendering, and the audit run entirely in your browser. No content is sent to Toolsana's servers, and the page you're checking never goes through ours.
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 what they saw; the audit panel shows the actual cause (e.g. og:image returning 404 because the path was hardcoded for a different environment).
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 the crop each platform will apply — 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.
Frequently Asked Questions
Why does the URL fetch sometimes fail?
The tool fetches via public CORS proxies (corsproxy.io, allorigins.win) which can rate-limit or be temporarily down. The tool tries multiple in sequence; if all fail, switch to 'Paste HTML' and supply the head section directly from your browser's view-source. For high-volume use, deploy your own Cloudflare Worker proxy.
Are these previews pixel-perfect?
They're faithful to current platform layouts as of mid-2026 and match the actual crop, aspect ratio, and field truncation rules — but platforms tweak 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?
Public CORS proxies can't reach behind-auth pages or localhost. For those, use 'Paste HTML' mode — open your browser's DevTools, copy the rendered <head>, and paste it. The tool extracts and previews the same tags.
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. The URL fetch goes through a public CORS proxy (corsproxy.io or allorigins.win) — those proxies see the URL but not your browser session. If you don't want to use a third-party proxy at all, use 'Paste HTML' mode, which never makes any network calls.
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 canonical or fetched URL
- ✓Platform previews: X (Twitter) summary + summary_large_image, LinkedIn feed card, Facebook feed card, Slack unfurl, Discord embed
- ✓Audit checks: presence of recommended tags, og:image dimensions, description length, twitter:card type
- ✓URL fetch: public CORS proxy (corsproxy.io primary, allorigins.win fallback)
- ✓Manual mode: paste-HTML fallback with no network call
Limits & Performance
- •File Size: URL fetch limited by proxy rate limits (typically a few requests per second per IP); manual paste has no limit
- •Validations: Live parsing as the URL/HTML changes; preview render is sub-100ms
- •Response Time: Fetch typically 200-1500ms depending on proxy and 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.