WebToolVerseWebToolVerse

Open Graph Preview

Runs in your browser

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

Page Details

0 / 60

Keep under 60 characters to avoid truncation in previews

0 / 160

150–160 characters recommended

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:url"         content="https://yourwebsite.com/">
<meta name="twitter:title"       content="Your Page Title">
<meta name="twitter:description" content="Your page description.">

OG Checklist

!Title provided
–Title ≤ 60 chars
!Description provided
–Description ≤ 160 chars
!Image URL set
!Page URL set
–Image loads correctly

Facebook Preview

yourwebsite.com

Your Page Title

Your page description goes here.

Approximate — actual rendering may vary slightly

Runs entirely in your browser — nothing is uploaded

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 entirely in your browser. 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, iMessage, Microsoft Teams, and Telegram all read the same OG tags with small per-platform tweaks.
This previewer can pull tags two ways. The default mode is manual entry — type your title, description, image URL, and canonical URL, and the six platform mockups update live with no network traffic. If you paste a live URL and click fetch, the browser issues a fetch request to the page; this works only when the target site sends permissive CORS headers, otherwise the request fails silently and you fall back to manual paste. Many production sites block cross-origin HTML fetches by design.
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 essentially every major link-sharing surface; Telegram, iMessage, 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.
Yes, but only when the destination sends CORS headers permitting cross-origin fetches. Most production sites block this for security, so fetch will frequently fail. Manual entry of tag values is the reliable path; for a true production check, use each platform's official debugger.
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.

Advertisement