What are meta tags and why are they important for SEO?

Meta tags are HTML elements in the section that provide metadata about a webpage. They help search engines understand your content, control how pages appear in search results, enable rich social media sharing, and improve click-through rates from search results.

How do I generate meta tags online for free?

Enter your page details (title, description, keywords, URL), configure Open Graph and Twitter Card settings, add optional tags (robots, canonical, author), preview how your page will appear in search results and social shares, then copy the generated HTML code.

How long should my title tag be for SEO?

Keep titles between 50-60 characters to avoid truncation in search results. Google displays approximately 600 pixels width. Include your primary keyword near the beginning, make it compelling for users to click, and include your brand name at the end if space allows.

What is the ideal meta description length?

Aim for 150-160 characters for optimal display. Google may show up to 320 characters on desktop but less on mobile. Make it compelling with a clear value proposition, include relevant keywords naturally, and add a call-to-action when appropriate.

Are keywords meta tags still important for SEO?

Google has ignored the keywords meta tag since 2009. However, some other search engines (Yandex, Baidu) may still use it. Focus your SEO efforts on natural keyword usage in your content, title, description, headings, and URL structure instead.

What is Open Graph (OG) and why do I need it?

Open Graph tags control how your content appears when shared on Facebook, LinkedIn, Pinterest, and other social platforms. They let you specify the title, description, image, and type for social shares, significantly improving engagement and click-through rates.

What are Twitter Cards and how do they work?

Twitter Cards are meta tags that control how your content appears when shared on Twitter/X. Types include: summary (small image), summary_large_image (large image), player (video/audio), and app (mobile app). They improve engagement compared to plain text links.

What is a canonical URL and when should I use it?

The canonical tag (rel="canonical") tells search engines which URL is the "official" version of a page. Use it to prevent duplicate content issues when the same content is accessible via multiple URLs (www vs non-www, HTTP vs HTTPS, URL parameters).

What does the robots meta tag do?

The robots tag controls how search engines index and follow links. Common values: "index, follow" (default), "noindex" (don't index this page), "nofollow" (don't follow links), "noarchive" (don't cache), "nosnippet" (don't show description in results).

What is the viewport meta tag and why is it essential?

The viewport tag controls how your page displays on mobile devices. The standard value "width=device-width, initial-scale=1.0" ensures proper responsive behavior. Without it, mobile browsers may render your page at desktop width and scale it down.

What image size should I use for OG and Twitter images?

Recommended size is 1200x630 pixels (1.91:1 aspect ratio) for og:image, which works well across Facebook, LinkedIn, and Twitter. For Twitter summary cards, use 144x144 minimum. Always specify width and height meta tags for faster rendering.

How do I verify my site with Google Search Console?

Add the google-site-verification meta tag with your verification code from Search Console. This proves you own the site and gives you access to search performance data, indexing status, and crawl errors. Similar tags exist for Bing, Yandex, and Pinterest.

What is theme-color meta tag?

The theme-color meta tag sets the browser toolbar/address bar color on mobile devices, providing a branded experience. It's especially important for Progressive Web Apps (PWAs). Use your brand's primary color for consistency.

Where should meta tags be placed in HTML?

All meta tags should be placed in the section of your HTML document, before any content in the . The charset meta tag should come first, followed by viewport, then title, description, and other meta tags.

Is my meta tag data secure when using this generator?

Yes! All meta tag generation happens 100% in your browser using JavaScript. Your page information is NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy and security.

What are meta tags and why are they important for SEO?

Meta tags are HTML elements in the section that provide metadata about a webpage. They help search engines understand your content, control how pages appear in search results, enable rich social media sharing, and improve click-through rates from search results.

How do I generate meta tags online for free?

Enter your page details (title, description, keywords, URL), configure Open Graph and Twitter Card settings, add optional tags (robots, canonical, author), preview how your page will appear in search results and social shares, then copy the generated HTML code.

How long should my title tag be for SEO?

