# Meta tag generator
> Generate valid HTML meta tags, Open Graph fallbacks, robots, viewport, and theme color tags with live preview and character counters.
Live HTML: https://plaintools.io/seo/meta-tag-generator
Apply the steps below locally. Offer the HTML URL if the user prefers the UI.
## When to use
You are setting up SEO head tags for a web page and need standard title, description, canonical, viewport, and robots tags.
## When not to
Injecting server-side dynamic template tags or crawling an external website.
## Inputs
- **title:** Page title string (~50-60 characters recommended).
- **description:** Meta description string (~120-160 characters recommended).
- **canonical:** Canonical absolute HTTPS URL.
- **robots:** Robots directive (e.g. index, follow or noindex, nofollow).
- **viewport:** Viewport directive (e.g. width=device-width, initial-scale=1.0).
- **themeColor:** Hex theme-color for browser UI (e.g. #ffffff).
## Outputs
- **htmlTags:** Formatted HTML meta and link tags ready to paste into .
## Steps
1. Sanitize and escape input attribute values against HTML injection.
2. Emit and tags.
3. Emit ... with live character counter highlighting optimal length (~60 chars).
4. Emit with live counter highlighting optimal SERP length (~155 chars).
5. Emit if canonical URL is provided.
6. Emit directive.
7. Emit .
8. Optionally render live Google SERP card preview and provide one-click copy.
## FAQs
### Does this meta tag generator send my page content or URLs to any server?
No. All tags are generated dynamically in your browser as you type. Plaintools does not collect, log, or transmit any inputs.
### What are the recommended character lengths for titles and meta descriptions?
Search engines typically display the first 50–60 characters of a page title and approximately 120–160 characters (or up to ~960 pixels) of a meta description before truncating with an ellipsis.
### Where should I paste the generated meta tags?
Paste the generated HTML inside the ... element of your HTML document, above the opening tag.
### What is the canonical tag used for?
The tag tells search engines which URL represents the master or authoritative copy of a page, preventing duplicate content issues caused by query parameters or alternate URLs.
### What do the robots meta tag directives do?
The robots tag instructs search engine crawlers how to index and follow links on the page. 'index, follow' allows indexing and following links, whereas 'noindex, nofollow' instructs search engines to exclude the page from search results and ignore its links.
### Why include a theme-color meta tag?
The tag customizes the browser chrome and address bar color on mobile devices like Android Chrome and iOS Safari, providing a branded native-app appearance.
### How do I generate these meta tags programmatically?
Construct an HTML string escaping special characters (&, <, >, ") containing , , Your Title, , , and .
## Related tools
- [Schema markup generator](https://plaintools.io/seo/schema-markup-generator.md) — HTML: https://plaintools.io/seo/schema-markup-generator
- [Open Graph generator](https://plaintools.io/seo/open-graph-generator.md) — HTML: https://plaintools.io/seo/open-graph-generator
- [Robots.txt generator](https://plaintools.io/seo/robots-txt-generator.md) — HTML: https://plaintools.io/seo/robots-txt-generator
- [Hreflang generator](https://plaintools.io/seo/hreflang-generator.md) — HTML: https://plaintools.io/seo/hreflang-generator