🔗

Open Graph Preview

See exactly how your page looks when shared on Facebook, Twitter/X, and LinkedIn — then copy the generated meta tags straight into your site's <head>.

Page Meta Details
Generated Meta Tags
Preview
No image set
example.com
My Page Title — Company Name
A short description of this page
No image set
example.com
My Page Title — Company Name
A short description of this page
No image set
My Page Title — Company Name
A short description of this page
example.com
About this Open Graph preview tool

Open Graph (OG) tags are the meta tags that decide how your page looks the moment someone shares it — the headline, the blurb, and the big image you see inside a Facebook post, a Twitter/X card, or a LinkedIn update. This tool lets you type those tags in and watch a realistic card mockup render for each platform at once, so you can fine-tune the wording and pick the right image before a single link ever goes live.

Because every network truncates titles and descriptions at different lengths and treats images differently, a link that looks great on one platform can look broken on another. People use it to:

Everything runs locally and in-browser — your titles, descriptions, and image URLs stay on your device, nothing is uploaded to a server, and there is no sign-up or tracking of what you type.

How to use
  1. Enter your page title and description — the live character counters warn you before either runs long enough to be truncated.
  2. Paste a fully-qualified image URL (ideally a 1200×630 PNG or JPG) plus your site name and page URL.
  3. Flip between the Facebook, Twitter/X, and LinkedIn tabs to see a realistic card mockup for each platform.
  4. Adjust the wording and image until every preview looks right and nothing important is cut off.
  5. Click Copy to grab the generated meta tags and paste them into your page's <head>.
FAQ

Open Graph is a protocol, originally created by Facebook, that uses <meta property="og:…"> tags in your page's <head> to tell social platforms how to display your link. When someone shares the URL, the platform's scraper reads these tags to build the preview card instead of guessing from your page content.

og:title sets the bold headline on the card, og:description sets the smaller blurb beneath it, and og:image points to the large preview image. If you leave any of them out, platforms fall back to your <title> tag, meta description, or the first image they can find — which is often not what you want.

1200×630 pixels (a 1.91:1 ratio) is the safe default — it renders crisply on Facebook, LinkedIn, and as a Twitter/X summary_large_image card without cropping or letterboxing. Use an absolute https URL, keep the file under 1 MB, and avoid thin text that becomes unreadable when scaled down.

Twitter/X has its own twitter: meta tags, but it also falls back to your Open Graph tags when the Twitter-specific ones are missing. Adding twitter:card set to summary_large_image gives you the big-image layout, and the code this tool generates includes both og: and twitter: tags for maximum compatibility.

Each network truncates titles and descriptions at a different length and frames images differently, so a link that looks perfect on one platform can look broken on another. Previewing first lets you catch cut-off headlines, missing images, and awkward cropping before the link is public and gets cached.

Social platforms cache OG data aggressively — Facebook can hold it for up to 30 days. After deploying changes, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to make the scraper re-fetch your page and refresh the cached preview.

No. This is a manual preview — you type the meta values in yourself and the card mockups render entirely in your browser. Nothing is uploaded to a server, no live page is scraped, and there is no sign-up, so your titles, descriptions, and image URLs never leave your device.