Meta Tag Generator

Create basic SEO meta tags for webpages, blog posts, landing pages, and tool pages. Use this meta tag generator to prepare title tags, meta descriptions, and HTML output before publishing.

Last updated: March 25, 2026

Used 31K+ times

Page Title *

0/60 characters

Page URL

Meta Description *

0/160 characters

Keywords

Author

Social Image URL

Site Name

Twitter Handle

Generated Meta Tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">

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 cleanup tasks you can do because a clear title and description can make search snippets more useful and improve click-through from search results. This tool generates essential meta tags: 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

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

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

Enter your page URL for canonical and OG URL tags

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

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

Common Use Cases

Prepare metadata for blog posts.
Create meta tags for tool pages.
Draft SEO titles for landing pages.
Generate HTML meta tags for static websites.
Improve page summaries before publishing.
Create consistent metadata for content teams.

Example Input and Output

Basic metadata for a WebToolsPlanet tool page before publishing.

Your page details

Page title: Free CSS Gradient Generator
Description: Create linear and radial CSS gradients online, preview the result, and copy ready-to-use CSS for websites and UI backgrounds.
Page URL: https://webtoolsplanet.com/css/css-gradient-generator

Generated HTML (paste into <head>)

<!-- SEO -->
<title>Free CSS Gradient Generator</title>
<meta name="description" content="Create linear and radial CSS gradients online, preview the result, and copy ready-to-use CSS for websites and UI backgrounds.">
<link rel="canonical" href="https://webtoolsplanet.com/css/css-gradient-generator">

<!-- Open Graph -->
<meta property="og:title" content="Free CSS Gradient Generator">
<meta property="og:description" content="Create linear and radial CSS gradients online, preview the result, and copy ready-to-use CSS for websites and UI backgrounds.">
<meta property="og:url" content="https://webtoolsplanet.com/css/css-gradient-generator">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free CSS Gradient Generator">

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

Meta Tag Writing Tips

Write title tags that clearly describe the page, keep meta descriptions specific, avoid keyword stuffing, and make sure the page content matches the metadata you generate.

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 a meta tag generator?

A meta tag generator creates HTML metadata for webpages, including title tags, meta descriptions, canonical URLs, Open Graph tags, and Twitter Card tags.

What meta tags should every webpage have?

Most public webpages should have a title tag, meta description, canonical URL, viewport tag, and social preview tags. The exact set depends on the page type and publishing platform.

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 tags still important for SEO?

Yes. Title tags and meta descriptions help search engines and users understand a page. They do not replace strong page content, but clear metadata can improve search snippets and click-through rate.

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.

Can I use this for blog posts and landing pages?

Yes. Use it to draft metadata for blog posts, landing pages, static websites, tool pages, and content pages before adding the tags to your CMS or application code.

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.