Open Graph & Social Card Preview — Google, X, Facebook, LinkedIn, Slack, Discord

Real-world use cases

• Stop a launch tweet from clipping the value prop

  You are about to announce a product on X and the headline is the whole pitch. Paste the title into og:title, watch the X summary_large_image card: at 78 characters it clips right before the payoff word. Trim to 68, the counter goes from pink back to muted, and the card shows the full line. Copy the meta block, paste into the landing page head, and the share looks intentional instead of truncated on the one surface your launch audience lives on.

• Get the og:image crop right before designing it

  Your designer asks "what size and what's safe-area for the OG image?" Drop a placeholder 1200×630 URL into og:image and look at the Facebook, LinkedIn and Discord cards side by side — all three crop to 1.91:1, so any text in the top or bottom 5% of a taller source image would be sliced. Screenshot the three previews into the design brief. The designer now keeps the logo and headline inside the visible band instead of guessing and redoing the export twice.

• Make a Slack-shared internal doc actually unfurl nicely

  A team wiki page keeps unfurling in Slack as a bare blue link with no context. Fill og:title, og:description and og:site_name, check the Slack preview card with its left accent bar, and tune the description to the 140-character Slack ceiling so the unfurl reads as a real summary. Paste the generated tags into the page template; the next time anyone drops the link in a channel it expands into a titled, described card people actually click.

• QA every social surface in one pass before a content launch

  Before publishing a long-form article, paste its final title, description and hero image once and scan all six cards top to bottom: Google snippet for search CTR, X and Facebook for paid/organic social, LinkedIn for the B2B audience, Slack and Discord for community shares. One screen tells you whether the same copy works everywhere or whether you need a shorter title variant for the tightest platform — no flipping between five separate validators.

• Hand a developer paste-ready tags, not a spec

  Marketing decided the copy; now the dev needs the tags. Instead of writing a ticket that describes og:title and twitter:card in prose, fill the form, copy the complete meta block, and drop it in the handoff. The dev pastes it into the head verbatim — og:type and twitter:card already included so the card renders — and there is no round-trip about which attribute name or card type to use.

Common pitfalls

• Using a relative og:image path like `/og.png`. Crawlers fetch og:image from a separate server with no page context, so a relative URL resolves to nothing. Always use an absolute `https://` URL — this tool's preview also only loads absolute image URLs, which surfaces the bug immediately.

• Picking twitter:card `summary` when you actually want the big banner. `summary` renders a small square thumbnail beside the text, not the full-width 1.91:1 image. If your preview shows a cramped square crop, switch the card type to `summary_large_image`.

• Writing one long title and assuming it is fine because it fits on Discord. LinkedIn keeps 119 characters but drops the description entirely, while Google clips at ~60. Check the tightest-platform counter, not just the card that happens to show your full text.

Privacy