Social Media

Open Graph Preview

Preview how your link looks on Facebook, X, LinkedIn and Discord — and get the meta tags.

  • Free forever
  • No sign-up
  • Runs in your browser
Share X LinkedIn

Link details

0 / 60

The headline of the shared card. Aim for roughly 60 characters so it isn't cut off.

0 / 160

Most platforms show roughly 110160 characters.

The canonical link. Its domain shows on the card.

Your brand name, shown on some platforms.

Recommended 1200×630 px. This URL is what goes in your tags.

Or upload to preview

Preview a local file. It never leaves your browser.

Live preview

No image — og:image preview

example.com

Your Open Graph title

Your og:description shows here — the summary of the shared link.

LinkedIn always uses a large image. Facebook, X and Discord follow the card type you select above.

Generated meta tags

<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />

Paste these inside your page's <head>. Because the preview is form-driven, it works for unpublished drafts — nothing is fetched or uploaded. An uploaded image is previewed locally only; put a public og:image URL in the field for the real tags.

What are Open Graph and Twitter Cards?

When you paste a link into Facebook, X, LinkedIn, Discord, Slack or a messaging app, it usually turns into a rich card: a headline, a short description and a preview image, instead of a bare URL. That card is built from special meta tags in your page's HTML.

Open Graph is the protocol, originally from Facebook, that most platforms read. Its tags all start with og:og:title, og:description, og:image, and so on. Twitter Cards are X's parallel set, prefixed with twitter:. In practice you ship both, because together they cover every major platform.

This tool does two things at once. It shows a live preview of how your link will look as a card on Facebook, X, LinkedIn and Discord, and it generates the copy-ready meta tags that produce that card. You edit a form; the cards and the code update as you type.

The essential tags

A complete, well-behaved share card needs only a handful of tags:

  • og:title — the headline of the card.
  • og:description — a one- or two-sentence summary.
  • og:image — the preview image (a full public URL).
  • og:url — the canonical link being shared.
  • og:site_name — your brand name.
  • og:type — usually website, or article for posts.
  • twitter:cardsummary_large_image for a big image, or summary for a compact thumbnail.
  • twitter:title, twitter:description, twitter:image — the X equivalents; X falls back to the og: values if these are missing, but setting them explicitly is safest.

This tool fills all of these from your inputs and skips any field you leave blank, so the output never carries empty tags.

Recommended image size

The single most common share problem is a bad image. Get it right and you avoid most of them:

  • Use 1200×630 pixels (a 1.91:1 ratio). This is the sweet spot for the large card across Facebook, X, LinkedIn and Discord.
  • Keep the file reasonable — under about 5 MB, ideally a JPG or PNG.
  • Put the important content near the centre. Different platforms crop the edges slightly differently.
  • Host it publicly over https. Relative paths and login-gated images won't load. Use an absolute URL.

For the small summary card, even a square logo around 400×400 works well, since it's shown as a thumbnail rather than a banner.

Per-platform quirks

The same tags render a little differently everywhere, which is exactly why a multi-platform preview is useful:

  • Facebook shows the domain in small caps above the title and respects your chosen card size — a tall banner for summary_large_image, a side thumbnail for summary.
  • X / Twitter uses twitter:card to decide between the large image card and the compact one, and shows the domain with a small link glyph.
  • LinkedIn effectively always renders a large image with the title and domain underneath; the compact layout doesn't really apply, so design for the wide image.
  • Discord builds a left-bordered embed: site name, a coloured title, the description, and the image below (large) or as a small thumbnail (compact). It tends to show more description text than the others.

Switch tabs in the preview to sanity-check all four before you commit.

How to use the previewer

  1. Enter your title and description. The character hints flag when a title is likely to be cut off (around 60 characters) or when a description is shorter or longer than the typical 110–160 range.
  2. Add the page URL and site name so the domain and brand show correctly.
  3. Set the image. Paste a public og:image URL, or upload a file to preview a candidate locally before you host it.
  4. Pick og:type and the Twitter card type.
  5. Flip through the platform tabs to see Facebook, X, LinkedIn and Discord side by side.
  6. Copy the generated tags and paste them into your page's <head>.

Uploaded images are previewed using a temporary in-browser URL that is released as soon as you replace it, clear it, or leave the page — it is never uploaded anywhere.

Debugging shares that look wrong

If a shared link shows the wrong title or a missing image, the cause is almost always caching. Platforms grab a snapshot of your tags the first time a link is seen and reuse it. After you change your tags:

  • Run the URL through the Facebook Sharing Debugger and click Scrape Again to refresh Facebook's and Instagram's cache.
  • Use the X Card Validator to re-fetch and preview the Twitter card.
  • For LinkedIn, the Post Inspector forces a re-scrape.

These debuggers also report missing or malformed tags, so they're worth a look even when nothing seems broken.

Why a form-driven preview beats URL-fetch tools

Most online preview tools work by fetching a live URL and reading its tags. That's fine once a page is published — but it fails exactly when you most need a preview: while the page is still a draft, sitting on staging, or behind a login. You can't iterate on a card for a page the internet can't see yet.

This tool is form-driven and fully local instead. You type the values, so you can perfect your title, description and image before the page exists, copy the resulting tags into your template, and ship a page that already shares beautifully on day one. Because nothing is fetched or uploaded, your drafts stay private and the previews work the same offline. It pairs naturally with a meta tag generator for the rest of your <head> and a SERP snippet preview for how the same page reads in Google search.

Frequently asked questions

Comet's got your back

Stuck on something? Every tool has a short guide and FAQ — and Comet can point you to the right spot.

Visit help centre