WebToolsPlanet
seo Tools

Meta Tag Generator

Generate SEO title tags, meta descriptions, Open Graph, and Twitter Card tags for any webpage.

Last updated: March 25, 2026

Used 31K+ times
Client-Side Processing
Input Data Stays on Device
Instant Local Execution

What users say

“Having OG, Twitter Card, and standard meta tags generated together in one output saves me a lot of copy-pasting. The character counter for the description is essential.”
Jo P. — SEO Consultant

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Meta Tag Generator?

Meta tags are invisible HTML elements in your page's <head> that communicate page metadata to browsers, search engines, and social networks. Google reads your <title> and meta description to decide what to display in search results. Facebook, LinkedIn, and Twitter read Open Graph and Twitter Card tags to generate rich preview cards when someone shares your link.

Getting meta tags right is one of the highest-ROI SEO tasks you can do — a compelling title and description directly increases click-through rate (CTR) from search results, which Google uses as a ranking signal. This tool generates all the essential meta tags you need: standard SEO tags, viewport, robots, Open Graph (og:), and Twitter Card tags, ready to copy and paste directly into your HTML.

How to Use Meta Tag Generator

1

Fill in your page's title (50–60 characters recommended for search results)

2

Write your meta description (150–160 characters — this appears as the search result snippet)

3

Enter your page URL for canonical and OG URL tags

4

Add an image URL (1200×630px) for Open Graph social preview cards

5

Click "Copy HTML" to get all meta tags formatted and ready to paste into your <head>

Common Use Cases

  • Setting up SEO-optimized titles and descriptions for new blog posts or landing pages
  • Creating Open Graph tags so links render as rich preview cards on Facebook and LinkedIn
  • Generating Twitter Card tags for expanded tweet previews with image and title
  • Adding canonical URL tags to prevent duplicate content penalties on paginated pages
  • Setting up robots meta tags to control indexing (noindex, nofollow) for admin or staging pages
  • Configuring viewport tags for correct mobile rendering in responsive designs
  • Auditing and regenerating meta tags for legacy pages discovered missing OG tags
  • Teaching web developers what meta tags are required for a production-ready page

Example Input and Output

Complete set of meta tags for a blog post — covers SEO, social sharing, and mobile rendering:

Your page details
Title: How to Compress Images for the Web
Description: Learn the best techniques to reduce image file sizes without losing quality.
URL: https://example.com/blog/compress-images
Image: https://example.com/images/compress-blog-og.jpg
Generated HTML (paste into <head>)
<!-- SEO -->
<title>How to Compress Images for the Web</title>
<meta name="description" content="Learn the best techniques to reduce image file sizes without losing quality.">
<link rel="canonical" href="https://example.com/blog/compress-images">

<!-- Open Graph -->
<meta property="og:title" content="How to Compress Images for the Web">
<meta property="og:description" content="Learn the best techniques to reduce image file sizes without losing quality.">
<meta property="og:url" content="https://example.com/blog/compress-images">
<meta property="og:image" content="https://example.com/images/compress-blog-og.jpg">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Compress Images for the Web">
<meta name="twitter:image" content="https://example.com/images/compress-blog-og.jpg">

Test with Social Debuggers

After deploying your meta tags, test them with the Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector, and Twitter Card Validator. These tools show the actual preview card and let you force-refresh their cache.

Client-Side Processing

All meta tag generation happens entirely in your browser. No page data, URLs, or image paths are sent to or stored on our servers.

Dynamic OG Tags

For React/Next.js apps, generate meta tags server-side (not in useEffect) so crawlers can read them. Next.js has built-in Metadata API. For WordPress, the Yoast SEO and Rank Math plugins handle this automatically. Client-rendered meta tags are often not read by social preview crawlers.

Frequently Asked Questions

What is the ideal meta title length for Google?
Google typically displays 50–60 characters in desktop search results (wider on mobile). Titles longer than 60 characters get truncated with "...". Keep your primary keyword near the beginning of the title for maximum SEO impact.
How long should my meta description be?
Google shows approximately 150–160 characters in desktop search results. Write it as a compelling call to action — it does not directly affect rankings but strongly influences click-through rate. Include your main keyword naturally since Google bolds it in results.
Are meta keywords still important for SEO?
No. Google officially stopped using the meta keywords tag in 2009 and Bing ignores it entirely. It is effectively irrelevant for search rankings. Focus on title, meta description, and page content quality instead.
What is a canonical tag and when do I need it?
A canonical tag (<link rel="canonical">) tells search engines which URL is the "master" version of a page. Use it when the same content is accessible via multiple URLs (e.g. with/without trailing slash, with query parameters, or HTTP vs HTTPS) to prevent duplicate content diluting your ranking.
What is the difference between Open Graph and Twitter Card tags?
Open Graph (og: prefix) is a Facebook-developed standard now used by Facebook, LinkedIn, Slack, Discord, and many others for rich link previews. Twitter Card (twitter: prefix) is Twitter/X's own system for tweet previews. You need both sets for comprehensive social sharing coverage. Most og: tags work as Twitter fallbacks too.
What robots meta tag values can I use?
Common values: "noindex" (don't list this page in search results), "nofollow" (don't follow links on this page), "noarchive" (don't cache this page), "noimageindex" (don't index images). Combine with commas: "noindex, nofollow". Use noindex on login pages, admin areas, thank-you pages, and content behind paywalls.
What image size works best for Open Graph?
1200×630 pixels is the universal recommended size for og:image. This renders correctly on Facebook, LinkedIn, Slack, and most other platforms. The image should be under 8MB and saved as JPEG, PNG, GIF, or WebP. Use the WebToolsPlanet Image Resizer to quickly create this exact size.

How This Tool Works

The tool collects field values in real time and generates HTML strings using JavaScript template literals. Character counts are tracked live against recommended limits (60 for title, 160 for description). The output is assembled as a formatted HTML block that can be copied directly into the <head> of any HTML document. No external APIs are called — all generation is client-side.

Technical Stack

Browser-native JavaScriptReal-time character countingClient-side HTML generationNo external dependencies

Related Tools

Sitemap Validator
Validate XML sitemaps for syntax errors, structure issues, and SEO best-practice compliance.
Slug Generator
Convert any text to a clean, SEO-friendly URL slug — handles special characters, accents, and spaces.
Open Graph Generator
Generate Open Graph and Twitter Card meta tags for rich social media link previews.
Robots.txt Generator
Build a valid robots.txt file with visual rules, user-agent controls, and sitemap declaration.