Social Share Preview Generator
Preview how your link card will look on Facebook, Twitter/X, LinkedIn, and Discord before you publish.
Live Preview
Meta Tag HTML
About this tool
What this social share preview tool does
When a link gets shared on Facebook, X, LinkedIn, or Discord, the platform builds a preview card from your page's Open Graph and Twitter Card meta tags — not from the page content itself. If those tags are missing, wrong, or use an image at the wrong aspect ratio, the card can end up blank, cropped badly, or showing the wrong title entirely, and you usually don't find out until after you've already shared it. This tool lets you write the title, description, image, and site name once and see exactly how the resulting card renders on four major platforms side by side, plus gives you the finished meta tag HTML to paste into your page's <head>.
How to use it
- Fill in your page URL, site name, title, and description.
- Add an image URL — ideally 1200×630px, the 1.91:1 ratio that works cleanly across all four platforms without awkward cropping.
- Choose a Twitter Card type: summary_large_image for a big banner image, or summary for a smaller square thumbnail alongside the text.
- Watch the four live previews update as you type, and keep an eye on the character counters — titles over ~60 characters and descriptions over ~155 tend to get truncated on some platforms.
- Copy the generated <meta> tag block straight into your page's HTML.
Real-world use cases
Checking a blog post's share card looks right before hitting publish, instead of finding out it's broken after someone's already posted it. Writing OG tags for a new landing page from scratch and wanting to see the actual visual result instead of guessing from raw HTML. Debugging why a page's Twitter Card looks different from its Facebook card — often because one platform is falling back to different tags than expected.
Frequently asked questions
What's the difference between Open Graph tags and Twitter Card tags?
Open Graph (og:*) is the standard Facebook created that most platforms, including LinkedIn and Discord, read by default. Twitter/X uses its own twitter:* tags, though it falls back to Open Graph tags for anything it's missing. This tool generates both, since a complete setup needs them together.
What image size should I actually use?
1200×630 pixels (a 1.91:1 ratio) is the safe, widely recommended size — it displays as a full-width banner on Facebook, LinkedIn, and Discord, and works for both Twitter Card types without stretching or awkward cropping.
Why does my card show the wrong title even after I updated my meta tags?
Most platforms cache a page's preview card the first time it's shared and don't refetch it automatically. Facebook has a Sharing Debugger and LinkedIn has a Post Inspector that let you force a re-scrape after you fix your tags — this tool doesn't do the re-scraping itself, only the preview and tag generation.
Do I need separate images for Facebook and Twitter?
No, one 1200×630 image works for both when using summary_large_image — that's exactly why the tag structure lets twitter:image fall back to og:image if you only specify one.
What happens if I leave the description blank?
Most platforms fall back to pulling the first line of visible text from the page itself, which is often messy (navigation text, a cookie banner, etc.) — that's exactly the unpredictable result this tool helps you avoid by writing the description explicitly.