Open Graph Preview
See link previews for Facebook, X, LinkedIn, Slack and more. Runs in your browser.
About this open graph preview
This Open Graph preview shows how a link will look when someone shares it on Facebook, X, LinkedIn, Slack, Discord and WhatsApp. Fill in the tags or paste your page's <head> HTML, add the share image from your device, and you get six previews, a list of missing tags and ready-to-copy meta tags.
It's for anyone about to post a link that matters: a product launch, a blog post, a job listing. A share with no image or a cut-off title is easy to miss until it's live. Here you see it first.
The tool never fetches a URL. That means it works for staging sites, localhost and pages behind a login, and no one else learns which page you're working on.
Features
Six separate previews
Facebook, X, LinkedIn, Slack, Discord and WhatsApp each get their own card, drawn to match that app's current layout, fonts and truncation.
Paste HTML or fill in fields
Paste the <head> of any page and the tags are read in your browser. Or type the title, description, URL, site name and image details yourself. One click moves parsed values into the form for editing.
Real fallbacks
X reads twitter: tags first and then og: tags. The other apps read og: tags first, then twitter: tags, then the <title> and meta description. The previews follow the same order, so a missing tag shows up the way it would in the app.
Image checks with your actual file
Drop in the share image and the tool reads its width, height and file size. It warns about images under 200 × 200 px, widths under 600 px that force a small card, ratios far from 1.91:1 and files over 300 KB, 5 MB or 8 MB.
Missing tag warnings
Each check says what is missing and what happens without it, for example no og:site_name means Slack and Discord show the bare domain.
Generated meta tags
Copy a clean block of og: and twitter: tags with quotes and angle brackets escaped. If you uploaded an image and left the size blank, its real width and height are filled in.
How to use the open graph preview
- 1Fill in the fields or paste your page's <head> HTML.
- 2Upload the share image to check its size and see it in every preview.
- 3Fix the warnings, then copy the generated meta tags.
When to use it
Before a launch post
Paste the landing page's head, upload the share image and check all six cards before the announcement goes out.
Fixing a preview with no image
Paste the HTML and read the checks. The usual causes are a missing og:image, a relative image path or an image that is too small.
Testing a staging site
Official debuggers can only fetch public URLs. Copy the head from your staging page and preview it here before the site goes live.
What are Open Graph tags?
Open Graph is a set of <meta> tags defined at ogp.me. They tell apps which title, description, image and URL to use when someone shares your page. The four basic ones are og:title, og:type, og:image and og:url, and most sites add og:description and og:site_name.
X uses its own Cards tags, such as twitter:card, but falls back to the og: values for the title, description and image. So in practice you need the og: tags plus one twitter:card line set to summary_large_image if you want the big image card.
What size should an og:image be?
Use 1200 × 630 pixels. That is a 1.91:1 ratio, and it gives a sharp large card on Facebook, LinkedIn, X, Slack, Discord and WhatsApp. Keep important text and logos away from the edges, because some apps crop slightly.
- Under 200 × 200 px: Facebook ignores the image.
- Under about 600 px wide: most apps show a small thumbnail instead of a large card.
- Square images: shown as thumbnails or cropped at the top and bottom on large cards.
- File size: keep it under 300 KB for WhatsApp, which often skips large images. X allows up to 5 MB and Facebook up to 8 MB.
- Format: JPG or PNG are safest. Use a full https:// URL, never a relative path.
Why doesn't this tool load my page from a URL?
Loading a URL means a server somewhere has to request your page. That leaks which page you're working on, and it fails for anything not public yet. This tool runs only in your browser and makes no network requests at all, so it can't fetch your page or your og:image URL.
Instead, paste the page's HTML. In most browsers, Ctrl+U opens the source; copy everything from <head> to </head>. Upload the share image from your computer to see it in the cards. It never leaves your device.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| How the page is read | Pasted HTML, parsed in your browser | Fetched by their server from a public URL |
| Staging and private pages | Work fine | Fail or need the page to go public |
| Platforms shown | Six separate cards | Two or three, often sharing one layout |
| Image checks | Real width, height, ratio and file size of your file | Recommended size listed, not checked |
| Tag fallbacks | Per-app order, including <title> fallback | Only what you type |
Tips
- Keep og:title under about 60 characters. LinkedIn and WhatsApp clamp titles to two short lines.
- Pair these tags with a search title and description from the meta tag generator.
- Write og:description to work in 110 characters or less. Facebook shows one line, and LinkedIn shows none.
- If the image is too big or the wrong shape, resize it to 1200 × 630 and then compress it under 300 KB.
- Apps cache previews. After changing tags on a live page, use the platform's own debugger to refresh, or share a URL with a new query string.
Questions
How do I preview how my link will look on social media?
Paste your page's <head> HTML or fill in the fields, then upload the share image. The tool draws the link card for Facebook, X, LinkedIn, Slack, Discord and WhatsApp and lists any missing tags.
Why is my link preview not showing an image?
The most common causes are a missing og:image tag, a relative image path, an image under 200 × 200 px or a file that is too large. Paste your HTML here and the checks will point to which one it is.
What is the best og:image size?
1200 × 630 pixels at a 1.91:1 ratio. It shows as a large, sharp card on every major platform. Keep the file under 300 KB if you want it to load reliably on WhatsApp.
Do I need Twitter card tags if I have Open Graph tags?
You need only one: twitter:card. X falls back to og:title, og:description and og:image, so add twitter:card set to summary_large_image and skip the rest unless you want different text on X.
Can I check a page by entering its URL?
No. This tool never fetches URLs, so nothing about the page you're checking is sent anywhere. Paste the page source instead, which also works for staging and password-protected pages.
Why does my old preview still show after I fixed the tags?
Platforms cache link previews, sometimes for days. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to refresh a public page, or add a query string such as ?v=2 to the URL you share.
Are the previews exactly what each app shows?
They're close but not pixel-perfect. Each card follows the app's current layout, fonts, line limits and fallbacks, but apps change their designs often and differ between phone and desktop.