Meta Tag Preview
How it works
Enter your page title, description, canonical URL and OG/Twitter image, or paste the full <head> HTML and let the tool extract every meta tag automatically. You get five live previews rendered in near-pixel-perfect fidelity:
• Google SERP card (title, green URL, description, 60/160 character limits) • Twitter / X large card (summary_large_image) • Facebook / Open Graph (landscape, 1.91:1 image) • LinkedIn feed card • Discord embed (rich preview with color bar)
Every preview updates as you edit a field. The character counters next to the title and description turn orange as you approach the truncation threshold and red when the platform will cut your text off mid-word. Google truncates titles at ~60 characters on desktop and ~35 on mobile, and the counter shows both numbers.
What the tool checks for you: • Missing og:image (the link renders as a bare text card, CTR drops ~40%) • og:image with the wrong aspect ratio (Facebook and LinkedIn want 1.91:1; portrait images get cropped) • Twitter Card type missing (without twitter:card the card collapses to a single-line link) • Title longer than 60 chars (Google truncates) • Description shorter than 70 or longer than 160 chars (Google either ignores it or truncates) • Canonical URL missing or mismatched
Typical workflow: paste the current <head> of a page you are about to launch, read the red warnings on the right, fix them in your source, paste again, repeat until every preview looks how you want it. Then ship.
Common uses: QA-ing blog posts before publishing, debugging why a LinkedIn or Slack share shows the wrong image, checking that a new landing page's Google snippet is compelling, comparing A/B variants of a page title, and building the meta tags from scratch for a new site when you don't have a CMS preset.
Frequently Asked Questions
Do I need to enter a live URL?
- No. You can type everything by hand and still see the five previews. The URL field only feeds the green SERP URL and og:url, so the page itself does not need to exist yet. That lets you design the snippet before the page goes live.
Can I paste raw HTML meta tags?
- Yes. Paste your <head> (or the full HTML, the tool ignores the body) into the HTML input and every og:*, twitter:* and standard <title> / <meta name> tag is extracted for you. Useful for QA: copy the head from a live page, paste it here, and see what Facebook and Twitter will show.
How long should my title and meta description be?
- Google truncates titles at roughly 60 characters on desktop and 35 on mobile, and descriptions at ~155 chars desktop / 120 mobile. The counter turns orange at the warning threshold and red once the platform will truncate. For social cards (Twitter, Facebook, LinkedIn) titles up to ~70 characters and descriptions up to ~200 are safe.
What image size should I use for Open Graph and Twitter?
- 1200 × 630 pixels (1.91:1 aspect ratio) is the safe cross-platform size. Facebook and LinkedIn crop anything taller, and Twitter's summary_large_image also expects 1.91:1. Square previews (the smaller Twitter card, small Facebook thumbnails) work at 1200 × 1200, but 1200 × 630 is the size everyone optimises for.
Why does my Facebook share show the old image after I updated og:image?
- Because Facebook caches OG previews aggressively. Use the official Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to re-scrape the URL after updating. LinkedIn has its own Post Inspector; Twitter does not cache. This tool shows what the card will look like, but getting the platforms to refresh is a separate step.
Does it fetch the URL to get the real meta tags?
- No. Fetching arbitrary URLs from the browser would hit CORS limits and could leak referrer data. You paste the HTML or fill the fields yourself, and the tool renders previews from what you provide. If you need a live-fetch checker, use the platform-specific debuggers above.
Can I paste meta tags that include non-ASCII characters (emoji, accents)?
- Yes. The input is treated as UTF-8 throughout, and emoji in titles render the way they will appear on Google and social cards. One caveat: an emoji counts as 2 characters toward the truncation limit on most platforms.