Overview
See exactly how your link looks when it is shared
When someone pastes your URL into Facebook, X (formerly Twitter), LinkedIn, Slack, WhatsApp or Discord, those platforms do not show a bare link. They unfurl it into a rich card with an image, a title and a short description. That card is built from Open Graph (og:) and Twitter Card (twitter:) meta tags in your page's HTML.
ToolHub Open Graph Preview lets you fill in your og:title, og:description, og:image and site URL and instantly see realistic Facebook, X and LinkedIn cards side by side. You can also paste your existing HTML to auto-fill the fields and copy a complete, ready-to-use set of meta tags. Everything runs in your browser.
Step-by-step
How to preview your social cards
- 1
Enter your title and description
Type theog:titleandog:descriptionyou want people to see. Keep the title punchy and the description to a sentence or two. - 2
Add an image URL
Paste the full URL of your share image. For the crispest result across every network, use a 1200 by 630 pixel image. - 3
Set the page URL
Enter the page's URL so each card shows the correct domain, just as it will on the live platforms. - 4
Review and copy the tags
Check the Facebook, X and LinkedIn previews, then click copy to grab a full block of Open Graph and Twitter Card meta tags for your<head>.
Already have tags in place? Paste your page HTML into the auto-fill box and the tool reads the existing og: and twitter: values straight out.
Background
How Open Graph tags actually work
Open Graph is a protocol originally created by Facebook and now used by almost every major platform. A handful of meta tags in the page head tell sharing platforms what to display. The core four are og:title, og:description, og:image and og:url, usually paired with og:type.
Twitter Cards and the large image
X reads Open Graph tags but also supports its own twitter: tags. Setting twitter:card to summary_large_image gives you the big, edge-to-edge image card rather than the small thumbnail. It is good practice to include both sets of tags.
Why the 1200 by 630 size matters
The recommended image is 1200 by 630 pixels, a 1.91:1 ratio. That size fills the large card cleanly on Facebook, X and LinkedIn without awkward cropping or blurriness. Smaller images may be shown as a tiny square or skipped entirely.
Caching and debuggers
Platforms cache the first card they generate for a URL. If you update your tags and the old card still shows, you usually need to re-scrape the URL using that platform's own sharing debugger to clear the cache.
Use cases
When to use an Open Graph preview
Before publishing a page
Confirm the title, image and description look right on every network before anyone shares the link.
Marketing and launch campaigns
Make sure landing pages and announcements unfurl into clean, click-worthy cards.
Blog and content sites
Give every article a strong share card so social traffic does not fall flat.
Fixing broken or missing cards
Diagnose why a link shows no image or the wrong text and copy a corrected tag set.
Ecommerce product pages
Preview how product links look when customers share them with friends.
Client deliverables
Show stakeholders a realistic mockup of the social card without deploying anything.
Tips for great share cards
- Use a 1200 by 630 pixel image (1.91:1) for the sharpest card on every network.
- Always set og:title, og:description, og:image and og:url, plus og:type.
- Add twitter:card set to summary_large_image so X shows the big image.
- Use an absolute, publicly reachable HTTPS image URL, not a relative path.
- Keep image text large and high-contrast, since cards are often viewed small on mobile.
- After updating tags, re-scrape the URL in each platform's debugger to bust the cache.
Common questions
Why is my image not showing when I share the link?
The most common causes are a relative or non-HTTPS image URL, an image that is too small, or a cached old card. Use an absolute HTTPS URL, a 1200 by 630 pixel image, and re-scrape the link in the platform's sharing debugger.
Do I need both og: and twitter: tags?
X will fall back to Open Graph tags if Twitter Card tags are missing, but adding twitter:card, twitter:title, twitter:description and twitter:image gives you precise control over the X card. Including both sets is the safest approach.
What image size should I use?
1200 by 630 pixels is the recommended size. It maps to the 1.91:1 ratio that the large card layout expects, so it looks sharp on Facebook, X and LinkedIn alike.
Why does my updated card still look old?
Sharing platforms cache cards aggressively. Your new tags are live, but the platform is showing a stored copy. Run the URL through the platform's debugger to force a fresh scrape.
100% private