Open Graph Preview — See Your Link Cards Before You Share

What is an Open Graph Preview?

An Open Graph Preview (ओपन ग्राफ़ प्रीव्यू) shows how a web page will look when its link is shared on social media and messaging apps. When you paste a link into WhatsApp, Facebook, LinkedIn, X or Telegram, the app fetches the page and builds a card from its Open Graph and Twitter card meta tags: a headline, a short description, an image and the website name. A good card earns clicks; a broken one — no image, a cut-off title, or the wrong text — gets ignored.

This free tool lets you check cards before you share. Paste your page's head HTML, or just the meta tags, and it renders approximate previews for Facebook, X, LinkedIn and WhatsApp. It applies the same fallbacks platforms use when tags are missing, loads your og:image to check its real pixel size and aspect ratio, and lists exactly what to fix. Nothing is uploaded and no scripts from the pasted HTML are run.

Key Features

• Four previews — Facebook, X (Twitter), LinkedIn and WhatsApp.
• Realistic fallbacks — title tag, meta description and canonical used when og: tags are missing.
• Image checks — loads the image, reports size, ratio and https usage.
• Tag inventory — which Open Graph and Twitter tags were found.
• Length warnings for long titles and descriptions.
• Image override — try a different image URL without editing your HTML.
• Safe parsing with DOMParser.
• Works for unpublished pages — paste HTML from your editor or staging site.

How to Preview Your Link Cards — Step by Step

1. Open your page and view its source (Ctrl + U, or right-click → View Page Source).
2. Copy the head section — or only the lines starting with <meta property="og: and <meta name="twitter:.
3. Paste into the box. The previews and checks update instantly.
4. Fix warnings in your HTML or CMS — for example add an og:image or shorten the title.
5. Re-test by pasting the updated tags.
6. Refresh platform caches after publishing, using the Facebook Sharing Debugger, LinkedIn Post Inspector or by re-sharing.

The Tags That Matter

Getting the Share Image Right

• Size: 1200 × 630 pixels (1.91:1). The tool measures your image and flags other ratios.
• Minimum: below about 600 px wide, several platforms show only a small thumbnail.
• Format and weight: JPG or PNG, ideally a few hundred KB — very heavy images may not load in messaging apps.
• Safe area: keep text and logos away from the edges; some apps crop to a square or a narrower ratio.
• Absolute https URL: og:image must be a full address like https://example.com/og.jpg, publicly accessible without login.
• Readable at small sizes: large, bold text works best on phones.

Need to resize or crop an image to 1200 × 630? Use our Image Resizer or Crop Image tools.

Platform Differences

Facebook shows a large image with the domain in capitals, the title and often the description. X shows a large image only when twitter:card is summary_large_image; otherwise a small square thumbnail, and recent designs often show just the domain over the image. LinkedIn emphasises the image and title, usually without the description. WhatsApp shows a compact card inside the chat bubble with the image, title, description and domain. These layouts change from time to time, so treat the previews as close guides and do a final real share for important campaigns.

Why Old Previews Stick Around

Platforms cache link previews — sometimes for days — to avoid fetching the same page repeatedly. If you change your og:image and still see the old one, it's the cache, not your tags. Facebook's Sharing Debugger and LinkedIn's Post Inspector let you “scrape again”. For WhatsApp, adding a harmless query string (for example ?v=2) to the shared URL forces a fresh fetch. X refreshes cards periodically. Changing the image file name when you update it also helps.

Why Link Cards Matter

Most people decide in a second whether to tap a shared link. A clear image, a specific headline and a recognisable brand name make that decision easy; a grey box with a cut-off title makes it easy to scroll past. For businesses that rely on WhatsApp groups, LinkedIn posts or Facebook pages, well-made cards can noticeably lift clicks without changing anything else about the content. They also build trust — a consistent, branded card looks more legitimate than a bare URL.

Why Paste HTML Instead of a URL?

Web browsers block pages from reading other websites' HTML (the same-origin policy), so an in-browser tool can't fetch your page by URL without sending it through a server. Pasting the source keeps everything private, works for pages that aren't live yet — on localhost, staging or in your CMS editor — and lets you experiment with tags before publishing.

Worked Example

The sample tags on this page include og:title, og:description, og:image, og:url, og:site_name and twitter:card. The tool counts the og: tags it found (title, description, image, url and site_name) and one Twitter tag, shows the og:title as the card headline on every platform, and loads the share image to report its dimensions. Delete the og:image line and the cards switch to “No image” with a warning; delete og:title and the headline falls back to the page title “Free Online PDF Tools | Prompt Minds”. Experimenting like this is the quickest way to understand how platforms pick what to show.

Pre-Share Checklist

• og:title under about 60–70 characters and specific to the page.
• og:description one clear sentence, under about 200 characters.
• og:image 1200 × 630, absolute https URL, loads in a private window.
• og:url set to the canonical page address.
• twitter:card set to summary_large_image.
• One real test share in WhatsApp or LinkedIn before a campaign.

Common Uses

• Checking blog posts before sharing them in WhatsApp groups.
• Reviewing product pages for e-commerce sharing.
• Testing landing pages for ad and social campaigns.
• Diagnosing “no image” or wrong-title problems.
• Comparing several share images quickly with the override field.
• Teaching clients why share images and titles matter.
• Checking that a CMS or SEO plugin outputs the tags you expect on every page type.

Common Mistakes to Avoid

• Relative og:image paths like /assets/og.png — always use the full https URL.
• Images behind logins or hotlink protection that crawlers can't download.
• Same image for every page — page-specific images get more clicks.
• Very long titles that get cut off on phones.
• Forgetting twitter:card — X falls back to a small card.

Troubleshooting

• “Image could not be loaded” — check the URL opens in a private browser window; some servers block other sites from loading images.
• No tags found — make sure you pasted the head section, not the visible page text.
• Title differs from expected — check which tag is used: og:title wins over the title tag.

Quick Glossary

• Open Graph: the og: meta tag protocol for link previews.
• Twitter card: X's preview format set with twitter: tags.
• og:image: the picture shown on the card.
• Scraper / crawler: the bot a platform uses to read your page.
• Cache: a stored copy of the preview reused for later shares.
• Aspect ratio: width divided by height; 1.91:1 for standard cards.
• Sharing Debugger: Facebook's tool for inspecting and refreshing link previews.
• Post Inspector: LinkedIn's equivalent tool for checking and refreshing previews.
• Canonical URL: the preferred address of a page, often repeated in og:url.

Why Use This Open Graph Preview?

It previews four major platforms at once, applies real fallbacks, measures your share image, explains every warning and keeps unpublished pages private — free and instant.

Open Graph Preview — Key Facts

Frequently Asked Questions

Explore More Prompt Minds Tools

Open Graph Preview works great alongside our other free tools. Every Prompt Minds tool runs entirely in your browser — no sign-up, no uploads, no watermarks. Browse all free tools.