About MetaTag Preview
MetaTag Preview is a free, instant meta tag generator and Open Graph preview tool. It helps developers, marketers, and content creators craft perfect SEO meta tags and see exactly how their pages will appear across major platforms — all without leaving the browser.
No signup. No data stored. Everything runs in your browser.
What You Can Do
- 1Generate meta tags — Fill in your page title, description, canonical URL, OG image URL, site name, and more. The tool instantly outputs a complete
<head>block — title, meta description, all Open Graph tags, Twitter Card tags, and canonical URL — ready to copy and paste. - 2Preview across 5 platforms — See live previews for Google Search, Facebook, Twitter/X, LinkedIn, and Slack. Each card mimics the real platform appearance — correct fonts, colors, border radius, and truncation rules — so you know exactly what users see when your link is shared.
- 3Check your OG image — Paste an image URL and the built-in OG image checker fetches it, measures its dimensions, and flags any aspect ratio mismatch against the recommended 1200×630 (1.91:1) standard. A per-platform size guide shows minimum and recommended dimensions for each network.
- 4Analyze any existing page — Paste a URL and the tool fetches and extracts all current meta tags, populating the form automatically. Audit a competitor's tags, debug your own pages, or see why a link preview is showing the wrong title or image.
How to Use MetaTag Preview
Building meta tags from scratch or auditing an existing page both take under a minute.
Starting from scratch
- 1. Enter your page title. The counter shows how many characters remain before Google truncates it (~60 chars).
- 2. Write your meta description. Aim for 120–160 characters — benefit-driven, not a keyword dump.
- 3. Add your canonical URL and OG image URL. The image checker validates dimensions on the spot.
- 4. Check the live preview cards on the right — Google, Facebook, Twitter/X, LinkedIn, Slack — and adjust until everything looks right.
- 5. Click Copy on the HTML output. Paste into your page's
<head>.
Auditing an existing page
- 1. Paste the page URL into the Analyze URL box at the top of the form.
- 2. The tool extracts all existing meta tags and fills the form automatically.
- 3. Check the live previews to see what's actually rendering on each platform.
- 4. Edit any fields that need improving, then copy the updated HTML block.
Why Meta Tags Matter
Meta tags are the hidden metadata in your HTML that search engines and social media platforms use to understand and display your content.
A well-crafted meta description won't directly change your rankings, but it controls your search snippet. A compelling snippet improves click-through rates from Google — which means more traffic from the same position. Studies consistently show optimized descriptions can lift CTR by 5–30%.
Proper Open Graph tags (og:title, og:description, og:image) ensure your content looks professional when shared on Facebook and LinkedIn. Without them, platforms pick an arbitrary image and whatever text they find first — often the wrong thing.
Twitter Card tags control how links unfurl in the Twitter/X feed. The difference between a plain URL and a summary_large_image card is enormous — one gets scrolled past, the other gets clicks.
And when a teammate pastes your URL into Slack, the Slack link unfurl uses your OG tags too. A professional-looking unfurl builds credibility in the moment that matters.
How It Compares
There are a few other meta tag tools out there. Here's an honest take:
| Feature | MetaTag Preview | Most alternatives |
|---|---|---|
| Live preview (updates as you type) | ✓ | Some |
| 5 platform previews (Google, FB, X, LinkedIn, Slack) | ✓ | 2–3 platforms |
| URL analyzer (extract existing tags) | ✓ | Rare |
| OG image dimension checker | ✓ | Rare |
| No signup required | ✓ | Usually |
| No data stored | ✓ | Varies |
Comparison based on publicly available feature sets as of early 2025. Features change — always verify.
Frequently Asked Questions
What's the difference between OG tags and Twitter Card tags?
Open Graph tags (og:title, og:description, og:image) were created by Facebook and are used by Facebook, LinkedIn, and Slack when generating link previews. Twitter Card tags (twitter:card, twitter:title, etc.) are Twitter/X's own format. In practice, Twitter also falls back to OG tags if Twitter Card tags are missing — so setting both gives you full control across all platforms.
What's the ideal meta description length?
Google truncates meta descriptions at roughly 160 characters (about 920 pixels wide). Keep your description between 120–160 characters for best results. Shorter is fine, but descriptions over 160 chars will be cut off with an ellipsis in search results. MetaTag Preview's character counter turns yellow at 130 and red at 160 to help you stay in range.
What's the ideal OG image size?
The standard Open Graph image size is 1200×630 pixels at a 1.91:1 aspect ratio. This displays well on Facebook, LinkedIn, and Twitter/X. For Twitter's summary_large_image card, images must be at least 300×157 pixels. Always use HTTPS for your image URL — HTTP images are blocked by most platforms.
Does MetaTag Preview store my data?
No. All form state is kept in your browser's memory and never sent to a server. The only network request is the optional URL Analyzer feature, which uses a server-side proxy to fetch the target page and parse its meta tags — that data is returned to you and not stored. There's no database, no accounts, and no tracking of what you type.
Can I use this to check an existing website?
Yes. Paste any publicly accessible URL into the "Analyze URL" input at the top of the form. The tool fetches that page server-side (to avoid CORS issues) and extracts all existing title, meta description, and Open Graph tags. The form auto-fills with those values so you can audit and improve them immediately.
What's the difference between summary and summary_large_image on Twitter/X?
Both are Twitter Card types. summary shows a small thumbnail image aligned left with the title and description. summary_large_image shows a large banner image above the text — similar to how Facebook and LinkedIn display cards. If your OG image is at least 300×157 pixels, use summary_large_image for more visual impact in the Twitter feed.
Why does my link preview look different on different platforms?
Each platform has its own rendering rules. Facebook favors og:image at 1.91:1 ratio and caches previews aggressively. LinkedIn pulls og:title and og:description but may show the article author if schema.org markup is present. Slack respects og:image but limits description length to around 100 characters. The live preview cards in MetaTag Preview simulate each platform's specific behavior so you can see differences before publishing.
My OG image isn't showing. What's wrong?
Common causes: (1) The image URL uses HTTP instead of HTTPS. (2) The image is blocked by a Content Security Policy or missing CORS headers. (3) The platform cached the old version — Facebook and LinkedIn both have cache-busting tools (Facebook Sharing Debugger, LinkedIn Post Inspector) where you can force a re-scrape. (4) The image is smaller than the platform's minimum. Enter the URL in MetaTag Preview's OG Image Checker to verify dimensions instantly.
Helpful Resources
- The Open Graph Protocol ↗
Official specification for Open Graph meta tags used by Facebook, LinkedIn, and more.
- Twitter Cards Documentation ↗
Official guide to Twitter/X card types, markup, and validation.
- Google Search Central — SEO Starter Guide ↗
Google's recommendations for title tags, meta descriptions, and structured data.
- Schema.org — WebApplication ↗
Structured data markup for web applications, used to enhance search listings.
- Meta Tags — A Guide for SEO ↗
Moz's guide to crafting effective meta descriptions that improve click-through rates.