Free preview & debugger
Open Graph & Twitter card preview
Paste any URL — Ogwave fetches it and shows how the preview renders across platforms, plus a meta-tag report.
Reference
& meta description</b>
<span class="v" style="font-size:14px;color:var(--muted)">Length-checked (≤60 and ≤160 characters) so they don’t truncate in Google and social cards.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:title</b>
<span class="v" style="font-size:14px;color:var(--muted)">The headline shown on Facebook, LinkedIn, Discord and most crawlers — flagged if missing so you know platforms are falling back to <code style="font-family:var(--mono)"><title></code>.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:description</b>
<span class="v" style="font-size:14px;color:var(--muted)">The preview blurb beneath the title; we warn when it’s absent and platforms scrape body text instead.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:image</b>
<span class="v" style="font-size:14px;color:var(--muted)">The share thumbnail — we resolve it to an absolute URL, fetch it, and report its real pixel dimensions against the 1200×630 standard.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:image:width / og:image:height</b>
<span class="v" style="font-size:14px;color:var(--muted)">Declared dimensions that let crawlers reserve layout space and render the card faster.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:url & canonical</b>
<span class="v" style="font-size:14px;color:var(--muted)">The canonical address platforms should attribute the share to.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">og:type & og:site_name</b>
<span class="v" style="font-size:14px;color:var(--muted)">Object type (website, article…) and the brand label shown above the card.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">twitter:card</b>
<span class="v" style="font-size:14px;color:var(--muted)">Whether X renders a large image (<code style="font-family:var(--mono)">summary_large_image</code>) or a small thumbnail — the core of any twitter card validator.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">twitter:title / twitter:description / twitter:image</b>
<span class="v" style="font-size:14px;color:var(--muted)">X-specific overrides, with fallback to the Open Graph tags when absent.</span>
</span>
</div>
<div class="ogp-chk pass" style="align-items:flex-start">
<span class="dot" style="margin-top:6px"></span>
<span style="display:block">
<b style="font-family:var(--mono);font-size:13px;display:block;margin-bottom:3px">favicon</b>
<span class="v" style="font-size:14px;color:var(--muted)">The site icon used in the Google result row and several chat unfurls.</span>
</span>
</div>
</div>
</div>
</section>
<section class="sec">
<div class="wrap" style="max-width:820px">
<span class="eyebrow"><span class="bar"></span> Background</span>
<h2 class="h2" style="margin:14px 0 22px">How Open Graph works</h2>
<div style="color:var(--ink-2);font-size:16px;line-height:1.72">
<p>The Open Graph protocol, introduced by Facebook in 2010 and now honoured across the social web, turns any web page into a rich object with predictable metadata. You add <code style="font-family:var(--mono)"><meta property="og:*"></code> tags inside your page’s <code style="font-family:var(--mono)"><head></code>, and when someone shares the link, the receiving platform’s crawler fetches the page, reads those tags, and builds a preview card from them.</p>
<p style="margin-top:14px">The four tags that matter most are <code style="font-family:var(--mono)">og:title</code>, <code style="font-family:var(--mono)">og:description</code>, <code style="font-family:var(--mono)">og:image</code> and <code style="font-family:var(--mono)">og:url</code>. The title and description become the headline and blurb; the image becomes the thumbnail; the URL tells the platform which canonical address to attribute the share to. X (Twitter) layers its own <code style="font-family:var(--mono)">twitter:card</code> family on top, but gracefully falls back to your Open Graph tags when those are absent — so a complete Open Graph set covers nearly every platform at once.</p>
<p style="margin-top:14px">Because crawlers read the raw HTML rather than your rendered JavaScript, the tags must be present in the initial server response and the <code style="font-family:var(--mono)">og:image</code> must be an absolute HTTPS URL. Get the tags right once and your link looks deliberate everywhere it travels; get them wrong and platforms guess — scraping body text and grabbing a random image, or showing nothing at all.</p>
</div>
</div>
</section>
<section class="sec" style="padding-top:0">
<div class="wrap">
<span class="eyebrow"><span class="bar"></span> Platform requirements</span>
<h2 class="h2" style="margin:14px 0 14px">Every platform reads them a little differently</h2>
<p class="lead" style="max-width:780px;margin-bottom:28px">The same tags render differently across networks. Here are the quirks Ogwave previews account for.</p>
<div class="ogp-grid">
<div class="ogp-card">
<h3>Facebook</h3>
<p style="padding:14px 16px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0">Reads the full Open Graph set. Wants og:image at 1200×630 (1.91:1) and at least 200×200; images under 600px wide are downgraded to a small thumbnail. Facebook aggressively caches — re-scrape in its Sharing Debugger after changes.</p>
</div>
<div class="ogp-card">
<h3>X (Twitter)</h3>
<p style="padding:14px 16px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0">Needs twitter:card. Use summary_large_image for a full-width preview; falls back to Open Graph tags when twitter:* are missing. Images should stay under 5MB (JPG, PNG, WebP, GIF).</p>
</div>
<div class="ogp-card">
<h3>LinkedIn</h3>
<p style="padding:14px 16px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0">Uses og:title, og:description and og:image (1200×627 recommended). Caches previews for roughly 7 days; append a query string or use the Post Inspector to force a refresh.</p>
</div>
<div class="ogp-card">
<h3>Discord</h3>
<p style="padding:14px 16px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0">Unfurls Open Graph tags and supports og:image plus a theme accent. Requires absolute HTTPS image URLs; very large images are skipped.</p>
</div>
<div class="ogp-card">
<h3>WhatsApp</h3>
<p style="padding:14px 16px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0">Shows a compact card and needs an absolute HTTPS og:image, ideally under ~300KB so the thumbnail loads on mobile. Without og:image many links show no preview at all.</p>
</div>
</div>
</div>
</section>
<section class="sec" style="padding-top:0">
<div class="wrap">
<div class="sec-head">
<span class="eyebrow"><span class="bar"></span> FAQ</span>
<h2 class="h2">Open Graph preview & debugger, explained</h2>
</div>
<div class="faq" style="max-width:820px">
<details open>
<summary>What is an Open Graph preview tool?<span class="pm">+</span></summary>
<div class="a">An Open Graph preview tool fetches a URL and renders how its link card will look when shared, by reading the page’s og: and twitter: meta tags. Ogwave shows side-by-side previews for Google, Facebook, X, LinkedIn, Discord and WhatsApp from a single paste — no sign-up required.</div>
</details>
<details>
<summary>How is this different from an OG debugger?<span class="pm">+</span></summary>
<div class="a">An og debugger goes beyond the picture: it reports each meta tag’s status (present, missing, too long, wrong size) and explains the fix. Ogwave flags issues like a title over 60 characters or an og:image that isn’t 1200×630, then offers a copy-paste corrected meta block.</div>
</details>
<details>
<summary>Is this a Twitter card validator too?<span class="pm">+</span></summary>
<div class="a">Yes. Ogwave inspects twitter:card, twitter:title, twitter:description and twitter:image, and shows the X preview exactly as summary_large_image would render. When twitter:card is missing it warns you that X may fall back to a small thumbnail or your Open Graph tags.</div>
</details>
<details>
<summary>Why does my link preview look wrong even after I fixed the tags?<span class="pm">+</span></summary>
<div class="a">Most platforms cache previews. Facebook, LinkedIn and others store the old card for hours or days. After updating your tags, re-scrape the URL in each platform’s debugger (or add a cache-busting query string) so the crawler re-reads your page.</div>
</details>
</div>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is an Open Graph preview tool?","acceptedAnswer":{"@type":"Answer","text":"An Open Graph preview tool fetches a URL and renders how its link card will look when shared, by reading the page’s og: and twitter: meta tags. Ogwave shows side-by-side previews for Google, Facebook, X, LinkedIn, Discord and WhatsApp from a single paste — no sign-up required."}},{"@type":"Question","name":"How is this different from an OG debugger?","acceptedAnswer":{"@type":"Answer","text":"An og debugger goes beyond the picture: it reports each meta tag’s status (present, missing, too long, wrong size) and explains the fix. Ogwave flags issues like a title over 60 characters or an og:image that isn’t 1200×630, then offers a copy-paste corrected meta block."}},{"@type":"Question","name":"Is this a Twitter card validator too?","acceptedAnswer":{"@type":"Answer","text":"Yes. Ogwave inspects twitter:card, twitter:title, twitter:description and twitter:image, and shows the X preview exactly as summary_large_image would render. When twitter:card is missing it warns you that X may fall back to a small thumbnail or your Open Graph tags."}},{"@type":"Question","name":"Why does my link preview look wrong even after I fixed the tags?","acceptedAnswer":{"@type":"Answer","text":"Most platforms cache previews. Facebook, LinkedIn and others store the old card for hours or days. After updating your tags, re-scrape the URL in each platform’s debugger (or add a cache-busting query string) so the crawler re-reads your page."}}]}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebApplication","name":"Ogwave Open Graph Preview & Debugger","alternateName":["OG Debugger","Twitter Card Validator"],"url":"https://og.matrixinnsolutions.com/preview","applicationCategory":"DeveloperApplication","operatingSystem":"Any (web)","browserRequirements":"Requires JavaScript. Requires HTML5.","description":"Free Open Graph preview and og debugger: paste any URL to see how it renders on Google, Facebook, X, LinkedIn, Discord and WhatsApp, with a full meta-tag report and Twitter card validation.","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"featureList":["Open Graph preview","OG meta-tag debugger","Twitter card validator","og:image size check","Copy-paste meta block auto-fix"],"publisher":{"@type":"Organization","name":"MatrixInn Solutions","url":"https://matrixinnsolutions.com"}}
</script>
</div>
</section>
</main><footer class="foot">
<div class="wrap">
<div class="foot-grid">
<div class="foot-brand">
<a href="/" class="brand"><span class="mark">og</span> Ogwave</a>
<p>Social cards on autopilot. Generate Open Graph images for your entire site, automatically — with templates and A/B testing.</p>
<div class="backlinks">
<a href="https://matrixinnsolutions.com" title="MatrixInn Solutions — software house">Built by MatrixInn Solutions <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a>
<a href="https://tools.matrixinnsolutions.com" title="Free online tools by MatrixInn">MatrixInn Free Tools <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a>
</div>
</div>
<div class="foot-col">
<h5>Product</h5>
<ul>
<li><a href="/#how">How it works</a></li>
<li><a href="/templates">Templates</a></li>
<li><a href="/#ab">A/B testing</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
<div class="foot-col">
<h5>Free tools</h5>
<ul>
<li><a href="/preview">OG preview & debugger</a></li>
<li><a href="https://tools.matrixinnsolutions.com/json-formatter">JSON Formatter</a></li>
<li><a href="https://tools.matrixinnsolutions.com/qr-code-generator">QR Code Generator</a></li>
<li><a href="https://tools.matrixinnsolutions.com">All MatrixInn tools <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a></li>
</ul>
</div>
<div class="foot-col">
<h5>MatrixInn</h5>
<ul>
<li><a href="https://matrixinnsolutions.com">Software house <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a></li>
<li><a href="https://matrixinnsolutions.com/services/web-development">Web & AI <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a></li>
<li><a href="https://matrixinnsolutions.com/work">Our work <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a></li>
<li><a href="https://matrixinnsolutions.com/contact">Contact <svg class="ico " width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M9 7h8v8"/></svg></a></li>
</ul>
</div>
</div>
<div class="foot-bot">
<span>© 2026 Ogwave — a <a href="https://matrixinnsolutions.com" style="color:var(--ink-2)">MatrixInn Solutions</a> product.</span>
<span><a href="https://matrixinnsolutions.com/privacy" style="color:var(--muted)">Privacy</a> · <a href="https://matrixinnsolutions.com/terms" style="color:var(--muted)">Terms</a></span>
</div>
</div>
</footer>
<script src="/assets/js/app.js" defer></script>
</body>
</html>
What this tool checks
Ogwave is an Open Graph preview and og debugger in one: it fetches your page server-side and inspects every meta tag that drives a link preview, then explains what to fix.