SEO 100% in your browser

Open Graph Card Preview — Social Share Tester

See how your page will look when shared on Facebook, X/Twitter, LinkedIn, and WhatsApp — all four previews side by side. Adjust title, description, image and watch every platform update live.

Facebook
EXAMPLE.COM
Your title here
Your description here.
X / Twitter
example.com
Your title here
Your description here.
LinkedIn
Your title here
Your description here.
example.com
WhatsApp
Your title here
Your description here.
example.com

Open Graph Card Preview — See Your Page on Every Social Network

Before you share a link on social media, preview exactly how it will appear on Facebook, X (Twitter), LinkedIn, and WhatsApp — all four cards rendered side by side. Adjust the title, description, image and URL and watch every preview update live. This is the fastest way to make sure your Open Graph tags produce great-looking shares everywhere.

Why each platform looks different

  • Facebook: large image (1.91:1), domain in uppercase above title, gray info bar below
  • X / Twitter: large summary card with image on top, lighter rounded design
  • LinkedIn: large image, blue-tinted info bar, more emphasis on the title
  • WhatsApp: compact card with a small square thumbnail on the right — very different layout

Recommended dimensions

  • Image: 1200×630 px (1.91:1 ratio) — works for Facebook, Twitter (summary_large_image), and LinkedIn
  • Title: aim for 50–70 characters so it doesn’t get truncated anywhere
  • Description: 100–150 characters is a safe sweet spot
  • WhatsApp truncates aggressively — keep the start of the title meaningful

How to use it

  • Type or paste your title, description, and URL
  • Either paste an image URL or click “Upload” to test a local image (it stays in your browser)
  • Each platform shows its own preview using its real fonts, colors, and aspect ratios
  • Iterate until every preview looks great — then save those values to your page’s <meta> tags

The Open Graph tags behind the scenes

The values shown here correspond to these meta tags on your page:

  • <meta property="og:title" content="...">
  • <meta property="og:description" content="...">
  • <meta property="og:image" content="...">
  • <meta property="og:url" content="...">
  • <meta name="twitter:card" content="summary_large_image">

Use our Meta Tags Generator to produce the full HTML once you’re happy with the previews.

Privacy

This tool runs entirely in your browser. Uploaded images are kept locally — nothing is sent to any server.