OG Tag Preview
Paste OG meta tags or fill title/description/image — preview share cards as they look on Twitter/X, Facebook, LinkedIn, and Discord.
What is this for?
When you share a link on Twitter/X, Facebook, LinkedIn, Discord, or Slack, those platforms "unfurl" it into a card showing the title, description, and image pulled from the page's Open Graph meta tags. Each platform renders these cards differently—different text lengths, aspect ratios, and layouts. This tool lets you preview how your link will appear across all major platforms side by side, so you can optimise the copy and image before you deploy, without having to actually share the URL on every platform.
When to use it
- You've updated OG tags or copy and want to confirm the card looks right before going live.
- You're selecting a hero image and need to see whether the focal point will survive the crop, especially on Twitter/X's 1.91:1 aspect ratio.
- You're writing or editing the title and description and want to know exactly where each platform will truncate the text.
- You inherited a page with missing or incorrect OG tags and want to draft them by checking the live preview.
- You're A/B testing different titles or descriptions and want to see the rendered result before committing.
- You need to verify that your image URL is publicly reachable and renders without errors.
How it works
- Paste the full HTML
<head>block or paste individual<meta>tags into the left panel, or use the form fields to enter title, description, and image URL separately. - The tool parses the Open Graph and Twitter Card meta tags from your input.
- Four live previews render on the right, showing how the card will appear on Twitter/X, Facebook, LinkedIn, and Discord.
- All processing happens in your browser—nothing is sent to a server, so you can paste sensitive or unpublished content safely.
- Adjust the tags or form fields and see the previews update instantly.
The minimum tags you need
<meta property="og:title" content="…"><meta property="og:description" content="…"><meta property="og:image" content="https://…">(absolute URL; 1200×630 is ideal)<meta property="og:url" content="https://…"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image">(for Twitter/X's large-image card style)
Common gotchas
- This is a static preview, not a live scraper. Real platforms scrape your live page from their servers. If your actual site delivers a different image or tags, this tool won't catch it. Use the platform's official debuggers—Twitter's card validator, Facebook's Sharing Debugger, LinkedIn's Post Inspector—for the definitive check.
- Image URLs must be absolute. Relative URLs like
/og.pngwon't work; scrapers don't know your origin. Always usehttps://example.com/og.png. - The image must be publicly reachable. If it's behind authentication, a referer-checking CDN, or hot-link protection, scrapers will fail silently and the card will render with no image.
- Aspect ratio and file size matter. 1200×630 (1.91:1) is the safe standard; square or portrait images crop badly. Keep file size under 1 MB for fast loading; some platforms reject images over 8 MB.
- Platforms cache aggressively. Once a platform has scraped your URL, the card is cached. To force a re-scrape after changes, use the platform's debugger tool.
- Text truncation varies. Twitter/X clips titles around 70 characters; Facebook around 88; LinkedIn around 100. Put the most important words first.