Keep titles between 50-60 characters to avoid truncation in search results. Google displays approximately 600 pixels width. Include your primary keyword near the beginning, make it compelling for users to click, and include your brand name at the end if space allows.

What is the ideal meta description length?

Aim for 150-160 characters for optimal display. Google may show up to 320 characters on desktop but less on mobile. Make it compelling with a clear value proposition, include relevant keywords naturally, and add a call-to-action when appropriate.

Are keywords meta tags still important for SEO?

Google has ignored the keywords meta tag since 2009. However, some other search engines (Yandex, Baidu) may still use it. Focus your SEO efforts on natural keyword usage in your content, title, description, headings, and URL structure instead.

What is Open Graph (OG) and why do I need it?

Open Graph tags control how your content appears when shared on Facebook, LinkedIn, Pinterest, and other social platforms. They let you specify the title, description, image, and type for social shares, significantly improving engagement and click-through rates.

What are Twitter Cards and how do they work?

Twitter Cards are meta tags that control how your content appears when shared on Twitter/X. Types include: summary (small image), summary_large_image (large image), player (video/audio), and app (mobile app). They improve engagement compared to plain text links.

What is a canonical URL and when should I use it?

The canonical tag (rel="canonical") tells search engines which URL is the "official" version of a page. Use it to prevent duplicate content issues when the same content is accessible via multiple URLs (www vs non-www, HTTP vs HTTPS, URL parameters).

What does the robots meta tag do?

The robots tag controls how search engines index and follow links. Common values: "index, follow" (default), "noindex" (don't index this page), "nofollow" (don't follow links), "noarchive" (don't cache), "nosnippet" (don't show description in results).

What is the viewport meta tag and why is it essential?

The viewport tag controls how your page displays on mobile devices. The standard value "width=device-width, initial-scale=1.0" ensures proper responsive behavior. Without it, mobile browsers may render your page at desktop width and scale it down.

What image size should I use for OG and Twitter images?

Recommended size is 1200x630 pixels (1.91:1 aspect ratio) for og:image, which works well across Facebook, LinkedIn, and Twitter. For Twitter summary cards, use 144x144 minimum. Always specify width and height meta tags for faster rendering.

How do I verify my site with Google Search Console?

Add the google-site-verification meta tag with your verification code from Search Console. This proves you own the site and gives you access to search performance data, indexing status, and crawl errors. Similar tags exist for Bing, Yandex, and Pinterest.

What is theme-color meta tag?

The theme-color meta tag sets the browser toolbar/address bar color on mobile devices, providing a branded experience. It's especially important for Progressive Web Apps (PWAs). Use your brand's primary color for consistency.

Where should meta tags be placed in HTML?

All meta tags should be placed in the section of your HTML document, before any content in the . The charset meta tag should come first, followed by viewport, then title, description, and other meta tags.

Is my meta tag data secure when using this generator?

Yes! All meta tag generation happens 100% in your browser using JavaScript. Your page information is NEVER sent to any server, stored, or logged. The tool works completely offline for maximum privacy and security.

Meta Tag Generator

simple

Generate HTML meta tags for SEO, social sharing, and search engine optimization. Includes Open Graph, Twitter Cards, and all essential meta tags.

Web Developmentmetatagsseohtml

100% Private - Runs Locally

How to Use

1Enter page details
2Preview meta tags
3Copy HTML code
4Add to your page

Examples

Basic Website

Input

Title: My Website - Home
Description: Welcome to my website

Output

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website - Home</title>
<meta name="description" content="Welcome to my website">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="My Website - Home">
<meta property="og:description" content="Welcome to my website">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Website - Home">
<meta name="twitter:description" content="Welcome to my website">

Blog Article

Input

Type: Article
Title: How to Build a Website
Author: John Doe

Output

