Social Share Preview Simulator – One Link, Six Cards
When a link is pasted into a feed, a channel or a chat, the app that receives it reads a handful of <meta> tags from the page and draws a preview card from them. The same tags reach every app, but no two apps arrange them the same way. This tool takes one set of metadata — typed into the fields or pasted as tags — and draws approximate cards for Facebook, X, LinkedIn, Slack, Discord and WhatsApp side by side, so the differences are visible before anything is published.
Three shapes, six arrangements
Nearly every card is a variation on one of three shapes. A large-image card puts a wide picture on top and a bar of text underneath. A thumbnail card sets a small square picture beside the text. A left-rule card runs a coloured bar down the side of a text block with the picture below it. What varies on top of that is the ordering: whether the site or domain line sits above the title or beneath it, and whether the description is printed at all. A description written with care can simply never appear on some cards, which is worth knowing before it is written.
What breaks, and where it shows
The failures worth catching are not subtle once you can see them. A missing image collapses a card to its text-only shape, a far smaller target in a scrolling feed. A long title is clipped by the box rather than by any rule you can count in advance, so it matters where the useful words sit. A portrait or square picture is cropped hard by the large-image layouts, and whatever was near the top or bottom edge is the part that disappears. An empty title makes the card fall back to the bare host name. Each of these gets a row in the checklist beside the grid, and each row says what will happen rather than awarding a pass or a fail.
Why clipping here is visual, not counted
No character limit or pixel dimension is asserted anywhere in this tool, and that is deliberate. Platforms revise those numbers quietly, this is a static page, and a confident stale figure is worse than none at all. Titles and descriptions are therefore clipped by the rendered box using CSS line clamping — the same mechanism the real cards use — rather than by slicing the text at some remembered count. The image warning likewise reports the shape of your picture, wider than tall or not, which is an observation about the file rather than a claim about anyone's specification.
Pasting tags, and the precedence behind them
The paste mode accepts a <head> fragment, a whole page, or a loose pile of tags. Both property= and name= are read, because Open Graph specifies one, most twitter: tags specify the other, and plenty of real pages get it backwards. Each field then resolves through the same order: the platform-specific tag first, the Open Graph tag next, and a plain HTML fallback such as <title> or link[rel=canonical] last. An X-specific value is kept apart rather than folded in, which is why the X card can legitimately differ from the other five. A summary lists what was found, what was absent and what was read but meant nothing here, so nothing is silently dropped.
Approximate on purpose
These cards are drawn from public rendering behaviour and carry no platform logos or branding. They are close enough in shape to catch a missing picture, a clipped headline or a hard crop, and they are not pixel-exact reproductions of anyone's interface.