0/60 chars
0/160 chars

Generated Meta Tags

0 tags
<!-- Fill in the form above to generate meta tags -->

Google Preview

Page Title
https://example.com
Your meta description will appear here. It should be 150-160 characters to avoid truncation in search results.

Social Preview

📷 No image set
example.com
Page Title
Your Open Graph description appears here.

Presets

SEO Tips

Title

Keep under 60 characters. Include primary keyword near the start.

Description

Keep under 160 characters. Write a compelling summary with a call to action.

OG Image

Use 1200×630px images for best social media display.

Canonical URL

Prevents duplicate content issues. Always use the full absolute URL.

About Meta Tag Generator

Create optimized HTML meta tags for better search engine visibility and social media sharing. Fill in your page details and instantly get ready-to-use meta tags with live Google and social previews.

✓Basic SEO meta tags (title, description, keywords)
✓Open Graph tags for Facebook & LinkedIn
✓Twitter Card tags for X (Twitter)
✓Live Google & social media previews
✓Character count with SEO recommendations
✓6 presets for common page types

Complete Guide to HTML Meta Tags

Free Online Meta Tag Generator

Generate optimized HTML meta tags for your website with our free online tool. Create basic SEO tags, Open Graph tags for social sharing, and Twitter Card tags — all in one place. See live previews of how your page will look in Google search results and social media feeds before you publish.

What Are Meta Tags?

Meta tags are HTML elements placed in the <head> section of a web page that provide metadata about the page to search engines, social media platforms, and web browsers. While they are not visible on the page itself, meta tags play a crucial role in SEO (Search Engine Optimization), controlling how your page appears in search results and when shared on social platforms.

Essential Meta Tags for SEO

<!-- Basic Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title - Site Name</title>
<meta name="description" content="Page description here">
<meta name="keywords" content="keyword1, keyword2">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">

Open Graph Meta Tags

Open Graph (OG) tags were created by Facebook and are now used by most social platforms including LinkedIn, Pinterest, and messaging apps. They control how your content appears when shared — the title, description, image, and link preview that users see.

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:site_name" content="Site Name">

Twitter Card Meta Tags

Twitter Card tags allow you to control how your content is displayed when shared on X (Twitter). The most common card types are “summary” (small image with title and description) and “summary_large_image” (large image above the title and description).

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yoursite">

Meta Tag Best Practices

📏 Character Limits

  • Title: 50–60 characters
  • Description: 150–160 characters
  • OG Title: Up to 95 characters
  • OG Description: Up to 200 characters
  • Twitter Title: Up to 70 characters

🖼️ Image Recommendations

  • OG Image: 1200×630 pixels
  • Twitter Image: 1200×628 pixels
  • Max file size: Under 5MB
  • Format: JPG, PNG, or WebP
  • Aspect ratio: 1.91:1 for large images

Why Meta Tags Matter for SEO

🔍 Search Engine Benefits

  • Control search result snippets
  • Improve click-through rates (CTR)
  • Prevent duplicate content issues
  • Guide crawler behavior with robots tag
  • Specify canonical URLs

📱 Social Media Benefits

  • Eye-catching share previews
  • Custom titles and descriptions per platform
  • Optimized images for each network
  • Increased engagement on shared links
  • Brand consistency across platforms

How to Use This Tool

  1. Fill in Basic Meta: Enter your page title, description, keywords, author, and canonical URL in the Basic Meta tab.
  2. Set Open Graph Tags: Switch to the Open Graph tab to customize how your page appears on Facebook and LinkedIn.
  3. Configure Twitter Card: Use the Twitter Card tab to set up X (Twitter) sharing tags.
  4. Preview: Check the Google and social previews on the right to see how your page will look.
  5. Use Presets: Try a preset to quickly fill in fields for common page types like blogs, products, or portfolios.
  6. Copy or Download: Copy the generated meta tags to your clipboard or download as an HTML file. Paste them into the <head> section of your HTML.

Perfect For

  • Web developers and designers
  • SEO specialists
  • Content marketers
  • Digital marketing teams
  • Bloggers and content creators
  • E-commerce store owners
  • Social media managers
  • Startup founders
  • Freelance developers
  • Website administrators
  • WordPress site owners
  • Students learning SEO

🔒 Complete Privacy Protection

All meta tag generation happens entirely in your web browser using JavaScript. No data is sent to any server. Your page information and SEO details remain completely private and secure.

Related SEO & Web Development Tools

</>&&amp;&lt; &gt;

HTML Entity Encoder

Encode and decode HTML entities for safe use in meta tag content.

JSON Formatter

Format and validate JSON-LD structured data for SEO schema markup.

HTML Minifier

Minify HTML code including meta tags for faster page load times.

Markdown Editor

Write and preview content for blog posts that need proper meta tags.

HTML Table Generator

Generate HTML tables for structured data on your web pages.

<meta>

CSS Gradient Generator

Create beautiful CSS gradients for your website design and OG images.