<title>How to Build a Website | My Blog</title>
<meta name="description" content="Learn how to build a website from scratch with this comprehensive guide.">
<meta name="author" content="John Doe">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="How to Build a Website | My Blog">
<meta property="og:description" content="Learn how to build a website from scratch.">
<meta property="og:image" content="https://example.com/blog-image.jpg">
<meta property="article:author" content="John Doe">
<meta property="article:published_time" content="2025-01-05T10:00:00Z">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="web development">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@myblog">
<meta name="twitter:creator" content="@johndoe">

E-commerce Product

Input

Type: Product
Title: Premium Widget - $29.99

Output

<title>Premium Widget - Only $29.99 | My Store</title>
<meta name="description" content="Shop our premium widget. High quality, great price, free shipping, 30-day returns.">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="product">
<meta property="og:title" content="Premium Widget - Only $29.99">
<meta property="og:description" content="Shop our premium widget with free shipping.">
<meta property="og:image" content="https://example.com/product.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Premium Widget - Only $29.99">

Local Business

Input

Business: Coffee Shop in Seattle

Output

<title>Best Coffee Shop in Seattle | Cafe Name</title>
<meta name="description" content="Visit the best coffee shop in Seattle. Fresh roasted beans, cozy atmosphere.">
<meta name="geo.region" content="US-WA">
<meta name="geo.placename" content="Seattle">
<meta name="geo.position" content="47.6062;-122.3321">
<meta name="ICBM" content="47.6062, -122.3321">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Best Coffee Shop in Seattle">
<meta property="og:locale" content="en_US">

No Index Page

Input

robots: noindex, nofollow

Output

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Private Page</title>
<meta name="robots" content="noindex, nofollow">

PWA/Mobile App

Input

Mobile Web App Capable: yes

Output

<title>My App</title>
<meta name="theme-color" content="#4285f4">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="My App">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-TileColor" content="#4285f4">

<!-- App Links -->
<meta property="al:ios:app_store_id" content="123456789">
<meta property="al:ios:app_name" content="My App">
<meta property="al:android:package" content="com.example.app">

Frequently Asked Questions

Related Tools

View all

Open Graph Generator

Generate Open Graph meta tags for social media sharing on Facebook, LinkedIn, Pinterest, and Discord with live preview.

Twitter Card Generator

Generate Twitter Card meta tags for rich tweet previews. Support for Summary, Summary Large Image, Player, and App cards.

<title>How to Build a Website | My Blog</title> <meta name="description" content="Learn how to build a website from scratch with this comprehensive guide."> <meta name="author" content="John Doe"> <meta name="robots" content="index, follow">  <meta property="og:type" content="article"> <meta property="og:title" content="How to Build a Website | My Blog"> <meta property="og:description" content="Learn how to build a website from scratch."> <meta property="og:image" content="https://example.com/blog-image.jpg"> <meta property="article:author" content="John Doe"> <meta property="article:published_time" content="2025-01-05T10:00:00Z"> <meta property="article:section" content="Technology"> <meta property="article:tag" content="web development">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@myblog"> <meta name="twitter:creator" content="@johndoe">

<title>Premium Widget - Only $29.99 | My Store</title> <meta name="description" content="Shop our premium widget. High quality, great price, free shipping, 30-day returns."> <meta name="robots" content="index, follow">  <meta property="og:type" content="product"> <meta property="og:title" content="Premium Widget - Only $29.99"> <meta property="og:description" content="Shop our premium widget with free shipping."> <meta property="og:image" content="https://example.com/product.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Premium Widget - Only $29.99">

<title>Best Coffee Shop in Seattle | Cafe Name</title> <meta name="description" content="Visit the best coffee shop in Seattle. Fresh roasted beans, cozy atmosphere."> <meta name="geo.region" content="US-WA"> <meta name="geo.placename" content="Seattle"> <meta name="geo.position" content="47.6062;-122.3321"> <meta name="ICBM" content="47.6062, -122.3321">  <meta property="og:type" content="website"> <meta property="og:title" content="Best Coffee Shop in Seattle"> <meta property="og:locale" content="en_US">