Open Graph & Twitter Card Preview – Free Social Media Meta Tag Generator

Open Graph & Twitter Card Preview

Preview how your links appear on Facebook, X (Twitter), LinkedIn, Discord, Slack, WhatsApp & iMessage. Live image upload, auto-generated meta tags, image-size validation, presets & templates โ€” 100% client-side.

๐Ÿ“˜ Facebook ๐• Twitter / X ๐Ÿ’ผ LinkedIn ๐ŸŽฎ Discord ๐Ÿ’ฌ Slack ๐Ÿ“ฑ WhatsApp ๐Ÿ’ฌ iMessage ๐ŸŒ All at once

๐Ÿ–ผ Image (1200ร—630 recommended)

Recommended: 1200ร—630 px ยท JPG/PNG ยท < 5 MB ยท 1.91:1 ratio
FB/LinkedIn: up to 90 chars ยท X: up to 70 chars ยท keep it punchy
FB/X: 200 chars ยท LinkedIn: 250 chars ยท WhatsApp shows ~65 chars

๐• Twitter-specific

๐Ÿ“‹ Quick templates

๐Ÿ“ Blog ๐Ÿ› Product ๐ŸŽซ Event ๐ŸŽ™ Podcast โ–ถ Video ๐Ÿ“ฑ App
๐Ÿ“‹ Copy meta tags ๐ŸŒ Fetch from URL ๐Ÿ’พ Save ๐Ÿ”— Share โ†บ Reset

๐Ÿท Generated meta tags ๐Ÿ“‹ Copy all


History (last 10)



How to Use the Open Graph & Twitter Card Preview
  1. Pick a platform โ€” Facebook, X/Twitter, LinkedIn, Discord, Slack, WhatsApp, iMessage, or "All at once" for side-by-side.
  2. Enter your image URL (or upload) โ€” 1200ร—630 px is best for all platforms.
  3. Add title, description, URL, site name, pick a content type.
  4. Configure X-specific options โ€” card type, site & creator handles.
  5. Pick a template for a fast start, or use Fetch from URL to pull existing OG tags from any live page.
  6. Copy the generated meta tags and paste into your <head>.
What are Open Graph & Twitter Cards?
Open Graph (OG) is a meta-tag protocol Facebook introduced in 2010 controlling how your page looks when shared on social media. Twitter Cards is X's parallel protocol. Together they govern the title, description, image, and metadata in link previews on every major platform.
Without OG tags, social platforms guess โ€” often wrong. They may grab a random thumbnail, a meaningless snippet, or just the URL. The right OG image alone can double or triple click-through rates.
All major platforms โ€” Facebook, X, LinkedIn, Pinterest, Discord, Slack, WhatsApp, iMessage, Telegram, Microsoft Teams โ€” read OG tags. X additionally reads its own twitter:* tags (and falls back to OG if those aren't present). This tool generates both so your link looks perfect everywhere.
Common Use Cases
๐Ÿ“ Blog post launchesCustom image & sharp headline for every article.
๐Ÿ› E-commerce productsRight product photo, price & description in shares.
๐ŸŽ™ Podcast episodesCustom artwork in iMessage, WhatsApp, Slack previews.
๐ŸŽซ Events & webinarsEye-catching banner that boosts RSVP click-through.
โ–ถ YouTube/video pagesOverride default thumbnails with custom hero images.
๐Ÿ“š DocumentationBranded preview when team members share doc links.
๐Ÿข Landing pagesTailor preview per audience segment without changing URL.
๐ŸŽ Holiday campaignsSeasonal OG images for Black Friday, Valentine's, etc.
๐Ÿค Partner contentCo-branded preview cards for collaboration posts.
๐Ÿงช SEO auditsSpot-check competitor OG setups via "Fetch from URL".
Why Choose Our OG Preview?
๐Ÿ“ฑ 7 platformsFacebook, X, LinkedIn, Discord, Slack, WhatsApp, iMessage.
๐ŸŒ "All at once" viewEvery platform side-by-side.
๐Ÿ–ผ Image uploadTest with local images before uploading to server.
๐ŸŒ Fetch from URLPull existing OG tags from any live page.
๐Ÿ“Š Image validationLive aspect-ratio + dimension warnings.
๐Ÿ“‹ 6 templatesBlog, Product, Event, Podcast, Video, App.
๐Ÿท Full meta-tag outputOG, Twitter, primary SEO tags.
๐• 4 card typessummary_large_image, summary, player, app.
๐Ÿ”’ 100% privateRuns in browser. Nothing uploaded.
๐Ÿ’พ Saved ยท ๐Ÿ“œ HistoryReuse configs anytime.
๐ŸŒ™ Dark ยท ๐Ÿ–ฅ Fullscreen ยท ๐Ÿ”— ShareAll standard.
๐Ÿ“ Live countersPer-platform char limits flagged.
๐ŸŽจ Realistic previewsNative colors, fonts, layouts per platform.
โ™พ Free & unlimitedNo signup. No quotas.
Frequently Asked Questions


What's the ideal OG image size?
1200ร—630 px (1.91:1) works on all platforms. FB recommends 1200ร—630, X needs at least 300ร—157 (1200ร—675 ideal), LinkedIn 1200ร—627. Keep under 5 MB. JPG for photos, PNG for graphics.


What if I don't add OG tags?
Platforms guess. Random image, favicon, generic placeholder, or nothing. The page title + meta description become the preview text. Result: ugly previews, lower CTR.


Do I need both OG and Twitter tags?
You only NEED OG โ€” X falls back to OG. But explicit Twitter tags let you customize for X. Best practice: add both.


Why doesn't my new OG image show on Facebook/LinkedIn?
They cache aggressively. Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to force re-fetch.


summary vs summary_large_image?
summary = small thumbnail beside text (article-focused). summary_large_image = big edge-to-edge image (higher engagement, recommended).


Different images per platform?
Yes โ€” set og:image for FB/LinkedIn, separate twitter:image for X. WhatsApp uses og:image at smaller dimensions. For Pinterest, use vertical 2:3 (1000ร—1500).


Should OG title match my page title tag?
Not necessarily. <title> is for SERPs (keyword-optimized), og:title is for social (can be more emotional/click-worthy).


Is my data uploaded?
No โ€” all preview is local. Optional "Fetch from URL" uses a public CORS proxy.
Related Tools
  
  



	Scroll to Top