Skip to content
SnapTools
Processing locally — files never leave your device

Open Graph Preview

Paste any URL or fill in the fields manually to preview how it will render as an Open Graph card on Facebook, LinkedIn, Discord, and Slack.

Facebook / LinkedIn
snaptools.app
Free online tools that respect your privacy.
100+ PDF, image, and developer utilities — all running in your browser.
Slack / Discord
snaptools.app
Free online tools that respect your privacy.
100+ PDF, image, and developer utilities — all running in your browser.

How to use Open Graph Preview

  1. Fill in the title, description, URL, and image — or paste an existing URL's values to check them.
  2. Watch the live previews update for the Facebook/LinkedIn card and the Slack/Discord unfurl.
  3. Confirm your image is 1200×630 so it is not cropped or shown as a small thumbnail.
  4. Copy the matching og: meta tags into your page <head>.
  5. After deploying, run the URL through Meta's Sharing Debugger to force platforms to re-scrape.

Open Graph: control how your links look when shared

The Open Graph protocol is a set of <meta> tags that tell social platforms what title, description, and image to show when someone shares your page. Get them wrong and your link shares as a bare, low-engagement URL. This tool previews the card exactly as Facebook, LinkedIn, Slack, and Discord will render it, so you can fix problems before you post.

The core Open Graph tags

<meta property="og:title" content="Your Headline" />
<meta property="og:description" content="A one-line summary." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Brand" />

Note these use property=, not name= — a common mistake that stops platforms from reading them.

One image, four different crops

The preview above shows the same og:image rendered the way each platform actually frames it. Facebook and LinkedIn give it a wide banner; Slack shrinks it into a compact left-aligned thumbnail beside the text; Discord stacks it under the title in its embed. A single 1200×630 asset survives all of them, but only if the focal point sits near the centre — each surface trims the edges by a different amount. Watch the previews side by side and you can spot a logo or headline that the Slack crop would slice off before anyone ever sees it broken.

Debugging a card that looks wrong

When the live preview here looks right but the real share does not, the culprit is almost always caching: Facebook and LinkedIn store a snapshot the first time a URL is unfurled and reuse it for days. Paste the URL into Meta's Sharing Debugger and hit "Scrape Again" to flush Facebook's copy; LinkedIn's Post Inspector does the same for LinkedIn. Slack and Discord usually refetch on their own, but you can force them by editing the message so the unfurl regenerates. The debugger also surfaces missing or malformed tags this preview cannot see, like an image the scraper is blocked from fetching.

Why X is not in this preview

This tool deliberately covers the Open Graph surfaces only. X reads its own twitter: namespace and applies a different crop, so it gets its own preview — use the Twitter / X Card Preview linked below for that. The good news is that your Open Graph tags do double duty: X falls back to them whenever the matching twitter: tag is missing, so getting these right already covers most of your bases.

Common Open Graph mistakes

  • Using name= instead of property= on og: tags
  • A relative or non-canonical og:url
  • An image smaller than 600×315, which forces a tiny thumbnail
  • An image behind authentication that the scraper cannot fetch
  • Forgetting to re-scrape after editing, so the stale card persists

Where to go next

  • Image Cropper — if the previews above clip your focal point, trim the source to a clean centred 1200×630 first.
  • Twitter / X Card Preview — once the OG card looks right, check the separate crop and layout X applies.
  • Meta Tag Generator — turn the tags you just previewed into a complete, paste-ready <head> block.
  • Canonical Tag Generator — make sure og:url points at the same canonical address you credit shares to.

Frequently asked questions

What size should my OG image be?
1200×630 pixels is the safe standard. It is the right 1.91:1 aspect ratio for large cards on Facebook and LinkedIn and is sharp on retina displays. Stay above 600×315 (the minimum for a large image) or platforms fall back to a small thumbnail. Keep the file under about 5 MB.
Why is my preview empty or outdated on Facebook?
Facebook and LinkedIn cache Open Graph data the first time a URL is shared. After you change your tags, use Meta's Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again" to refresh the cache; LinkedIn has its own Post Inspector.
Which Open Graph tags are required?
Four are essential: og:title, og:type, og:image, and og:url. In practice you should also set og:description and og:site_name. Without og:image, the link shares as plain text with much lower engagement.
Do Open Graph tags affect SEO rankings?
Not directly — Google does not use og: tags as ranking signals. But better-looking social cards earn more clicks and shares, which can drive traffic and links that do influence rankings indirectly.
Will these tags also cover Slack and Discord?
Yes — Slack and Discord both read the Open Graph protocol, so the og:title, og:description, and og:image you see previewed here drive their unfurls too. Slack renders a compact thumbnail layout and Discord an embed, but both pull from the same tags, which is why this tool shows all four surfaces together.
Should the og:url be absolute?
Yes. og:url must be the full, canonical, absolute URL of the page including the protocol. It tells platforms which URL to attribute shares and likes to, so it should match your canonical tag exactly.
Why does my image look cropped in the preview?
Different surfaces crop differently — a square avatar-style thumbnail versus a wide banner. Design your image with the important content centred and avoid placing text near the edges, since each platform trims the frame slightly differently.
Can I use the same OG image for every page?
You can, but page-specific images perform far better, especially for articles. A unique image with the post title baked in stands out in feeds. Many sites auto-generate these at build time.

Related tools

More tools you might find useful in the same flow.

Twitter Card Preview

Twitter / X card preview — see how your page renders as a summary or summary_large_image card before you share the link. Free, instant, no signup needed.

Meta Tag Generator

Meta tag generator — build complete SEO title, description, robots, and canonical tags for any page, ready to copy and paste. Free, with no signup needed.

robots.txt Generator

robots.txt generator — build a clean robots.txt file with user-agent rules, allow and disallow paths, and sitemap entries in seconds. Free, no signup needed.

Keyword Density

Keyword density checker — analyze pasted text or page copy for word density, keyword frequency, top phrases, and word counts. Free, runs in your browser.

See all SEO & Web Tools

Built by Muhammad Tahir · About