Open Graph Preview
See how your link will look when shared on social media
Page Details
Note: this is a mock preview — for real tags, fetch the page's og: meta tags server-side.
Facebook / LinkedIn
X / Twitter
Open Graph Preview — Complete Guide & Instructions
MakeCard Open Graph Preview renders mock social cards so you can see exactly how a link will look before you share or publish it. Enter a URL, page title and description, drop in a preview image, and the tool draws three platform layouts live: the wide Facebook/LinkedIn card, the compact X/Twitter card and the chat-style WhatsApp bubble. It is a fast sandbox for bloggers, marketers and developers tuning og: meta tags.
How to Use Open Graph Preview
- 1 Paste your page link into the "URL" field — the host name is extracted automatically.
- 2 Type the "Title (og:title)" you plan to use.
- 3 Write the "Description (og:description)" — the cards clamp it the way each platform does.
- 4 Click "Upload preview image" and choose the og:image graphic.
- 5 Review the three rendered cards — Facebook/LinkedIn, X/Twitter and WhatsApp — and adjust your copy until every version looks right.
Key Features & Capabilities
- Three live platform mock-ups: Facebook/LinkedIn wide card, X/Twitter card and WhatsApp chat bubble.
- Real truncation behaviour — long titles clip to one line and descriptions clamp to two lines like the real apps.
- Host name auto-extracted from the URL and shown the way each platform displays it.
- Local image upload for testing different og:image artwork instantly.
- No fetching needed — compose tags manually and see the result without deploying.
- Side-by-side editing and preview panels for quick iterations.
Supported Formats & Specifications
| Parameter | Specification |
|---|---|
| Preview Platforms | Facebook / LinkedIn (shared layout), X / Twitter, WhatsApp |
| Inputs | URL, og:title, og:description, og:image upload (JPG/PNG/etc.) |
| Rendering | Mock client-side preview — does not fetch or validate live tags |
| Image Handling | Local preview only; image never leaves the browser |
| Access Mode | Free, instant, no login |
Practical Everyday Use Cases
- Checking whether a blog headline truncates before publishing the post.
- Designing an og:image that reads well inside the WhatsApp bubble's small thumbnail.
- Marketing teams comparing two title/description options for a campaign link.
- Developers demoing how a client's page will look before the og: tags go live.
- Testing how a long product name survives X/Twitter's single-line clamp.
Pro Tips for Best Results
- Keep og:title under ~60 characters so it survives the one-line clamps on X and WhatsApp.
- Put the key words at the front of the description — only the first ~2 lines are visible.
- Use a 1200×630 image for the wide Facebook/LinkedIn card; square crops work better for WhatsApp.
- Remember this is a mock preview — after tagging, run the real Facebook Sharing Debugger to clear the scraper cache.
Common Problems & Solutions
Platforms cache scraped tags aggressively. After fixing tags, purge the cache with Facebook Sharing Debugger or X Card Validator.
The tool mocks cards from the fields you type — it does not read tags off your site. Copy the values from your page source manually.
Very tall or very small images object-cover awkwardly. Aim for landscape artwork around 1200×630 px.
Privacy & Security
100% Client-Side Execution
Everything is composed locally — URLs, text and the uploaded image stay in your browser tab and are never sent anywhere.
Frequently Asked Questions
Everything you need to know about using Open Graph Preview
Enter your URL, title, description and upload the og:image here — the tool draws the Facebook/LinkedIn, X/Twitter and WhatsApp cards instantly without you posting anything.
The recommended size is 1200×630 pixels for the wide card used by Facebook and LinkedIn. Keep important content centred since some platforms crop the edges.
Facebook caches scraped og tags. Use the Facebook Sharing Debugger "Scrape Again" button to force a refresh after updating your meta tags.
They are HTML meta tags (property="og:title" / "og:description") that tell social platforms which headline and summary to show when a URL is shared.
No — it builds a mock preview from what you type, so you can test copy before deploying. To verify live tags, view your page source or use a debugger tool.
Related FreeToolsBazaar Tools
Ready to Use Open Graph Preview?
100% free, browser-based, and private. No installation, registration, or file upload to external servers required.
Start Using Open Graph Preview