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 1200x630px 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 and LinkedIn
✓Twitter Card tags for X (Twitter)
✓Live Google and 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.

What Are Meta Tags?

Meta tags are HTML elements placed in the head section of a web page. They provide metadata to search engines, social media platforms, and browsers, helping control how your page appears in search results and shared link previews.

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 tags control the title, description, image, and link preview shown when your page is shared on Facebook, LinkedIn, messaging apps, and many other social platforms.

<!-- 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 control how links appear on X (Twitter). If Twitter-specific tags are missing, many platforms fall back to the matching Open Graph values.

<!-- 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: 1200x630 pixels
  • Twitter image: 1200x628 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
  • Prevent duplicate content issues
  • Guide crawler behavior with robots tags
  • Specify canonical URLs

Social Media Benefits

  • Create eye-catching share previews
  • Customize titles and descriptions per platform
  • Optimize images for each network
  • Increase engagement on shared links
  • Keep brand presentation consistent

How to Use This Tool

  1. Fill in Basic Meta: Enter your page title, description, keywords, author, and canonical URL.
  2. Set Open Graph Tags: Customize how your page appears on Facebook, LinkedIn, and other social platforms.
  3. Configure Twitter Card: Set up X (Twitter) sharing tags and preview text.
  4. Preview: Check the Google and social previews to see how your page will look.
  5. Use Presets: Start quickly with common page types like blogs, products, portfolios, and landing pages.
  6. Copy or Download: Copy the generated meta tags or download them as an HTML file, then paste them into your page head.

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 browser using JavaScript. No data is sent to any server, so your page information and SEO details remain private.

Related SEO and 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 pages that need proper meta tags.

HTML Table Generator

Generate HTML tables for structured data on your web pages.

<meta>

CSS Gradient Generator

Create CSS gradients for website design and social preview images.