Overview
Introduction
Open Graph tags are easy to get technically right and still produce a link card that looks broken in practice: a title that's fine in an HTML editor can get awkwardly truncated on one platform while rendering perfectly on another, since every platform imposes its own display limits and layout.
This tool renders a live mockup of the same title, description, image, and site name across six platforms side by side (via a toggle), so you can catch a platform-specific truncation or layout mismatch before a link actually gets shared.
What Is Social Share Preview?
A visual preview tool that takes four Open Graph-style fields, title, description, image URL, and site name, and renders them inside a CSS mockup styled to resemble that platform's typical unfurl card: a large image card for Facebook and LinkedIn, a left-accent-bar embed style for Discord and Slack, and a compact card for WhatsApp and Telegram.
Each platform's mockup applies its own rough character-truncation limit to the title and description, so the same input can visibly wrap or truncate differently depending on which platform toggle is selected.
How Social Share Preview Works
Every keystroke updates a shared piece of state (title, description, image URL, site name); switching the platform toggle re-renders that same state through a different layout and a different pair of title/description length limits, entirely client-side.
The image field is rendered as a real <img> tag pointed at the URL you typed, so it loads (or fails to load, showing a placeholder) exactly the way it would in a browser tab - there's no server-side fetch or proxy involved.
When To Use Social Share Preview
Before publishing a new page, to sanity-check how its planned title and description will look once shared, across the platforms your audience actually uses.
When debugging a report that a shared link "looks broken" on a specific platform, to isolate whether it's a truncation issue, a missing image, or a genuine content problem.
Often used alongside Open Graph Generator and Open Graph Checker.
Features
Advantages
- Covers six distinct platform layouts in one tool instead of needing six separate platform-specific debuggers, several of which require the page to already be live and publicly reachable.
- Works entirely from typed text and an image URL, so you can preview a page's planned social card before it's published or before the real og: tags are even written.
- Applies a different, platform-appropriate title/description length limit per toggle, surfacing truncation issues a single generic character counter would miss.
Limitations
- This is a CSS mockup approximating each platform's typical layout, not a live screenshot or the platform's actual rendering engine - real unfurl behavior can differ, and every platform has changed its exact layout over time without notice.
- It doesn't fetch your page or read real og: meta tags from a URL; you're previewing whatever you type into these four fields, so it's on you to make sure that matches what your page's actual meta tags will say.
Examples
Best Practices & Notes
Best Practices
- Write the og:title and og:description to work at the tightest limit shown (WhatsApp/Telegram's compact card), since a card that reads well there will read well everywhere with more room.
- Use a landscape image close to a 1.91:1 aspect ratio for og:image, since that's the crop most large-image-card platforms (Facebook, LinkedIn) apply, and a square or portrait image gets awkwardly cropped.
Developer Notes
Truncation limits and layout groupings here are heuristic best-guesses maintained by hand, not pulled from a live platform API (none of these six platforms expose one for unfurl preview), so treat them as directionally useful rather than pixel-accurate.
Social Share Preview Use Cases
- Checking a new blog post or landing page's planned social card before publishing
- Debugging why a shared link looks fine on one platform but truncated or image-less on another
- Comparing how the same title/description reads across a large-image card versus a compact card layout
Common Mistakes
- Writing an og:description that's really a keyword list rather than a natural sentence, which reads noticeably worse once rendered inside an actual card layout than it does as a raw meta tag value.
- Using a portrait or square og:image and assuming it'll look the same as a landscape one once platforms auto-crop it into a wide card.
Tips
- If an image doesn't appear in the preview, right-click it and open the URL in a new tab directly - a broken preview here is almost always a broken or blocked image URL, not a tool bug.