Meta Tag Previewer
Preview how your page will appear in Google search results, Twitter cards and Facebook shares. Generate HTML meta tags with character warnings
Google Search Result Preview
Generated Meta Tags
<title>Amazing Online Tools | MyKit.tools</title> <meta name="description" content="Free online tools for everything. Calculators, converters, generators, and more."> <meta property="og:title" content="Amazing Online Tools | MyKit.tools"> <meta property="og:description" content="Free online tools for everything. Calculators, converters, generators, and more."> <meta property="og:url" content="https://mykit.tools/example-tool"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Amazing Online Tools | MyKit.tools"> <meta name="twitter:description" content="Free online tools for everything. Calculators, converters, generators, and more.">
What Google, Twitter, and Facebook Actually Show
Type a page title, description, and URL, and the tool renders three side-by-side previews matching what a Google SERP, a Twitter card, and a Facebook OG share will display. Titles longer than 60 characters get truncated by Google's mobile result display; descriptions over 160 characters get cut. The tool flags both as you type, so you can rewrite before the snippet looks bad in the wild. Default values seed the form so you can see a working preview immediately.
Beneath the previews, the tool generates the full HTML meta block: a `<title>`, `<meta name="description">`, the seven Open Graph tags Facebook and LinkedIn read (og:title, og:description, og:url, og:image, og:type), and the three Twitter Card tags (twitter:card, twitter:title, twitter:description). Copy the block straight into your `<head>` to get correct previews on every platform that crawls your page.
Image Dimensions and the Open Graph Cache
Open Graph images should be 1200x630 pixels (1.91:1 ratio) for crisp rendering on Facebook, LinkedIn, and Twitter's `summary_large_image`. Smaller images get scaled up and look fuzzy; the wrong aspect ratio gets cropped unpredictably. JPG and PNG both work; PNG is better for images with text overlay or sharp graphics, JPG is smaller for photos. Keep the file under 5MB to avoid Facebook's hard reject.
The frustrating reality: Facebook caches OG metadata for around seven days, and Twitter caches for similar periods. Update your tags and the new preview won't appear until the cache expires or you force a refresh. Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) and Twitter's Card Validator to scrape your URL fresh; they also surface any parsing errors in your tags. LinkedIn has its own Post Inspector. Always test there before announcing a post.
Recommended Character Limits
| Field | Ideal Length | Hard Limit | Why |
|---|---|---|---|
| Page title (Google) | 50-60 chars | 60 chars on mobile | Truncated with ellipsis past 60 |
| Meta description | 150-160 chars | 160 chars on mobile | Google rewrites long ones |
| OG title | 60-90 chars | 100 chars | Facebook truncates around 90 |
| OG description | 150-200 chars | 300 chars | Cut around line 2 in feed |
| Twitter title | 70 chars | 70 chars | Hard cap, no ellipsis |
| OG image | 1200x630px | 5MB file | 1.91:1 ratio for full-bleed |
Frequently Asked Questions
Why does Google show a different title than what I set?
Since 2021 Google has frequently rewritten title tags using on-page H1, anchor text, or its own model when it judges your title to be misleading, stuffed with keywords, or off-topic. There's no way to disable the rewrite. The fix is to write a title that closely matches the page's primary topic, fits within 60 characters, and doesn't repeat your brand name in a way Google considers boilerplate.
Do I need separate OG tags if I have meta description?
Yes. Google reads `<meta name="description">` for the SERP snippet. Facebook, LinkedIn, Slack, Discord, and most messaging apps read `<meta property="og:description">`. They're independent. Set both to the same value if you want consistency, or split them if you want a more conversational version for social shares and a search-optimised version for Google.
What is the right value for og:type?
For most pages, `website` is correct. For blog posts, `article` enables extra Open Graph fields (article:published_time, article:author, article:section). For products, `product` if you're using the OG product extension. Facebook ignores most type-specific fields nowadays, so don't agonise; `website` is a safe default if you're unsure.
Why is my OG image not showing?
Top causes: the image URL is on a domain that returns a 401 or requires login (use a public CDN); the URL uses HTTP not HTTPS (most platforms reject mixed content); the image is below the minimum dimensions (200x200 for Facebook); or the platform's cache is showing an older version. Run the URL through Facebook's Sharing Debugger to surface the exact reason.
Related Tools
Robots.txt Generator
Build a robots.txt file visually with rules for different bots. Quick presets for common configurations including AI crawler blocking
HTML Encoder / Decoder
Encode special characters to HTML entities or decode HTML entities back to text. Handles all named and numeric entities with live preview.
QR Code Generator
Generate QR codes for website URLs and plain text. Download as PNG or SVG with custom colours. Free, instant, no sign-up required.