Overview
What this tool does
A social card previewer shows you how a link will look when shared on X (Twitter), Facebook, LinkedIn, and other platforms before you push your changes live. Each platform has its own card layout (Twitter's summary_large_image vs summary, Facebook's rich preview, LinkedIn's compact card), so a tag that works on one might look broken on another. Paste your <head> markup (or just the Open Graph and Twitter meta tags) into the input and the tool renders all three platform mockups side-by-side. It also flags missing or malformed tags (no og:image, unknown twitter:card type, title length exceeding the platform's truncate threshold) so you know what to fix before you ship. 100% client-side parsing; no scraping of arbitrary URLs.
How to
Use it in 3 steps
- Paste your page's <head> markup into the textarea. The sample loads on first visit so you can see how it works.
- Read the issues panel for missing or out-of-spec tags. Errors (red) will break the preview; warnings (amber) are best-practice suggestions.
- Look at the three platform cards below to see how the share will render on X, Facebook, and LinkedIn.
- Tweak your tags, paste the updated head, and the previews + issues update live.
FAQ
Frequently asked questions
▶Why doesn't the tool just fetch my URL and read the tags?
Because browsers block cross-origin fetches for security reasons. We'd either need a server-side proxy (which we don't run, by design) or to rely on a free CORS proxy (unreliable and rate-limited). Paste-the-tags works for the 90% case where you're editing your own site and already have the markup in front of you.
▶How accurate are the previews?
Visually close to the real thing, but not pixel-perfect. Each platform tweaks its card layout over time and runs A/B tests, so the exact rounding, typography, and chrome can vary by user. The previews here show the canonical layout each platform documents in their developer docs.
▶Why is the image not loading in the preview?
Most likely the og:image URL returns a 404, isn't reachable from your browser (intranet/staging), or has CORS restrictions that block direct hot-linking. Visit the URL in a new tab to confirm; if it loads there, the cards will too once your site is public.
▶Twitter says my card looks bad even though this previewer is happy.
Twitter's card-rendering pipeline caches aggressively. After updating your tags, paste your URL into the Card Validator at cards-dev.twitter.com/validator to force a re-fetch. Facebook has the equivalent at developers.facebook.com/tools/debug.
▶Is my pasted markup uploaded?
No. Parsing happens entirely in your browser via regex on the raw text. Nothing reaches a server.
▶Why aren't fancier platforms (Discord, Slack, iMessage, WhatsApp) shown?
All of those use the standard Open Graph tags and render the same as Facebook/LinkedIn (a rich card with image, title, description, domain). The three previewers shown here cover the meaningful layout differences; the others render similarly.