Preview Open Graph and Twitter cards before you share
When a link is shared on social networks and chat apps, the platform reads the page's Open Graph (og:) and Twitter card meta tags to build a preview card. Missing or wrong tags lead to cards without images, cut-off titles or the wrong description. This Open Graph preview renders approximate cards for five platforms from the tags you paste, so you can fix problems before the link goes out.
The tags that matter
| Tag | Purpose |
|---|---|
| og:title | Card headline; keep it under about 60–70 characters |
| og:description | One or two sentences; most platforms show 150–200 characters |
| og:image | Absolute URL; 1200 × 630 px (1.91:1) works everywhere |
| og:url | Canonical URL of the page |
| og:type, og:site_name | Content type (website, article) and your brand name |
| twitter:card | summary_large_image for a big image, summary for a thumbnail |
X/Twitter falls back to the Open Graph tags when its own twitter:title, twitter:description and twitter:image are missing, but it needs twitter:card to show a large image.
How the previews work
The tool parses the meta tags in your browser and draws each card in the approximate style of the platform — Facebook's grey caption bar, X's rounded card with the domain overlay, LinkedIn's title and domain, Slack's attachment block and Discord's embed. Platforms change their designs regularly, so treat the previews as a close approximation. The image is loaded directly from the URL in your tags; if it fails to load in the preview, it will probably fail on the platform too.
The checklist and fixed tag set
Below the editor you get errors (no image, relative image URL), warnings (missing og:title, og:description or og:url) and hints (long title, missing twitter:card or alt text). The Complete tag set merges what you have with sensible defaults — including og:image dimensions and twitter tags — ready to paste.
After updating your tags
Platforms cache previews. After deploying, ask them to re-scrape the page using Facebook's Sharing Debugger or LinkedIn's Post Inspector. Generate the base tags with the meta tag generator, check the search snippet with the SERP preview and create a 1200 × 630 test image with the placeholder image generator.
Platform differences at a glance
Facebook shows the domain in capitals above the title and truncates the description to one line; LinkedIn shows only the title and domain; X shows the image with a small domain label and the title underneath; Slack and Discord show the site name, title, description and a smaller image. That is why a strong og:title matters most — it is the one element every platform displays.
Privacy
Your HTML is parsed locally in the browser. Only the preview image is requested from the URL you provided, just as a social network would.