og:title, og:description, og:image, og:url, og:type, and twitter:card. Some platforms fall back to <title> and <meta name="description"> if OG is missing.
Open Graph / Twitter Card Preview
Live-preview and generate OG/Twitter meta tags. Paste your HTML or fill the fields — everything runs locally.
Page URL
Title
Site Name & Favicon
Description
Image URL (1200×630 recommended)
Twitter
Paste & Parse HTML (optional)
Drop a local image (for preview only), or
Site Name • example.com
Your page title appears here
Quick, engaging description improves clicks. Aim for 140–200 characters and avoid truncation.
Example Site • example.com
LinkedIn preview title
LinkedIn uses Open Graph tags. Make sure your image is at least 1200×627 for best results.
Generated <meta> tags
Image: —
Title: 0
Desc: 0
<!-- Fill fields above and click “Generate Tags” -->
Tip: Use both OG and Twitter tags for broad compatibility.
Note: Due to browser security (CORS), this tool doesn’t fetch remote pages. Paste your HTML head to auto-parse or fill fields manually.
Live Social Preview
Instant cards for Facebook, X (Twitter), LinkedIn, Slack, iMessage & more.
Auto Fetch & Parse
Enter a URL to pull og:* and twitter:* tags, canonical, and fallbacks.
Smart Warnings
Flags missing tags, tiny images, bad aspect ratios, and robots blocking crawlers.
Image Size Checker
Validate dimensions/bytes for og:image & twitter:image to avoid cropping.
Inline Edits
Test different titles, descriptions, and images before you ship.
Private & Local
All previews render in your browser — no uploads or analytics.
How to Preview & Debug Social Cards
See exactly how your link will appear on major apps before you publish.
- Paste your URL and click Fetch to load
og:*andtwitter:*tags. - Check the previews (Facebook, X/Twitter, LinkedIn, Slack, iMessage) and review warnings.
- Optionally edit title, description, and image to test alternatives.
- Fix issues on your site: add missing tags, update images, or adjust meta values.
- Use platform debuggers to refresh cache (e.g., “scrape again”) and verify the final look.
Open Graph / Twitter Card Preview — Frequently Asked Questions
Troubleshooting images, tags, caches, and platform quirks.
Use a large, correct aspect ratio (e.g., 1200×630 for many platforms). Avoid tiny files or odd ratios that force cropping.
Platforms cache aggressively. Use each platform’s debugger to force re-scraping after changes.
It’s best practice. Some platforms read OG; X/Twitter prefers twitter:*. Duplicate values are fine.
Most CMSs allow custom head tags via settings or plugins. Worst case: server-side templates or edge rewrites to inject meta.
Use og:locale and og:locale:alternate. Ensure per-locale URLs have correct canonical and hreflang.
Some platforms support og:image arrays. The tool lists all images and shows which one likely appears first.
Each app has unique rules for truncation and image sizing. The tool approximates these layouts closely.
Some scrapers obey robots/meta directives. If previews fail, ensure bots aren’t blocked from your HTML or images.
Yes. Download a PNG/SVG of the rendered card to share with clients or teammates.