BYTETOOLS

Open Graph Preview

Paste Open Graph and Twitter Card tags to preview how your link renders on Facebook, X, LinkedIn and Slack, with warnings for missing or oversized values.

What is the Open Graph Preview?

The Open Graph Preview renders mock Facebook, X (Twitter), LinkedIn and Slack link cards from pasted meta tags, so you can see how a shared URL will look before anyone shares it.

  • Mock cards for Facebook, X (Twitter), LinkedIn and Slack
  • Real fallback chain: twitter:* → og:* → <title> and meta description
  • Flags missing og:image, og:title, og:url and twitter:card
  • Detects summary vs summary_large_image card layouts
  • Over-length warnings for titles and descriptions
  • 100% local — parses pasted tags, never fetches images or URLs

How to use the Open Graph Preview

  1. 1

    Copy the meta tags (or full <head>) from your page source.

  2. 2

    Paste them into the input box.

  3. 3

    Compare the Facebook, X, LinkedIn and Slack mock cards.

  4. 4

    Fix any flagged issues — missing image, missing twitter:card, long titles.

  5. 5

    Re-paste to confirm, then ship the tags.

About the Open Graph Preview

The Open Graph Preview renders mock Facebook, X (Twitter), LinkedIn and Slack link cards from pasted meta tags, so you can see how a shared URL will look before anyone shares it. Paste your og: and twitter: tags — or the whole <head> block — and the previews build instantly from the parsed values.

It applies the real fallback chain (twitter:title falls back to og:title, og:title to the page <title>), flags a missing og:image or twitter:card, warns on over-length titles and descriptions, and shows which card format X will pick. The og:image is shown as a labelled placeholder with its URL — this tool never fetches images or pages, so what you verify is the markup itself.

Everything runs 100% locally in your browser; nothing you paste is uploaded. It pairs naturally with our Open Graph and Twitter Card generators — build the tags there, sanity-check them here.

Frequently asked questions

Which Open Graph tags are required for a link preview?

og:title, og:image and og:url are the practical minimum, with og:description strongly recommended. Facebook and LinkedIn fall back to the page title and first images when tags are missing, but the results are unpredictable — explicit tags are the only way to control the card.

What size should my og:image be?

1200×630 pixels (a 1.91:1 ratio) is the safe standard for Facebook, LinkedIn and X's large card. Keep it under 5 MB and remember X crops toward the center. This tool checks that the tag exists and shows its URL, but cannot verify dimensions since it never downloads the image.

Why does X show a small card instead of a large image?

The twitter:card tag decides: summary gives the small square-thumbnail card, summary_large_image the big one. If the tag is missing or misspelled X may fall back to a bare link. This preview shows both the value it found and the layout that value produces.

Do Slack and LinkedIn use Open Graph tags?

Yes — Slack unfurls links using og:title, og:description, og:image and the site name, and LinkedIn reads og:title and og:image. Neither uses twitter: tags, so a page with only Twitter markup will unfurl poorly everywhere except X.

Is this preview pixel-identical to the real platforms?

It is a close mock of each platform's current card layout, built from your parsed tags — but platforms tweak their designs and each re-crawls and caches pages on its own schedule. After deploying changes, use the platforms' own debuggers to force a re-scrape of the live URL.

Related tools