Open Graph Preview

See exactly how your link looks when shared on Facebook, LinkedIn, X, and Slack — live as you type.

Free · No sign-up · Instant results

Generated meta tags

<!-- Open Graph -->
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
Facebook
example.com
Your Open Graph title appears here
Your og:description shows up here. Write a compelling 1-2 sentence summary that earns the click.
LinkedIn
Your Open Graph title appears here
example.com
X / Twitter (summary_large_image)
example.com
Your Open Graph title appears here
Your og:description shows up here. Write a compelling 1-2 sentence summary that earns the click.
Slack / WhatsApp unfurl
example.com
Your Open Graph title appears here
Your og:description shows up here. Write a compelling 1-2 sentence summary that earns the click.

Why preview your Open Graph card?

Catch Bad Cards

Spot truncated titles, missing images, and empty descriptions before a single person shares your link.

Every Platform

Facebook, LinkedIn, X, and Slack render cards differently. See all four side by side, updating live.

Copy-Ready Tags

Get the exact OG and Twitter Card meta tags, ready to paste into your page's <head>.

How to use the Open Graph preview tool

  1. 1

    Enter your og:title and description

    Type the title and summary you want to appear in the share card. Counters warn you when they run long.

  2. 2

    Add your og:image URL

    Paste an absolute https image URL. Use 1200×630 for a crisp, full-width card on every platform.

  3. 3

    Set page URL and site name

    These power the domain label and Slack unfurl. The preview updates instantly as you type.

  4. 4

    Copy the meta tags

    Click 'Copy' and paste the OG + Twitter Card tags into your page's <head>. Re-scrape on each platform to refresh the cache.

Open Graph preview FAQ

What are Open Graph (OG) tags?

Open Graph tags are HTML meta tags (og:title, og:description, og:image, og:url) that control how your page looks when shared on social platforms like Facebook, LinkedIn, and Slack. Without them, platforms guess at a preview from your page content, which is usually less compelling. Add them inside your page's <head>.

What image size should I use for og:image?

The recommended Open Graph image size is 1200×630 pixels (a 1.91:1 ratio). This displays as a large, full-width card on Facebook, LinkedIn, and X/Twitter when twitter:card is set to 'summary_large_image'. Keep the file under ~5MB and use an absolute https URL — relative paths are ignored by most platforms.

Why does my preview look different on each platform?

Each platform renders cards differently. Facebook and LinkedIn show a large image with the domain, title, and a short description. X/Twitter uses twitter:card to decide between a large image (summary_large_image) or a small thumbnail (summary). Slack and WhatsApp show a compact unfurl. Title and description truncation lengths also differ per platform, which this tool simulates.

Do I need Twitter Card tags if I already have Open Graph tags?

X/Twitter will fall back to your OG tags if Twitter Card tags are missing, but adding twitter:card, twitter:title, twitter:description, and twitter:image gives you full control — especially for choosing summary_large_image. This tool outputs both OG and Twitter tags so you're covered everywhere.

Why isn't my new image showing when I share the link?

Platforms aggressively cache OG data. After updating your tags, re-scrape the URL with Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh. Also confirm og:image is an absolute https URL and is publicly accessible (not behind a login or robots block).

Related free tools

Audit OG and social tags across your whole site

SEOBolt crawls every page and flags missing og:image tags, broken social cards, and incomplete Open Graph markup. Free for 2 projects.

Run Full Site Audit Free →