Open Graph Preview Generator
Test how your links appear on social media
Open Graph Preview Generator tool
Or Enter Manually
Open Graph Preview Generator: key facts
- What it does
- Test how your links appear on social media
- Category
- SEO Tools
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What the Open Graph Preview Generator does
How your link looks when shared on Facebook, LinkedIn, or Twitter comes down to your Open Graph tags — and getting them wrong means a broken or unappealing preview. This tool lets you enter your OG title, description, image, and other fields, then shows side-by-side previews of how the card will render on each platform, and generates the meta tags to copy into your page.
Marketers and developers use it to fine-tune a share card before publishing, checking that the title is not truncated and the image displays. Seeing all three platforms at once catches differences between them, and the generated meta tags drop straight into your page's head.
Using the Open Graph Preview Generator, step by step
- Enter your OG title and description, watching the character counters near the recommended limits.
- Add an image URL or upload an image, then set the URL, site name, and OG type.
- Review the live Facebook, LinkedIn, and Twitter previews side by side.
- Copy the generated Open Graph meta tags into your page's head section.
The tags that control a shared link
Open Graph is a small set of meta tags that tell a platform how to render a link. Four carry most of the weight: title, description, image, and URL. Type and site name refine it. The tool builds the tags from your input and shows how the resulting card will look.
Without these tags a platform guesses, usually by taking the page title and the first substantial text and image it finds. The result is frequently poor — a navigation label as the title, boilerplate as the description, a logo as the image — which is why a link to an unprepared page looks so much worse than one to a prepared page.
Twitter has its own card tags, but falls back to Open Graph where they are absent, so supplying Open Graph alone covers most platforms. Adding the Twitter-specific card type is worth it for control over the layout.
- 1200 × 630 pixels is the widely-supported image size, giving a 1.91:1 ratio.
- The image URL must be absolute — a relative path will not resolve for an external platform.
- og:title need not match the page title; a shared link can carry more conversational framing.
What makes this one worth using
- It renders three real platform previews — Facebook, LinkedIn, and Twitter — at once, so you catch how each treats your title, description, and image.
- It generates clean, copyable Open Graph meta tags from your inputs, not just a preview.
- Color-coded character counters flag titles and descriptions that risk truncation.
- It works entirely in your browser; your inputs and uploaded images stay on your device.
Caching, and why your fix does not show
Platforms cache scraped metadata aggressively, so correcting a tag does not change an already-shared link. Facebook's Sharing Debugger and LinkedIn's Post Inspector both force a re-scrape, and using them after any metadata change is the only reliable way to see the current state. Without that step you will conclude the tags are wrong when they are merely cached.
A few requirements catch people out. Images must be publicly reachable without authentication, since the scraper is anonymous — an image behind a login renders as nothing. Some platforms enforce a maximum file size. And a page rendered entirely client-side may present no tags at all to a scraper that does not execute JavaScript, which is an argument for server-rendering metadata.
Design the image for the crop rather than the canvas. Platforms crop to different ratios in different placements, so anything critical belongs near the centre, and text needs to be large enough to survive being displayed as a thumbnail in a mobile feed.
Frequently Asked Questions
What are Open Graph tags?
Open Graph tags are meta tags (og:title, og:description, og:image, and others) that tell social platforms how to display your link. Without them, platforms guess from page content, often producing a poor or broken preview.
Can this fetch the Open Graph tags from an existing URL?
No — this tool builds and previews tags from the fields you enter manually rather than fetching them from a live page. Enter your title, description, and image to see the previews and generate the tags to add to your site.
Why does my preview differ between platforms?
Each platform lays out cards differently — Facebook shows the site name, LinkedIn and Twitter emphasize the image and title differently, and truncation lengths vary. Previewing all three helps you write a card that works everywhere.
Where do the generated tags go?
Paste them inside the <head> of your HTML page. Once deployed, social platforms read them when your link is shared and render the preview accordingly; you can re-scrape with each platform's debugging tool to refresh a cached preview.
