Social Media Preview (Open Graph)

See how your link will look when shared on Facebook, X, LinkedIn and WhatsApp — and copy ready-made Open Graph & Twitter meta tags.

Page Details
Platform Previews
Facebook
1200 × 630 image
EXAMPLE.COM
Your page title
Your page description will appear here.
X (Twitter)
1200 × 630 image
Your page title
Your page description will appear here.
🔗 example.com
LinkedIn
1200 × 630 image
Your page title
example.com
WhatsApp
1200 × 630 image
Your page title
Your page description will appear here.
example.com
Meta Tags for Your <head>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="example.com" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="Your page description will appear here." />
<meta property="og:image" content="https://example.com/og-image.jpg" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="Your page description will appear here." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
12.070 viewsYour data is processed in your browser and never sent to a server.

Related tools

Meta Tag Generator
Generate SEO meta, Open Graph and Twitter Card tags instantly. Free and private.
Keyword Density
Analyze keyword density and word frequency in any text. Free and private.
Sitemap Generator
Generate an XML sitemap from a list of URLs in your browser. Free and private.
Robots.txt Generator
Build a robots.txt file with allow/disallow rules in your browser. Free and private.

Get to know this tool

Social Media Preview shows you exactly how your link will look when it's shared on Facebook, X (Twitter), LinkedIn and WhatsApp — before you publish. Fill in the title, description and image, watch the four platform cards update live, then copy the generated Open Graph and Twitter meta tags into your page's <head>.

What is Open Graph and Why Does the Preview Matter?

When someone shares a link, social platforms don't guess what to display — they read specific meta tags: the Open Graph protocol (og:title, og:description, og:image) used by Facebook, LinkedIn and WhatsApp, and the Twitter Card tags used by X. If those tags are missing or wrong, your share appears as a bare link or with a random image, and click-through rates plummet. Since every platform crops titles and descriptions differently, previewing the result before deploying saves embarrassing surprises.

Key Features

  • Four live platform mockups: Facebook, X large-image card, LinkedIn and WhatsApp — each with its own realistic layout and truncation behavior.
  • Character counters with limits: See instantly when your title (60) or description (155) will be cut off.
  • Local image preview: Load the 1200×630 image from your device and see how it crops — the file is never uploaded.
  • Ready-to-paste meta tags: A complete og: + twitter: tag block generated from your inputs, properly HTML-escaped.
  • Sample content: One click fills the form so you can explore how each field maps to the cards.
  • Fully client-side: No fetching of your URL, no crawling, no data sent anywhere.

How to Use the Social Media Preview?

  1. Enter your site name, page URL, title and description.
  2. Optionally pick the share image from your device (1200×630 works everywhere).
  3. Compare the four platform cards — check that nothing important is truncated.
  4. Adjust wording until the cards look right; the counters guide you to safe lengths.
  5. Press Copy Code and paste the meta tags into your page's <head>.

Why Choose This Tool?

Debugging social cards usually means deploying, sharing a test post, discovering the crop is wrong, and repeating. This tool moves that loop before deployment and keeps it private: nothing is crawled or uploaded, so you can prototype cards for unreleased pages without exposing them. The generated tag block covers both the Open Graph protocol and Twitter Cards, which together handle every major platform.

Frequently Asked Questions (FAQ)

What size should the og:image be?

1200×630 pixels (a 1.91:1 ratio) is the safe universal choice. Keep critical content centered — platforms crop the edges differently, especially in small link previews like WhatsApp's.

Why does my real share look different from the preview?

Platforms cache link data aggressively. After changing your meta tags, use the platform's sharing debugger to refresh its cache, and note that some platforms override parts of the card (e.g. showing the page's canonical domain).

Do I need both og: and twitter: tags?

The og: tags cover Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord and most others. X reads twitter: tags first and falls back to og: — including both, as this generator does, is the reliable choice.

Is my image uploaded to check it?

No. The image is previewed straight from your device via an object URL and never leaves your browser. Remember to upload the real file to your site and set its public URL in the og:image tag.