Preview how your website appears when shared on Facebook, Twitter/X, LinkedIn and WhatsApp. Edit Open Graph and Twitter Card meta tags and see live social media card mockups instantly.
Every link you share — in Slack, in iMessage, in a Discord channel, on LinkedIn, in WhatsApp, in a Tweet — renders as a card. The card's title, description, image, and brand badge are not picked by the platform; they are read out of the HTML <head> of the page you linked. Get the meta tags right and your links convert. Get them wrong and your URL shows up as a bare blue link with no preview at all. This guide is the working reference for Open Graph, Twitter Cards, and the platform-specific quirks that trip up every team's first marketing campaign.
The Open Graph protocol (originally Facebook's, now ubiquitous) is the meta-tag set every modern social platform reads. The minimum viable head:
<meta property="og:title" content="Page Title — Brand">
<meta property="og:description" content="A two-sentence pitch that fits in 200 chars.">
<meta property="og:url" content="https://example.com/canonical-page">
<meta property="og:image" content="https://example.com/og-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">Note the property= rather than name= — that is correct for OG tags. Mixing the two attributes is the most common reason a Facebook crawler "doesn't see" the tags.
Twitter (now X) reads its own twitter: namespace. Where a Twitter tag is missing, X falls back to the matching OG tag. The minimum:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-1200x630.jpg">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@authorhandle">Important: Twitter uses name=, not property=. Do not mix.
| Platform | Recommended dimensions | Aspect | Min size | Max file size | Format |
|---|---|---|---|---|---|
| Facebook (large card) | 1200 × 630 | 1.91:1 | 600 × 315 | 8 MB | JPG, PNG, GIF, WebP |
| Twitter / X (summary_large_image) | 1200 × 628 | ~1.91:1 | 300 × 157 | 5 MB | JPG, PNG, WebP, GIF |
| Twitter / X (summary) | 240 × 240 | 1:1 | 144 × 144 | 5 MB | Same |
| 1200 × 627 | ~1.91:1 | 600 × 315 | 5 MB | JPG, PNG, GIF | |
| 300 × 200 minimum, 1200 × 630 ideal | 1.91:1 | 300 × 200 | 300 KB | JPG, PNG (≤ 600 KB hard cap on some clients) | |
| Slack | 1200 × 630 ideal | 1.91:1 | — | 5 MB | JPG, PNG, GIF |
| Discord | 1200 × 630 | 1.91:1 | — | 8 MB | JPG, PNG, GIF, WebP |
| iMessage | 1200 × 630 | 1.91:1 | — | — | JPG, PNG |
The single best image to ship for "everywhere" is 1200 × 630 JPG, < 300 KB, with text large enough to read at 200 px wide. That fits every platform's recommendations and keeps WhatsApp happy.
Two operational rules: serve the same HTML to bots as to humans (cloaking is a guideline violation everywhere), and do not block these UAs in your robots.txt or WAF — that's the most common cause of "the link preview disappeared yesterday".
Every platform aggressively caches the meta tags from your URL. After you change the OG image, the cache can hold the old version for hours or days. Each platform has its own purge tool:
?v=2 (any unique query param) forces a re-fetch.Production tip: bake a content hash into the OG image filename (og-card-a3b9.jpg) so the URL itself changes when the image does — bypassing every cache.
Hard rule: every important page should have unique OG tags. Site-wide identical tags cause every Facebook share to look the same — the "10 different blog posts all showing the homepage hero" problem. The pragmatic split:
Static OG images do not scale. The pattern that has won is server-rendered or build-time-rendered OG images using a templated SVG or HTML-to-image renderer. The best tools as of 2026:
@vercel/og — render React JSX to a 1200 × 630 PNG at the edge.satori-html, Eleventy eleventy-plugin-og-image — build-time variants.property= and name=. OG uses property; Twitter uses name. Mixing causes Facebook to silently ignore the tag./og-image.jpg doesn't work; https://example.com/og-image.jpg does.og:image:width and og:image:height. Without these, Facebook does an extra HEAD request to size the image — and may show the small card while it waits.og:url to the canonical URL. Tracking-parameter URLs all share with the same OG content if you canonicalize properly.The og:type property unlocks platform-specific rich content. The values that matter in 2026:
website — default. Generic page.article — blog posts, news. Enables article:author, article:published_time, article:section, article:tag.product — e-commerce. Enables product:price:amount, product:price:currency, product:availability.video.other / video.movie / video.episode — video content. Pairs with og:video.music.song / music.album — Spotify-style music links.book — paired with book:isbn, book:author.Search results for "open graph preview", "og tag tester", and "twitter card validator" return a mix of single-platform validators (Facebook Sharing Debugger, X Card Validator) and multi-platform preview tools. Three things separate the good from the noise: whether the preview matches what each platform actually renders post-cache, whether Twitter / X Cards are first-class (not Facebook with a Twitter skin), and whether the tool generates ready-to-paste meta-tag HTML. Here is how the most-used OG tools compare in 2026:
| Tool | Multi-platform mockups | Twitter Card variants | Generates HTML | No upload / privacy | Cost |
|---|---|---|---|---|---|
| FreeDevTool Open Graph Preview | Facebook + X + LinkedIn | summary, summary_large_image | Yes (copy-ready) | Browser-only | Free |
| Facebook Sharing Debugger | Facebook only | N/A | No (validation only) | Server-side fetch | Free (Meta) |
| X Card Validator (cards-dev.twitter.com) | X only | All Twitter types | No | Server-side fetch | Free (X) |
| LinkedIn Post Inspector | LinkedIn only | N/A | No | Server-side fetch | Free (LinkedIn) |
| opengraph.xyz | Facebook + X + LinkedIn | Both | No | Server-side fetch | Free, ad-funded |
| metatags.io | Facebook + X + Slack | Both | Yes | Server-side preview | Free |
| OG Image Playground (Vercel) | One image preview | Image-focused | Image only | Server-side render | Free |
Type the proposed page title, description, image URL, and canonical URL into the form fields at the top of this page. Live mockups for Facebook, X, and LinkedIn render instantly using the browser's DOM only — no upload, no third-party fetch. This matters for unannounced launches: tools like Facebook Sharing Debugger and X Card Validator fetch your URL from their servers, which means the unpublished URL has to be live and reachable, and Meta/X log every fetch. For previewing before deploy, this purely-client-side approach is the only one that doesn't leak your draft URL or unreleased copy. After you ship, run Facebook Sharing Debugger and X Card Validator to force a cache refresh — those cache previews aggressively (often 7+ days).
Three overlapping but distinct standards. Open Graph (Facebook, 2010) uses og:-prefixed meta tags — og:title, og:description, og:image, og:url, og:type. The de-facto universal standard; LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage all read OG tags. Twitter Cards (X, 2012) use twitter:-prefixed tags — primarily twitter:card (sets layout: summary or summary_large_image), twitter:site (publisher handle), twitter:creator (author handle). X falls back to OG tags when twitter-specific ones are missing, so most pages only need twitter:card + OG tags. oEmbed (2008) is a JSON/XML endpoint that platforms call to get rich-embed HTML — used by YouTube, Twitter (for tweet embeds), Spotify, Vimeo. Different mechanism, different use case (publisher-controlled rich embeds vs platform-agnostic share cards). For 99% of websites, OG tags + a single twitter:card tag covers everything.
<meta> tag block including OG, Twitter Card, and canonical reference.Pair the OG preview with the Meta Tag Generator for the rest of head meta-tag stack, the Slug Generator for clean canonical URLs, the URL Encoder for percent-encoding image URL parameters, and the SEO Tools hub for the broader SEO toolkit.
og:) that control how your URL appears when shared on Facebook, LinkedIn, WhatsApp and other platforms. They define the title, description, image and URL displayed in the share card. Without OG tags, platforms attempt to guess what to display, often resulting in poor-looking previews with wrong images or truncated text. Well-configured OG tags can increase social click-through rates significantly.summary_large_image cards, use 1200×628px. Keep file size under 8MB and use JPG or PNG format for maximum compatibility across all platforms.og: prefix tags and was created by Facebook for universal social sharing. Twitter Cards use twitter: prefix tags specifically for Twitter/X. The key difference: Twitter will fall back to OG tags if twitter-specific tags aren't present, so you can often use just OG tags for both. The unique Twitter tag is twitter:card which sets the card layout type (summary or summary_large_image).All tools run in your browser, no signup required, nothing sent to a server.