🤖NEW:AI-Powered Incremental Builds — your site updates in under 30 seconds. See what's new →
← All Toolsâ€ĸ
100% Free â€ĸ Open Graph Visual Previewer

Open Graph Preview Tool

Enter your Open Graph tags and see a live Facebook/LinkedIn-style share card preview before you publish.

â„šī¸
What this preview shows: a Facebook/LinkedIn-style rendering of the Open Graph values you enter. Twitter/X and Discord use their own card layouts and (for Twitter) their own `twitter:` meta tags — check the FAQ below for platform-specific differences.

Open Graph Meta Inputs

Facebook / LinkedIn Visual Feed Preview

OG Card
www.nimbica.com
Nimbica — Ultra-Fast Static Edge Hosting for WordPress
Transform dynamic PHP rendering bottlenecks into pre-rendered static HTML served from 300+ global edge locations.
Technical Deep-Dive

Open Graph Protocol Specification & Social Optimization

Last updated: August 2026 â€ĸ Reviewed by Nimbica Technical SEO Team

1. The Open Graph Meta Tag Protocol

Per the official Open Graph protocol specification, these tags let a page describe itself as a structured "object" (with a title, description, image, and type) that social platforms and messaging apps read when a link is pasted or shared. Without them, most platforms fall back to guessing — often grabbing the page's <title> tag and a semi-random image from the page — which produces noticeably worse, less controlled-looking share cards than deliberate Open Graph tags do.

2. Recommended og:image Dimensions & Ratios

1200×630 pixels (1.91:1) is the widely-adopted sweet spot — large enough to look sharp on retina displays and standard-def alike, and matching the crop ratio most platforms apply to share-card images. Going much smaller risks a blurry or heavily upscaled image; going much larger just wastes bandwidth without improving how it renders, since it gets downscaled anyway.

3. Auditing Twitter Card Compatibility

Twitter/X reads its own `twitter:card`, `twitter:title`, and `twitter:image` meta tags first, falling back to the equivalent `og:` tags only if Twitter-specific ones aren't present — so a page with only Open Graph tags usually still gets a reasonable Twitter preview, but one with explicit Twitter tags has more precise control. Check that specifically with the Twitter Card Validator.

4. Reliable Social Bot Crawling via Nimbica Edge

Nimbica pre-renders pages — including their Open Graph meta tags — into static HTML served from edge locations, so social-platform crawlers (which typically don't execute JavaScript and need tags present in the initial HTML response) reliably see the correct preview data rather than depending on server-side rendering timing.

5. How to Use This Previewer

  1. Enter the actual title, description, image URL, and canonical URL you plan to use on the real page — not placeholder text.
  2. Check the description length in the preview — most platforms truncate long descriptions, so watch for awkward mid-sentence cutoffs.
  3. Confirm the image URL is publicly accessible (not behind a login or on localhost) — social crawlers can't fetch images they can't reach.
  4. Once satisfied, add the corresponding `<meta property="og:...">` tags to your actual page's HTML `<head>`, then do a real test share on the platform(s) that matter most to you.

6. Common Mistakes

  • Forgetting og:image entirely. Without it, most platforms either show no image or fall back to guessing one from the page — a noticeably weaker-looking share card.
  • Using an image below 1200×630 or with the wrong aspect ratio. Results in a blurry, oddly-cropped, or letterboxed preview.
  • Not accounting for platform caching. Updating og:image after a page has already been shared won't retroactively update already-cached previews — see the FAQ for platform-specific cache-refresh tools.
  • Assuming this Facebook/LinkedIn-style preview matches every platform exactly. It doesn't — see the FAQ on Twitter/X and Discord differences.

7. Who Should Use This Tool

Content creators and marketers preparing a page or post for social sharing, developers verifying a CMS or page-builder is generating Open Graph tags correctly, and anyone who's noticed a link looks bad when shared and wants to iterate on the fix before republishing.

8. Limitations

This tool renders a single preview style modeled on Facebook/LinkedIn's card layout — it does not fetch or read tags from a live URL (you enter values manually), and it does not simulate Twitter/X's or Discord's own distinct card rendering. For a definitive check on a specific platform, use that platform's own debugging/preview tool after publishing.

Give search engine crawlers sub-50ms response times with Nimbica

Transform dynamic PHP rendering bottlenecks into ultra-fast static HTML deployed across 300+ global edge locations.

Frequently Asked Questions

What are Open Graph (og:) meta tags?

They're a set of HTML meta tags — og:title, og:description, og:image, og:url, og:site_name, and others — originally defined by Facebook's Open Graph protocol, that tell platforms what to show when a link is shared: a headline, a short description, and a preview image, rather than whatever raw text or thumbnail a platform might otherwise guess at.

What is the recommended image size for og:image tags?

1200×630 pixels (a 1.91:1 aspect ratio) is the widely-used recommendation, since it's large enough to render sharply on high-density displays and matches the aspect ratio most platforms crop share-card images to. Keep the file size reasonable (under ~1MB) since some platforms silently skip images that are too large to fetch and process quickly.

Does this preview show exactly what Twitter/X or Discord will render?

No — this tool renders one preview format, styled after the Facebook/LinkedIn share-card layout, which is the most common visual pattern for og: tag consumption. Twitter/X primarily reads its own `twitter:` meta tags (falling back to `og:` tags when Twitter-specific ones are absent) and Discord has its own embed rendering — both can differ in card layout and cropping from what's shown here. For a Twitter-specific check, use the Twitter Card Validator; for other platforms, the most reliable method is a real test share on that platform's own debugging tool.

Why does my og:image sometimes not update after I change it?

Most social platforms cache a link's preview data (including the image) the first time it's shared, and don't automatically refetch on every subsequent share — this is a platform-side caching behavior, not something a page's own HTML controls. If a stale image persists after a real change, use that platform's own cache-refresh/debug tool (e.g. Facebook's Sharing Debugger has a "Scrape Again" button) to force it to refetch.