Overview
See how a link renders across four platforms at once: a Twitter/X large card, a Google search result, a Facebook card, and a Discord embed. Fill in the title, description, URL, and image once, switch between platform previews, and copy the underlying meta tags.
How It Works
Enter the page title, description, canonical URL, and the social preview image URL in the form on the left. The right panel shows one of four platform-styled previews, selected with the tab buttons: Twitter/X, Google Search, Facebook, and Discord. Each preview approximates that platform's card layout, including how much of the title and description survives truncation. The full meta tag block appears below for copying into your page head.
Step-by-Step Usage Guide
- Fill in title, description, canonical URL, and image URL.
- Click through the Twitter/X, Google, Facebook, and Discord tabs to compare previews.
- Adjust the copy or image until all four previews read well.
- Copy the meta tag block and paste it into your page, adding site_name and any fixes.
Technical Specifications & Standards
The four previews are faithful mockups built with each platform's visual language: a dark card with a large image for X, a white result with breadcrumb-style URL for Google, a light Facebook card with the domain above the title, and Discord's left-bordered embed with the image below the text. Unlike the simpler generator on this site, the image you supply is actually loaded here, rendered as the preview background, so a dead image URL shows an empty area rather than pretending to work. Truncation is approximated with line clamping per platform rather than exact character counts, so treat the previews as representative rather than pixel-perfect. The generated meta block covers the primary title and description tags, the og group, and the twitter group; two deliberate gaps to know about: the twitter tags are emitted with the property attribute rather than the conventional name attribute, and there is no og:site_name tag, so add both by hand if your target platforms expect them.
Targeted Use Cases
- Checking one link against four platform layouts before publishing an announcement.
- Confirming an image crop works for both wide X cards and square-ish Discord embeds.
- Comparing how a page reads as a search result versus a social card with the same fields.
- Generating the standard og and twitter tag block for a new page.
Notes & Gotchas
- Use a 1200 by 630 image so every preview has enough resolution.
- Keep titles short enough to survive one line of clamping on the narrowest preview.
- After deploying, validate with each platform's own debugger; live scrapers re-fetch and cache with their own rules.
- Add og:site_name manually; the generated block does not include it.
Frequently Asked Questions
Does the preview really load my image?
Yes, the image URL is loaded by the preview panel itself, so you can see whether the URL resolves. It is your browser doing the loading, not a scraper service.
Why do the four previews truncate differently?
Each platform's card reserves different space for title and description. The mockups approximate that with per-platform line clamping, so the same text can survive on one platform and clip on another.
Are the generated tags complete for every platform?
They cover the common og and twitter tags. Two gaps worth fixing by hand: the twitter tags use property instead of the conventional name attribute, and og:site_name is not included.
Is the preview pixel-identical to the real platforms?
No. It is a close visual approximation for content decisions. Each platform adjusts its own card design over time and renders from its own cache, so use their official debuggers for final checks.