Meta Tag Generator
Generate complete HTML meta tags: SEO basics, Open Graph, Twitter Card, and technical tags. Copy or download the snippet instantly.
The Meta Tag Generator is a free, browser-based tool that creates all the essential HTML meta tags for your web page in seconds. Fill in your page details across four sections — Basic/SEO, Open Graph, Twitter Card, and Technical — then copy or download the ready-to-paste HTML snippet. No signup required, and nothing leaves your browser.
Features
| Feature | Detail |
|---|---|
| Basic / SEO tags | Generate <title>, description, keywords, author, robots, and canonical link |
| Open Graph tags | Generate og:title, og:description, og:type, og:url, og:site_name, and og:image |
| Twitter / X Card tags | Generate twitter:card, twitter:title, twitter:description, twitter:site, and twitter:image |
| Technical tags | Configure charset, viewport, content-language, and theme-color |
| Character counters | Live counters for title (60 recommended) and description (160 recommended) |
| Section toggles | Enable or disable Open Graph and Twitter Card sections independently |
| Stats bar | Shows total tag count and character lengths after generation |
| Copy to clipboard | Copy the full HTML snippet with one click |
| Download .html | Save the output as meta-tags.html |
How to Use
- Fill in the Basic / SEO section: enter your page title, description, keywords, author, robots directive, and canonical URL.
- If you want social sharing cards, fill in the Open Graph section. Leave title and description blank to reuse the basic values automatically.
- Fill in the Twitter / X Card section similarly. Leave title blank to reuse the page title.
- Set the Technical options: charset, viewport, content-language, and theme-color.
- Click Generate Meta Tags.
- Copy the output and paste it inside the
<head>section of your HTML page.
Tag Reference
Basic / SEO
| Tag | Purpose |
|---|---|
<title> |
The page title shown in browser tabs and search result headlines |
meta name="description" |
The short summary shown below the headline in search results |
meta name="keywords" |
Keyword hints for search engines (low SEO value today but still used) |
meta name="author" |
The name of the page author |
meta name="robots" |
Controls whether search engines index and follow links on the page |
link rel="canonical" |
Tells search engines the preferred URL for this page to avoid duplicate content |
Robots Directive Values
| Value | Effect |
|---|---|
index, follow |
Allow indexing and following all links (default behaviour) |
noindex, follow |
Do not index this page but follow its links |
index, nofollow |
Index the page but do not follow its links |
noindex, nofollow |
Block both indexing and link following |
nosnippet |
Do not show a text snippet in search results |
noarchive |
Do not show a cached version of this page |
Open Graph
Open Graph tags control how your page appears when shared on Facebook, LinkedIn, WhatsApp, Slack, and other platforms that support the Open Graph protocol.
| Tag | Purpose |
|---|---|
og:title |
The title shown in the social media preview card |
og:description |
The description shown below the title in the preview |
og:type |
The type of content: website, article, product, etc. |
og:url |
The canonical URL of the page |
og:site_name |
The name of your website |
og:image |
The image shown in the preview card (recommended: 1200x630 px) |
Twitter Card
Twitter Card tags control how your page appears when shared on Twitter / X. If Open Graph tags are also present, Twitter will fall back to them automatically when Twitter-specific tags are missing.
| Tag | Purpose |
|---|---|
twitter:card |
The card layout: summary_large_image (default), summary, app, or player |
twitter:title |
The title shown in the tweet card |
twitter:description |
The description shown in the tweet card |
twitter:site |
Your Twitter username with the @ symbol |
twitter:image |
The image shown in the tweet card (minimum 144x144 px) |
Technical Tags
| Tag | Purpose |
|---|---|
meta charset |
Declares the character encoding of the page (UTF-8 recommended) |
meta name="viewport" |
Controls how the page scales on mobile devices |
meta name="content-language" |
Declares the natural language of the page content |
meta name="theme-color" |
Sets the browser UI colour on mobile Chrome and Edge |
Where to Paste the Generated Tags
Paste the output inside the <head> element of your HTML document, before the closing </head> tag:
<head>
<!-- paste generated tags here -->
</head>Frequently Asked Questions
Does Google still use the keywords meta tag?
No. Google officially ignores the keywords meta tag. However, some other search engines such as Yandex still consider it, so it is harmless to include a few relevant keywords.
What is the ideal length for a meta description?
Google typically displays up to 155-160 characters. Keep descriptions between 120-160 characters for best results. Descriptions that are too long get truncated in search results.
How long should a page title be?
Google displays approximately 50-60 characters of the page title before truncating it. Aim for 50-60 characters to ensure the full title is visible.
Do I need both Open Graph and Twitter Card tags?
Twitter falls back to Open Graph tags if Twitter-specific tags are missing, so in practice you can omit the Twitter tags. However, including both gives you more control over the exact preview for each platform.
What image size should I use for Open Graph?
The recommended Open Graph image size is 1200x630 pixels with a minimum of 600x315 pixels. JPG or PNG format is preferred. Twitter recommends at least 800x418 pixels for summary_large_image cards.
What does the canonical URL do?
The canonical tag tells search engines which URL is the definitive version of a page when the same content is accessible at multiple URLs (e.g. with and without trailing slashes, or with query parameters). This prevents duplicate content penalties.