GeneratorMeta Tag Generator
Free meta tag generator tool. Create HTML meta tags for SEO, Open Graph (Facebook), and Twitter Cards. Generate title, description, keywords, and social media preview tags instantly.
About Meta Tag Generator
A comprehensive meta tag generator tool that helps you create HTML meta tags for SEO optimization, Open Graph (Facebook/social media), and Twitter Cards. Essential for webmasters, developers, and digital marketers to improve search rankings and social media presence.
What are meta tags?
Meta tags are HTML elements that provide metadata about a web page. They are placed in the <head> section of HTML documents and are not visible on the page itself, but they are read by search engines, browsers, and social media platforms.
**Key purposes:**
• Help search engines understand your page content
• Control how pages appear in search results (title, description)
• Define how content looks when shared on social media
• Provide technical information (character encoding, viewport settings)
• Control search engine crawling behavior (robots)
**Common meta tags:**
• <title> - Page title shown in browser tabs and search results
• <meta name="description"> - Page summary in search results
• <meta name="keywords"> - Page keywords (mostly deprecated)
• <meta name="viewport"> - Responsive design settings
• Open Graph tags - Facebook/social media previews
• Twitter Card tags - Twitter-specific previews
**Important notes:**
• Meta tags are crucial for SEO (Search Engine Optimization)
• They significantly impact click-through rates from search results
• Every page should have unique title and description
• Well-crafted meta tags improve social media engagement
• They are one of the easiest SEO improvements you can make
Why are meta tags important for SEO?
Meta tags are fundamental to SEO because they directly influence how search engines understand, index, and display your pages in search results.
**Search Engine Benefits:**
**1. Title Tag (<title>)**
• Most important on-page SEO factor
• Appears as the clickable headline in search results
• Influences rankings for target keywords
• First impression for potential visitors
• Affects click-through rate (CTR) significantly
**2. Meta Description**
• Doesn't directly affect rankings
• Heavily influences CTR from search results
• Provides context about page content
• Opportunity to include call-to-action
• Can be rewritten by Google if not compelling
**3. Robots Meta Tag**
• Controls indexing and link following
• Prevents duplicate content issues
• Manages crawl budget on large sites
• Protects private or low-value pages
**4. Canonical Tag**
• Prevents duplicate content penalties
• Consolidates link equity
• Clarifies preferred URL version
• Essential for e-commerce and blogs
**Impact on Rankings:**
**Direct ranking factors:**
• Title tag with relevant keywords
• Proper use of canonical URLs
• Structured data markup
**Indirect ranking factors:**
• Higher CTR from better descriptions
• Lower bounce rate from accurate titles
• More social shares with OG tags
• Better user experience
**SEO Statistics:**
• Pages with meta descriptions get 5.8% more clicks
• Titles under 60 characters perform better
• Including keywords early in title improves rankings
• Unique descriptions for each page boost SEO
**Common SEO mistakes:**
• Missing or duplicate meta descriptions
• Keyword stuffing in titles
• Titles too long (get truncated)
• Generic descriptions across all pages
• Not updating meta tags when content changes
**Best practices:**
• Write for humans first, search engines second
• Include primary keyword near start of title
• Make each description unique and compelling
• Match user intent with accurate descriptions
• Use active voice and calls-to-action
• Test and optimize based on CTR data
What are Open Graph tags?
Open Graph (OG) tags are meta tags created by Facebook that control how content appears when shared on social media platforms. They're now used by Facebook, LinkedIn, Pinterest, and many other platforms.
**Why use Open Graph tags?**
**Without OG tags:**
• Platforms guess what to show (often incorrectly)
• May pull wrong image or no image
• Description might be irrelevant text
• Looks unprofessional and gets fewer clicks
**With OG tags:**
• You control exactly what appears
• Professional, consistent branding
• Higher engagement and click rates
• Better social media presence
**Essential OG tags:**
**og:title** - The title of your content
```html
<meta property="og:title" content="Amazing Article Title">
```
• Can differ from page <title>
• 60-90 characters recommended
• Should be compelling and descriptive
**og:description** - Brief description
```html
<meta property="og:description" content="This article explains...">
```
• 200-300 characters
• Should entice clicks
• Can differ from meta description
**og:image** - Image to display
```html
<meta property="og:image" content="https://example.com/image.jpg">
```
• **Critical for engagement**
• Recommended size: 1200x630 pixels
• Format: JPG or PNG
• Max size: 8MB
• Must be absolute URL (https://...)
**og:url** - Canonical URL
```html
<meta property="og:url" content="https://example.com/page">
```
• Prevents duplicate content
• Should match canonical URL
• Always use absolute URLs
**og:type** - Content type
```html
<meta property="og:type" content="article">
```
• Common types: website, article, video, product
• Affects how content is categorized
**og:site_name** - Website name
```html
<meta property="og:site_name" content="My Website">
```
• Your brand/website name
• Appears below title on Facebook
**Additional article-specific tags:**
```html
<meta property="article:author" content="Author Name">
<meta property="article:published_time" content="2024-01-01">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO, Meta Tags">
```
**Image best practices:**
• Minimum: 600x315 pixels
• Recommended: 1200x630 pixels (1.91:1 ratio)
• Square images: 1200x1200 pixels
• Include text overlay for better engagement
• Ensure images look good when cropped
• Test on mobile and desktop
**Testing OG tags:**
• Facebook Sharing Debugger: developers.facebook.com/tools/debug/
• LinkedIn Post Inspector: linkedin.com/post-inspector/
• Pinterest Rich Pins Validator
• Clear cache when updating tags
**Impact on engagement:**
• Posts with images get 2.3x more engagement
• Proper OG tags increase CTR by 40%+
• Professional appearance builds trust
• Consistent branding across platforms
What are Twitter Cards?
Twitter Cards are meta tags that enhance tweets with rich media when your content is shared on Twitter. They transform plain links into attractive, engaging cards with images, titles, and descriptions.
**Types of Twitter Cards:**
**1. Summary Card**
```html
<meta name="twitter:card" content="summary">
```
• Default card type
• Small square image (1:1 ratio)
• Title and description
• Good for general content
• Image size: 120x120px minimum
**2. Summary Card with Large Image**
```html
<meta name="twitter:card" content="summary_large_image">
```
• Most popular card type
• Large rectangular image (2:1 ratio)
• More prominent in timeline
• Better engagement rates
• Image size: 1200x675px recommended
**3. App Card**
```html
<meta name="twitter:card" content="app">
```
• Promotes mobile apps
• Includes app store links
• Shows app rating and price
• Direct install buttons
**4. Player Card**
```html
<meta name="twitter:card" content="player">
```
• Embeds video/audio players
• Plays content directly in timeline
• Requires approval from Twitter
• Great for media sites
**Required Twitter Card tags:**
**twitter:card** - Card type
```html
<meta name="twitter:card" content="summary_large_image">
```
**twitter:title** - Content title
```html
<meta name="twitter:title" content="Amazing Article">
```
• 70 characters maximum
• Should be concise and compelling
**twitter:description** - Content description
```html
<meta name="twitter:description" content="Learn about...">
```
• 200 characters maximum
• Clear and engaging
**twitter:image** - Image URL
```html
<meta name="twitter:image" content="https://example.com/image.jpg">
```
• Absolute URL required
• Different size for each card type
• JPG, PNG, WEBP, GIF supported
• Max 5MB
**Optional but recommended:**
**twitter:site** - Website's Twitter handle
```html
<meta name="twitter:site" content="@yourusername">
```
• Attributes content to your account
• Includes @ symbol
• Increases brand visibility
**twitter:creator** - Content creator's handle
```html
<meta name="twitter:creator" content="@authorname">
```
• Credits individual author
• Can differ from site handle
• Good for multi-author sites
**Image specifications:**
**Summary card:**
• Aspect ratio: 1:1
• Minimum: 120x120px
• Recommended: 200x200px or larger
• Displayed as small square
**Summary large image:**
• Aspect ratio: 2:1
• Minimum: 300x157px
• Recommended: 1200x675px
• Maximum: 4096x4096px
• File size: Under 5MB
**All images:**
• Formats: JPG, PNG, WEBP, GIF
• Must be publicly accessible
• Use HTTPS URLs
• No transparency for JPG
• Test at different sizes
**Relationship with Open Graph:**
Twitter will fall back to Open Graph tags if Twitter Card tags aren't present:
• og:title → twitter:title
• og:description → twitter:description
• og:image → twitter:image
You can use OG tags alone, but Twitter Cards give more control.
**Testing Twitter Cards:**
• Twitter Card Validator: cards-dev.twitter.com/validator
• Paste your URL to preview
• Fix errors before going live
• Clear cache after updates
**Approval process:**
• Most cards work immediately
• Player cards require approval
• Submit through Card Validator
• Usually approved within minutes
**Best practices:**
• Always include twitter:card type
• Use high-resolution images
• Test on desktop and mobile
• Include relevant hashtags in title
• Make descriptions actionable
• Monitor engagement analytics
• Update images regularly for relevance
**Impact on engagement:**
• Tweets with images get 150% more retweets
• Cards increase clicks by 18%
• Summary large image performs best
• Professional cards build credibility
How long should my title and description be?
**Title Tag Length:**
**Google Search Results:**
• **Optimal: 50-60 characters**
• Maximum before truncation: ~580 pixels width
• Displayed characters vary by letter width (W vs i)
• Mobile shows fewer characters
**Why length matters:**
• Too short: Wastes valuable keyword space
• Too long: Gets cut off with "..."
• Truncated titles look unprofessional
• May hide important keywords or branding
**Examples:**
✓ **Good (58 chars):**
"Best Meta Tag Generator Tool - Free SEO Tags | WuTools"
• Fits perfectly
• Includes keywords
• Shows brand name
✗ **Too Long (82 chars):**
"Best Meta Tag Generator Tool for Creating SEO, Open Graph, and Twitter Card Tags | WuTools"
• Gets truncated to: "Best Meta Tag Generator Tool for Creating SEO, Open Gra..."
• Loses important info
• Looks incomplete
**Title optimization tips:**
• Put important keywords first
• Include brand name at end
• Use separators: | - : •
• Make every character count
• Test in SERP simulator tools
**Meta Description Length:**
**Google Search Results:**
• **Optimal: 150-160 characters**
• Maximum before truncation: ~920 pixels
• Desktop: ~155-160 characters
• Mobile: ~120-130 characters
• Can show up to 320 characters for featured snippets
**Why length matters:**
• Too short: Misses opportunity to persuade
• Too long: Gets truncated, loses CTA
• First 120 chars most important (mobile)
• Should include keywords and call-to-action
**Examples:**
✓ **Good (155 chars):**
"Free meta tag generator for SEO, Open Graph, and Twitter Cards. Create optimized HTML meta tags instantly with live previews. Improve your search rankings today!"
• Perfect length
• Includes keywords
• Has call-to-action
• Fits on all devices
✗ **Too Long (210 chars):**
"Free meta tag generator tool that helps you create perfect SEO meta tags, Open Graph tags for Facebook and social media, and Twitter Card tags with real-time previews. Start optimizing your website now!"
• Gets cut to: "Free meta tag generator tool that helps you create perfect SEO meta tags, Open Graph tags for Facebook and social media, and Twitter Card tags with real-time..."
• Loses call-to-action
• Important info hidden
**Social Media Length Guidelines:**
**Open Graph (Facebook/LinkedIn):**
• **Title:** 60-90 characters (95 max before truncation)
• **Description:** 200-300 characters
• More flexibility than Google
**Twitter Cards:**
• **Title:** 70 characters maximum (strict)
• **Description:** 200 characters maximum (strict)
• Truncates at character limit
**Mobile vs Desktop:**
**Google Mobile:**
• Title: ~50-55 characters
• Description: ~120 characters
• Less space available
• Design for mobile first
**Google Desktop:**
• Title: ~60 characters
• Description: ~155-160 characters
• More room for information
**Length checking tools:**
• Moz Title Tag Preview Tool
• SERP Simulator
• This Meta Tag Generator (character counters)
• Yoast SEO (WordPress plugin)
**Best practices:**
**For Titles:**
1. Aim for 50-60 characters
2. Front-load important keywords
3. Include brand if space allows
4. Make every word count
5. Avoid keyword stuffing
**For Descriptions:**
1. Aim for 150-160 characters
2. Write complete sentences
3. Include target keyword naturally
4. Add compelling call-to-action
5. Make first 120 characters strong (mobile)
6. Be specific and accurate
7. Match user search intent
**Common mistakes:**
• Writing for search engines, not humans
• Repeating same title/description across pages
• Going way over recommended length
• Not including calls-to-action
• Missing target keywords
• Being too vague or generic
• Using all caps (looks spammy)
**Testing your lengths:**
1. Check character count while writing
2. Preview in SERP simulator
3. Test on actual mobile device
4. Monitor click-through rates
5. A/B test different lengths
6. Adjust based on performance
Do I need both Open Graph and Twitter Card tags?
**Short answer:** It's recommended to include both, but Twitter will fall back to Open Graph tags if Twitter Card tags aren't present.
**How Twitter handles tags:**
Twitter checks for tags in this order:
1. **Twitter Card tags first** (twitter:title, twitter:description, etc.)
2. **Falls back to Open Graph** (og:title, og:description, etc.) if Twitter tags missing
3. **Page title and meta description** as last resort
**Scenario 1: Only Open Graph tags**
```html
<meta property="og:title" content="My Article">
<meta property="og:description" content="Description here">
<meta property="og:image" content="https://example.com/image.jpg">
```
**Result:**
• ✓ Works on Facebook, LinkedIn, Pinterest
• ✓ Works on Twitter (uses OG tags as fallback)
• ✓ Simpler implementation (fewer tags)
• ✗ Can't customize differently for Twitter
• ✗ Missing Twitter-specific features
**Scenario 2: Both Open Graph and Twitter Card tags**
```html
<!-- Open Graph -->
<meta property="og:title" content="My Facebook Title">
<meta property="og:image" content="https://example.com/og-image.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Twitter Title">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
```
**Result:**
• ✓ Full control over each platform
• ✓ Can optimize for different audiences
• ✓ Different images/text for Twitter vs Facebook
• ✓ Access to Twitter-specific card types
• ✗ More tags to manage
• ✗ More maintenance required
**When to use only Open Graph:**
✓ **Good for:**
• Simple websites with same message across platforms
• Limited development resources
• Content that works same everywhere
• Quick implementation needed
• Personal blogs or small sites
**Minimal viable tags:**
```html
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
```
• Works on all platforms
• Only 6 tags needed
• Twitter uses OG tags for content
**When to use both Open Graph and Twitter Cards:**
✓ **Good for:**
• Professional websites and businesses
• Different audiences on each platform
• Maximum engagement optimization
• E-commerce sites
• News and media sites
• Marketing campaigns
**Benefits of separate tags:**
**1. Different images:**
• Facebook: 1200x630px (1.91:1 ratio)
• Twitter: 1200x675px (16:9 ratio)
• Optimize for each platform's display
**2. Different messaging:**
• Twitter: Shorter, punchier titles (70 char limit)
• Facebook: Longer, more descriptive titles
• Platform-specific language and hashtags
**3. Different card types:**
• Twitter offers specialized cards (app, player)
• Can't control these with OG tags alone
**4. Attribution:**
• twitter:site and twitter:creator tags
• Links to your Twitter profile
• Increases brand visibility
**Recommended approach:**
**For most sites (balanced):**
```html
<!-- Basic OG tags (required) -->
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<!-- Twitter-specific (minimal) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
```
• Twitter inherits title/description/image from OG
• You set card type and attribution
• Good compromise: 7 tags total
**For high-traffic/commercial sites:**
Add complete Twitter tags for maximum control:
```html
<!-- Open Graph -->
<meta property="og:title" content="Facebook-optimized title">
<meta property="og:description" content="Facebook description">
<meta property="og:image" content="https://example.com/fb-image.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter-optimized title">
<meta name="twitter:description" content="Twitter description">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@author">
```
**Testing both:**
• Facebook Sharing Debugger for OG tags
• Twitter Card Validator for Twitter tags
• Test sharing on both platforms
• Check mobile and desktop views
**Maintenance considerations:**
• Updating both sets doubles work
• Need version control strategy
• Consider CMS/automation tools
• Template once, reuse everywhere
**Bottom line:**
• **Minimum:** Use Open Graph + twitter:card tag
• **Recommended:** Add twitter:site for attribution
• **Optimal:** Separate tags for maximum control
• **Depends on:** Your resources and audience
What image sizes should I use for social media?
**Open Graph / Facebook Image Sizes:**
**Recommended (Link Shares):**
• **Size:** 1200 x 630 pixels
• **Aspect Ratio:** 1.91:1
• **File Size:** Under 8 MB
• **Format:** JPG or PNG
• **Why:** Displays full-size without cropping
**Minimum:**
• 600 x 315 pixels
• Will be scaled up (may look pixelated)
• Use only if file size is critical
**Square Images:**
• **Size:** 1200 x 1200 pixels
• **Aspect Ratio:** 1:1
• **Use case:** Product images, logos, portraits
• Gets cropped on Facebook to 1:1 ratio
**Technical specs:**
• Maximum file size: 8 MB
• Minimum: 200 x 200 pixels (but looks bad)
• Aspect ratios outside 1.91:1 get cropped
• PNG for graphics with text
• JPG for photos (smaller file size)
**LinkedIn:**
• Same as Facebook: **1200 x 627 pixels**
• Aspect ratio: 1.91:1
• Maximum: 5 MB
• Also supports 1200 x 1200 for square
**Twitter Card Image Sizes:**
**Summary Card with Large Image (Most Popular):**
• **Size:** 1200 x 675 pixels
• **Aspect Ratio:** 16:9 (or 2:1)
• **Minimum:** 300 x 157 pixels
• **Maximum:** 4096 x 4096 pixels
• **File Size:** Under 5 MB
• **Why:** Prominent in timeline, high engagement
**Summary Card:**
• **Size:** 200 x 200 pixels (or larger square)
• **Aspect Ratio:** 1:1
• **Minimum:** 120 x 120 pixels
• **Small display** in timeline
• Use only if you need square format
**Twitter technical specs:**
• Formats: JPG, PNG, WEBP, GIF
• Maximum: 5 MB
• Images must be publicly accessible
• HTTPS URLs only
• Avoid transparency (may render poorly)
**Universal Social Media Image:**
**Best compromise size:**
• **1200 x 630 pixels** (Facebook ratio)
• Works acceptably on all platforms
• Twitter crops top/bottom slightly
• Center important content vertically
• Test how it looks when cropped
**One image for all platforms:**
```
1200 x 630px (Facebook standard)
├─ Facebook: Perfect fit
├─ Twitter: Slight crop top/bottom
├─ LinkedIn: Perfect fit
└─ Pinterest: Works (prefers taller)
```
**Platform-Specific Optimization:**
**If you can use different images per platform:**
**Facebook/LinkedIn/OG:**
```html
<meta property="og:image" content="/images/facebook-1200x630.jpg">
```
• 1200 x 630 pixels (1.91:1)
**Twitter:**
```html
<meta name="twitter:image" content="/images/twitter-1200x675.jpg">
```
• 1200 x 675 pixels (16:9)
**Pinterest (bonus):**
• **Optimal:** 1000 x 1500 pixels
• **Aspect Ratio:** 2:3 (vertical)
• Taller images perform better
• Minimum width: 600px
**Instagram (if applicable):**
• Square: 1080 x 1080 pixels
• Landscape: 1080 x 566 pixels
• Portrait: 1080 x 1350 pixels
• Maximum file size: 30 MB
**Image Design Best Practices:**
**1. Safe Zones:**
• Keep important content in center
• 20% margin on all sides
• Text might be covered by UI elements
• Test cropping on all platforms
**2. Text on Images:**
• Keep text to minimum (20% rule)
• Large, readable fonts (min 24px)
• High contrast (dark text on light background)
• Don't rely on tiny details
**3. Branding:**
• Include logo (subtle, in corner)
• Consistent color scheme
• Professional, high-quality images
• Brand-appropriate style
**4. File Optimization:**
• Compress images (TinyPNG, Squoosh)
• Balance quality and file size
• Aim for under 1 MB if possible
• Faster loading = better UX
**Testing Different Sizes:**
**1. Facebook Debugger:**
• developers.facebook.com/tools/debug/
• Shows exact preview
• Check image dimensions
• Clear cache after updates
**2. Twitter Card Validator:**
• cards-dev.twitter.com/validator
• Live preview of card
• Shows image cropping
• Validates all tags
**3. LinkedIn Post Inspector:**
• linkedin.com/post-inspector/
• Preview link shares
• Check image rendering
**Common Image Issues:**
**Problem: Image too small**
• ✗ Under 600 x 315 (Facebook)
• ✗ Under 300 x 157 (Twitter)
• Result: Pixelated, unprofessional
• Solution: Use recommended sizes
**Problem: Wrong aspect ratio**
• Image gets cropped awkwardly
• Important content cut off
• Solution: Design for 1.91:1 or use safe zone
**Problem: File too large**
• Slow loading
• May not display
• Solution: Compress to under 1 MB
**Problem: Wrong format**
• GIF first frame used
• SVG not supported
• Solution: Use JPG or PNG
**Quick Reference Table:**
| Platform | Recommended Size | Aspect Ratio | Max Size |
|----------|-----------------|--------------|----------|
| Facebook | 1200 x 630px | 1.91:1 | 8 MB |
| Twitter Large | 1200 x 675px | 16:9 | 5 MB |
| Twitter Summary | 200 x 200px | 1:1 | 5 MB |
| LinkedIn | 1200 x 627px | 1.91:1 | 5 MB |
| Pinterest | 1000 x 1500px | 2:3 | - |
| Universal | 1200 x 630px | 1.91:1 | 1 MB |
**Tools for Creating Images:**
• Canva (templates for all sizes)
• Adobe Express
• Figma (for designers)
• Photoshop
• GIMP (free alternative)
**Bottom line:**
• Use **1200 x 630 pixels** for everything if you can only create one image
• Use platform-specific sizes for optimal engagement
• Always test your images before publishing
• Keep file sizes under 1 MB for best performance
Key Features
- Easy-to-use interface for creating meta tags
- Basic meta tags (title, description, keywords, author, canonical)
- Character counter with SEO recommendations
- Open Graph tags for Facebook and social media
- Twitter Card tags with all card types
- Auto-sync from basic fields to social media fields
- Live social media preview (Google, Facebook, Twitter)
- Viewport and charset tags for responsive design
- Theme color for mobile browsers
- Favicon and Apple Touch Icon support
- Robots meta tag with all options
- Language/locale configuration
- Multiple OG types (website, article, product, video, etc.)
- Multiple Twitter card types (summary, large image, app, player)
- Real-time preview of how tags will look when shared
- Copy to clipboard with one click
- Download as HTML file
- Detailed installation instructions
- Best practices guide included
- 100% free, no registration required
- Works completely in browser
- Mobile-friendly responsive design
- SEO-optimized output
- Comprehensive documentation