Open Graph Preview

See exactly how your links appear when shared on Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, and Discord — updates live as you type.

Fill in your title, description, image, and URL to see how the link card will render on Facebook, X (Twitter), LinkedIn, Slack, Discord, and WhatsApp — each platform crops the image differently and falls back on different fields when og:image is missing. Useful for catching a missing og:image, a title that gets truncated on Twitter, or a description that reads fine on LinkedIn but awkwardly on Facebook. It also outputs the ready-to-paste Open Graph and Twitter Card tags. Everything runs client-side — nothing is uploaded.

Page Details

0 / 60

Keep under 60 characters to avoid truncation in previews

0 / 200

155–200 characters recommended for og:description

Paste a URL — a thumbnail preview will appear here

Generated OG Tags

<!-- Open Graph / Social Preview Tags -->
<meta property="og:type"        content="website">
<meta property="og:url"         content="https://yourwebsite.com/">
<meta property="og:title"       content="Your Page Title">
<meta property="og:description" content="Your page description.">

<!-- Twitter / X Card -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:title"       content="Your Page Title">
<meta name="twitter:description" content="Your page description.">

OG Checklist

Needs attentionTitle provided
Not applicableTitle ≤ 60 chars
Needs attentionDescription provided
Not applicableDescription ≤ 200 chars
Needs attentionImage URL set
Needs attentionPage URL set
Not applicableImage loads correctly

Facebook Preview

yourwebsite.com

Your Page Title

Your page description goes here.

Approximate — actual rendering may vary slightly

Next steps

Meta Tag Generator

Generate optimized meta tags that help your pages rank higher.

Schema Markup Generator

Generate structured data markup that helps search engines understand your site.

Title Tag Analyzer

Analyze your page title and meta description with a live Google SERP preview.

Resize image

Resize to exact pixel dimensions or pick from ready-made presets.

View all tools →
Runs right inside your browser tab. No uploads. Your files stay private.

What Is an Open Graph Preview?

Open Graph is a metadata protocol Facebook open-sourced in 2010 that has since become the universal standard for link previews on the social web. The tags live in the document head as meta property=og:title, og:description, og:image, og:url, og:type, og:site_name, and og:locale. When any platform unfurls your URL, it fetches the HTML, scans for these tags, and renders a card from whatever it finds.
Twitter, now X, layered its own twitter:* tag set on top, which takes precedence when present. The most useful Twitter-specific control is twitter:card=summary_large_image, which forces the wide image layout that drives meaningfully higher engagement than the default summary card. WhatsApp, LinkedIn, Slack, Discord, Microsoft Teams, and Telegram all read the same OG tags with small per-platform tweaks.
This previewer works through manual entry — type your title, description, image URL, and canonical URL into the fields and the six platform mockups update live with no network traffic. Everything stays in your browser tab; nothing is uploaded or fetched. Once the previews look right, push the tags to your page and use each platform's official debugger to verify the live URL and flush its cache.
Each preview is a faithful reproduction of how a specific platform composes the card today. Facebook crops images to 1.91:1 and shows the domain in small caps above the title. LinkedIn truncates titles around 200 characters and renders them slightly bolder. Slack's unfurl is the most compact — a small thumbnail right of the text, not a hero image, unless your app has the unfurl scope. Discord shows the largest hero image of the bunch.
Aspect ratio and resolution dictate how the image actually appears. Use 1200x630 pixels at 1.91:1 for the safest result across every platform. WhatsApp specifically requires the OG image to be under 300 KB or it falls back to a tiny thumbnail. Always supply absolute URLs in og:image — relative paths break unfurlers that resolve from a different origin.
The most common debugging surprise is caching. Facebook caches OG data for around 30 days per URL, LinkedIn for about a week, Slack until the workspace clears it. Once a card is wrong on a platform, fixing the tags is not enough — you also need to force a recrawl. Facebook has the Sharing Debugger, LinkedIn the Post Inspector, X the Card Validator. Each issues a fresh fetch and refreshes the cache.
Because everything runs locally, you can iterate on titles, image sizes, and descriptions without redeploying or waiting for a CDN purge. Once the previews look right across all six platforms, push the tags live and use the platform-specific debuggers to flush their caches and verify the production URL.

Common Use Cases

01

Pre-launch verification

Confirm every platform shows the intended title, image, and description before a page goes public.

02

Campaign landing pages

Make sure paid social and email-driven URLs unfurl with on-brand cards before the first click hits.

03

Bug reproduction

Recreate a wrong card a stakeholder reported by pasting their tag values and seeing the exact platform render.

04

Editorial publishing

Check each article's social card during review so the team catches missing images or truncated headlines pre-publish.

Frequently Asked Questions

Facebook, X with the summary_large_image card, LinkedIn, WhatsApp, Slack unfurl, and Discord embed. These six cover the major link-sharing surfaces; Telegram and Teams render very close to one of these layouts.
1200x630 pixels at a 1.91:1 ratio is the universal sweet spot. It satisfies Facebook's recommended size, Twitter's summary_large_image card, LinkedIn, and Discord. Keep the file under 1 MB total and under 300 KB if WhatsApp matters to you, since WhatsApp falls back to a thumbnail above that limit.
Each platform caches OG metadata per URL for days or weeks. Edit the tags, then visit the platform's debugger — Sharing Debugger for Facebook, Post Inspector for LinkedIn, Card Validator for X — and trigger a recrawl. The cache flushes and the new image takes over.
Slack defaults to a compact unfurl with a side thumbnail for most third-party domains. Full-width hero images require either a verified Slack app with the links.unfurl scope or that the target domain is allow-listed for that workspace. The preview reflects the default behavior most users see.
No — this tool is a manual-entry previewer only. There is no URL fetch or HTML parsing mode. For a live production check, use each platform's official debugger: Sharing Debugger for Facebook, Post Inspector for LinkedIn, and Card Validator for X.
Yes if Twitter and X traffic matters. Twitter prefers its own twitter:* tags when they exist and falls back to OG otherwise. Setting both ensures consistent rendering and lets you specify summary_large_image, which produces the wider, higher-engagement card layout.
og:type categorizes the resource — article for blog posts, website for marketing pages, product for e-commerce, video.movie for video content. Most platforms only render slightly different cards based on type, but article and product unlock secondary fields like article:published_time and product:price:amount.
Each platform has its own length limit. Facebook caps around 60 characters before truncation, X around 70, LinkedIn around 200. Aim for 50-60 characters in og:title for the safest cross-platform result, and put the most important words first.
No. All rendering happens locally in the browser tab using React state. Nothing is sent to any server, and refreshing the page clears the form. Safe to use with unpublished or NDA-covered content.
Tools like Perplexity, ChatGPT, and Google AI Overviews increasingly read OG tags to summarize pages they cite. Clean, accurate OG titles and descriptions now influence how your content is described inside AI answers, not just how it unfurls in social feeds.
Maintained by the WebToolVerse teamLast updated Suggest an edit

Advertisement