← Back to Tools

OG Tag Previewer

See exactly how your link will look on Discord, Facebook, LinkedIn, Twitter/X, Slack, WhatsApp, and iMessage — then export the meta tags.

1 Fetch existing tags (optional)

Uses a public CORS proxy to read public meta tags. Doesn't work on sites behind auth or strict CSP.

2 Content
3 Image

Drop an image or click to upload JPG, PNG, WebP, GIF — recommended 1200×630 (1.91:1 ratio)

4 Twitter / X Card
Validation
👁 Live Preview
Generated Meta Tags

                

What are Open Graph tags and why do they matter?

Open Graph (OG) tags are HTML meta tags that control how your URL appears when shared on social platforms. Without them, Facebook, LinkedIn, Discord and others have to guess what to display — and they usually guess wrong, picking the wrong image, a truncated title, or no description at all.

A well-configured set of OG tags gives you complete control: the exact title, the exact image, the exact description. Every share becomes branded marketing real estate instead of a roll of the dice.

What image dimensions should I use?

1200×630px is the safest universal size — that's a 1.91:1 ratio. It works for Facebook, LinkedIn, Discord, Twitter (large image card), Slack, and WhatsApp. Minimum is 600×315.

Do I need separate Twitter tags?

Twitter falls back to OG tags if Twitter-specific ones aren't present. But adding twitter:card lets you pick the layout (large vs. small thumb), so we generate both for safety.

Why isn't my OG image showing up?

Three usual culprits: (1) the image URL isn't absolute (use https://... not /img.jpg), (2) the image is too small, or (3) Facebook is caching an old version — use their Sharing Debugger to refresh.

What's the difference between og:title and <title>?

<title> is for browser tabs and Google search results. og:title is for social shares. They're often the same, but you can make the social version more attention-grabbing.

How do I test before publishing?

Use this previewer for a fast visual check, then validate with Facebook's Sharing Debugger, LinkedIn's Post Inspector, and Twitter's Card Validator (in the dev console).

Where do these tags go?

Inside the <head> section of your HTML, before the closing </head> tag. If you're using a CMS like WordPress, plugins like Yoast or Rank Math will inject them for you.