You paste your link into Facebook and the preview shows the wrong image. On X the title is cut off mid-word. On LinkedIn there is no card at all — just a naked URL nobody clicks. A free open graph preview tool catches these problems before you publish, instead of after your post has already flopped.
This open graph preview tool renders Facebook, X, and LinkedIn cards live as you type your title, description, and image URL — plus a copy-ready block of og: and Twitter card meta tags. It warns you about truncated titles, overlong descriptions, and relative image paths. No signup, nothing uploaded, and it never fetches your images, so it works with private staging sites too.
Open Graph Preview
See how your page will look when shared on Facebook, X, and LinkedIn.
(we never fetch your image)
(we never fetch your image)
(we never fetch your image)
Image areas are placeholders on purpose: fetching your image would be an external request and could break on CORS. Platforms fetch the real image from your og:image URL when the link is shared.
🔒 100% private — everything runs in your browser, nothing is uploaded.
How to Use the Open Graph Preview Tool
- Enter your og:title. Aim for under 60 characters so nothing gets truncated.
- Write your og:description. One or two compelling sentences, under ~200 characters.
- Paste absolute URLs for og:image (1200×630 recommended) and og:url.
- Watch the previews update live. Facebook, X, and LinkedIn cards render instantly as you type.
- Copy the meta tags and paste them into the
<head>of your page.
An open graph preview tool is most useful before you hit publish: write the tags, check the cards, then ship. Fixing a card after a post is live means fighting platform caches.
Features That Set This Tool Apart
- Three platform previews at once. Facebook, X (Twitter), and LinkedIn side by side — no tab switching.
- Live as you type. Every keystroke re-renders the cards and the tag block instantly.
- Smart warnings. Flags titles over 60 characters, descriptions over ~200, and relative URLs that would break cards.
- Copy-ready tag block. Complete
og:plustwitter:cardmarkup, properly escaped. - No image fetching. Placeholder frames keep the tool instant and private — it never requests your images.
- Private by design. Everything runs in your browser; nothing is uploaded or logged.
Open Graph Tags Explained: What Each One Does
Open Graph is a simple vocabulary of <meta property="og:..."> tags that turns any web page into a rich object when shared. The protocol, documented at ogp.me and summarized in Wikipedia’s Open Graph overview, defines four required properties: og:title (the card headline), og:type (article, website, product), og:image (the card visual), and og:url (the canonical address). Two more are strongly recommended in practice: og:description, the one-to-two-line pitch under the headline, and og:site_name, your brand label.
X (Twitter) invented its own parallel set — twitter:card, twitter:title, and friends — but in practice it falls back to og: tags when its own are missing. Setting both, as this open graph preview tool generates, covers every platform: Facebook and LinkedIn read the og: set, X reads its own with og: fallback, and messaging apps like WhatsApp, Slack, and iMessage all build their link unfurls from the same tags.
The og:image Playbook: Sizes, Formats, and Fixes
The image makes the card. Use 1200×630 pixels — the 1.91:1 ratio every major platform expects — in JPG or PNG under a few hundred kilobytes. Put the key visual and any text in the central safe zone, because platforms crop edges differently; text smaller than ~24 px becomes unreadable on mobile cards. Crucially, the URL must be absolute: og:image with a relative path is the single most common reason cards show no image at all.
An open graph preview tool helps you catch the classic failures: images under 200×200 px (rejected by Facebook), SVGs (not supported as og:image anywhere — rasterize them), and hotlinked images behind authentication (crawlers cannot log in). After changing tags on a live page, remember that platforms cache cards aggressively — use each network’s debugger to force a re-scrape rather than waiting days for the cache to expire.
Troubleshooting Broken Social Cards
- No image appears. Check that og:image is an absolute URL pointing to a real file, at least 200×200 px, publicly reachable.
- Wrong image shows. The platform cached an old scrape. Re-scrape in the network’s sharing debugger.
- Title truncated. Shorten og:title under 60 characters; put the important words first.
- Card shows on Facebook but not X. Add
twitter:cardwithsummary_large_image— the generator above includes it. - Old description persists. Same fix as wrong image: cached scrape. Debuggers exist precisely for this.
- HTTPS mixed content. An
http://image on anhttps://page gets blocked by some crawlers — serve the image over HTTPS.
Open Graph Preview: Frequently Asked Questions
Why does my link show the wrong image on Facebook?
Almost always one of three causes: the og:image URL is relative instead of absolute, the image is smaller than the 200×200 pixel minimum, or Facebook cached an older version of your tags. Fix the tag, then force a fresh scrape with Facebook’s Sharing Debugger. Note this open graph preview tool never fetches your image itself — it shows a placeholder frame so it stays instant and private.
Do I still need Twitter card tags if I have Open Graph tags?
Strictly, no — X falls back to og:title, og:description, and og:image when twitter: tags are absent. In practice, include both anyway: the twitter:card tag with summary_large_image explicitly requests the big-image layout, and the tag block this tool generates covers both sets. It costs four extra lines and removes all ambiguity.
What is the ideal og:image size?
1200×630 pixels at a 1.91:1 ratio is the universal recommendation — it fills Facebook and LinkedIn cards edge to edge and looks sharp on retina displays. Keep the file under about 300 KB so crawlers fetch it quickly, keep text large and centered in the safe zone, and always use an absolute HTTPS URL. LinkedIn accepts up to 1200×627, which is close enough to share one image.
Why do my tags work in the preview but not when shared?
Preview tools render your current input; social platforms render their cached copy of your page. If you edited tags after the first share, the platform is showing a stale scrape. Each network provides a debugger that re-fetches the page on demand. Also confirm the tags are in the page’s head and visible to logged-out crawlers — JavaScript-injected tags are missed by some scrapers.
Can Open Graph tags improve my click-through rate?
Yes — dramatically. A link with a sharp image, a clear under-60-character headline, and a benefit-led description consistently outperforms a bare URL or an auto-generated card. Social cards are free advertising space: every share of your link carries the creative. Testing variations with an open graph preview tool before publishing is one of the cheapest CTR wins in content marketing.
Related Free Tools
- Meta Title & Description Generator — preview how your page appears in Google search results.
- Image Compressor — shrink your 1200×630 og:image before uploading.
- Favicon Generator — create the site icon that appears in browser tabs.
- All Free Tools — browse the complete collection of free tools on GetAnythingPro.
Every link you publish deserves a card that earns the click. Use this open graph preview tool to perfect your titles, descriptions, and images before you share — then paste the generated tags into your page and watch your shares look as professional as your content.