OG Tag Preview

Preview how your page looks on Google, Facebook, Twitter/X, and LinkedIn — without deploying.

Paste <meta> tags or <head> content

Paste <meta> tags or <head> HTML on the left to see previews.

SvelteUI Pro Building with Svelte? 45+ production-ready components, copy-paste into your project.
From $49 →

Related Tools

H> HTTP Header Analyzer

Analyze HTTP headers for security issues, caching behavior, and CORS configuration with fix snippets.

✓ JSON Validator

Validate JSON and see exactly where errors are.

Y✓ YAML Validator

Validate YAML syntax and catch indentation errors before they break your pipeline.

From the makers of JSON Knife

SvelteUI Pro
45+ Svelte 5 components. Copy-paste into your project. From $49.
SvelteShip
Launch your SaaS faster. Auth, Stripe, dashboards — pre-built in SvelteKit. From $49.
MetaScrape API
Extract OG tags, metadata, and JSON-LD from any URL. Free tier included.
AccessiDrop
Accessibility monitoring for agencies. Free scanner. From $15/mo.
QuoteSnap
Professional quotes for tradespeople. Create, send, track. Free to start.

Get the JSON & API Cheat Sheet

Formatting tricks, jq commands, and common patterns — one page, zero fluff.

How to Preview Open Graph Tags Before Deploying

Open Graph tags control how your page appears when shared on Facebook, Twitter/X, LinkedIn, and other platforms. Getting them wrong means your carefully crafted page shows up with a missing image, truncated title, or no description — and you won't know until someone actually shares it. This OG tag previewer shows you exactly how your page will look on each platform before you deploy.

Most OG tag testing tools require a live URL — they fetch the page server-side and parse the HTML. That doesn't help when you're building locally, working in staging, or haven't deployed yet. This tool lets you paste raw <meta> tags or enter values manually, and instantly see pixel-accurate previews for Google, Facebook, Twitter/X, and LinkedIn.

The built-in validator catches common mistakes: missing og:title, relative image URLs (which won't work on social platforms), descriptions that are too long for Google's SERP, and missing twitter:card type. Fix issues before deploying instead of discovering them after your launch post goes live with a broken preview.

Tips

  • Always use absolute URLs for og:image — relative paths like /images/og.png won't resolve when shared on social platforms.
  • Recommended image dimensions: 1200x630px for Facebook/LinkedIn (1.91:1 ratio), 1200x600px for Twitter large image cards (2:1 ratio).
  • Keep titles under 60 characters and descriptions under 160 characters to avoid truncation on Google. Facebook allows up to 200 characters for descriptions.
  • Use the "Generate HTML" output to copy properly formatted meta tags directly into your <head> section.