3tej home
Home/Utilities/Open Graph + Social Card Preview

What is Open Graph + Social Card Preview?

A Open Graph + Social Card Preview projects maturity value of a recurring deposit. It applies the standard formula to the values you enter and returns the result instantly, without sending any data to a server. Test how your og:title, og:image, and og:description render on Facebook, Twitter/X, LinkedIn, Discord, Slack, and iMessage rich link previews.

Open Graph + Social Card Preview

See your og:title, og:description, and og:image rendered like Facebook, Twitter/X, LinkedIn, Discord, Slack, and iMessage. Six platforms, one screen.

Browser-only Instant Free forever Works offline No signup
← Utilities

TLDR

Enter your og:title, og:description, og:image URL, og:site_name, and page URL. The tool renders the social card exactly as it appears on six platforms: Facebook large card, Twitter/X large-image card, LinkedIn share, Discord embed, Slack unfurl, and iMessage rich link. Live updates, no signup, no upload.

og:title length
og:description length
og:image
Runs entirely in your browser. No upload, no signup, no logging. Output is for personal or commercial use; we do not claim any rights to the data you enter.

How to use this tool

  1. Enter your inputs. Each field is labeled with what it expects.
  2. Read the result instantly. Numbers update as you type or change inputs.
  3. Adjust to test sensitivity. Change one input at a time to see what moves the result most.
  4. Cross-check the formula in the section below if you want to verify the math.
  5. Copy or screenshot the result for later. The site does not save anything; close the tab and inputs are gone.

About this tool and how it works

This utility runs 100% in your browser. No data leaves your device. The underlying logic is:

Each platform uses Open Graph (og:*) tags as the base, with platform-specific overrides:
  Facebook + LinkedIn -> read og:title, og:description, og:image
  Twitter/X -> reads twitter:* first, falls back to og:* if missing
  Discord, Slack, iMessage -> read og:* directly
Images should be 1200 x 630 (1.91:1) PNG or JPG, under 5 MB.
Titles render best at 70-95 chars; descriptions at 100-200 chars.

You can verify by opening the browser developer tools and watching the Network tab; no requests fire during normal use beyond the initial page and library load.

Real-world scenarios where this tool helps

Pre-launch checks

Before sharing a new page on socials, preview the card. Catch missing og:image or truncated titles before your audience sees them.

Comparing platforms

The same OG data renders differently on each platform. iMessage shows tiny; Facebook shows big. Test all six at once.

Designing OG images

Test a draft OG image against your title and description. See where text overlap or low contrast would hurt readability.

Marketing collateral

Verify that share cards from launch posts, ads, and email signatures look clean across every channel your audience uses.

What this tool does

  • Renders your OG metadata as 6 platform-specific cards: Facebook, Twitter/X, LinkedIn, Discord, Slack, iMessage.
  • Updates live as you type so you can iterate fast.
  • Generates the corresponding <meta property="og:..."> tag block ready to paste into your <head>.
  • Warns when og:title is too long or missing, or og:description is too short or missing.
  • Highlights when og:image is missing (most platforms show a weak text-only card without it).
  • Includes Twitter Card meta tags in the copyable output for full coverage.

What it does NOT do

  • Does not fetch live OG tags from a URL. Paste your values manually.
  • Does not validate your og:image dimensions or file size. Check that yours is 1200 x 630 and under 5 MB before publishing.
  • Does not cache-bust Facebook's share scraper. After updating tags, hit Facebook Sharing Debugger to force a re-scrape.
  • Does not preview YouTube, WhatsApp, Telegram, or Reddit (each renders OG slightly differently; the six included cover 95% of share traffic).
  • Does not save your inputs. Close the tab and they're gone.

Common mistakes and pitfalls

  • Forgetting og:image entirely. Without it, Facebook and LinkedIn show a tiny text-only card that gets near-zero engagement.
  • Using a 600 x 315 image. Modern share scrapers expect 1200 x 630 (1.91:1) for crisp rendering on Retina screens.
  • Putting important text near image edges. iMessage and Slack crop differently; keep your key visual centered.
  • Skipping twitter:card. Twitter/X requires twitter:card content="summary_large_image" to show the large card; otherwise it defaults to the tiny thumbnail.
  • Not re-scraping after a change. Facebook caches OG data for ~30 days. After fixing tags, use Facebook Sharing Debugger to force a refresh.

Frequently asked questions

What is Open Graph?

Open Graph is a protocol from Facebook (now Meta) that lets you control how your URL appears when shared on social platforms. The tags live in <meta property="og:..."> in your <head>.

Do I need both og: and twitter: tags?

Twitter falls back to og: tags for most fields. The exception is twitter:card - to get the large-image card on Twitter/X, you must include <meta name="twitter:card" content="summary_large_image" />.

What size should my og:image be?

1200 x 630 pixels (1.91:1 aspect ratio). Under 5 MB. PNG or JPG. Keep important content centered to survive different platform crops.

Why is my Facebook preview still showing the old image?

Facebook caches scraped OG data for around 30 days. After updating, use Facebook Sharing Debugger (developers.facebook.com/tools/debug) to force a re-scrape.

Why does my LinkedIn preview look different from Facebook?

LinkedIn uses the same OG tags but renders the title bolder and crops images slightly tighter. Both read og:title, og:description, og:image.

Why is Discord's preview so different?

Discord shows OG cards inside the dark chat UI with a colored left border. The content is the same but the visual treatment is platform-specific.

How does iMessage handle OG?

iMessage renders rich links when the sender or receiver has the page indexed. It shows og:image and og:title in a compact rounded card. og:description is often hidden.

What if I don't have an og:image?

Most platforms fall back to a text-only card with just the title and description. Click-through rates on text-only cards are dramatically lower than image cards.

Should I use different OG tags for different posts?

Each page should have its own OG tags matching that page's content. Same OG across the whole site is a wasted opportunity.

Does WhatsApp or Telegram use OG?

Yes - both read og:title, og:description, og:image. They're not in the preview here but render similarly to iMessage.