Meta Tag Generator
Build SEO, Open Graph, and Twitter Card meta tags.
Prints the domain in small caps above the title and gives the description the least room of any platform — often a single line.
Essential HTML Meta Tags
Meta tags live in the <head> of your page and tell browsers and search engines about your content. The title and description shape search result snippets; Open Graph tags control how your page renders when shared on Facebook, LinkedIn, and Slack; Twitter Card tags do the same for X (formerly Twitter). The title should be under 60 characters and the description under 160 for optimal SERP display. This generator escapes special characters and outputs valid HTML, entirely in your browser.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing the title, description and viewport tags a page needs.
- Getting a consistent tag set across a template.
- Adding tags to a page that currently has none.
- Producing tags to compare against what a page emits.
- Checking a description's length before publishing.
How it works in practice
A worked example
A page is being given its first proper head block, and the social fields are being left blank because they would only repeat the title and description.
Title: Private Developer Tools — ZeroServer Description: Format, convert and inspect data entirely in your browser. Viewport: on OG image: https://example.com/og.png OG title: (blank) Twitter title: (blank)
<!-- Basic --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Private Developer Tools — ZeroServer</title> <meta name="title" content="Private Developer Tools — ZeroServer"> <meta name="description" content="Format, convert and inspect data entirely in your browser."> <!-- Open Graph --> <meta property="og:title" content="Private Developer Tools — ZeroServer"> <meta property="og:description" content="Format, convert and inspect data entirely in your browser."> <meta property="og:image" content="https://example.com/og.png">
Two things filled themselves in. The Open Graph title and description were left empty and resolved to the page title and meta description, because that is the order platforms themselves resolve in — a page with no og:title shows its title tag, and a page with no twitter:title shows its og:title before falling back further. The section only appears at all because one Open Graph field was filled, so a document does not silently grow a block it never asked for. And charset leads, ahead of the title.
The edge case that catches people
That ordering was wrong until recently and the page said so itself. The generated block used to put charset sixth, after the title, the description, the keywords and the author — while the FAQ two screens down explained that a parser has to know the encoding before it can read anything else. It does not go back and redo a title it has already decoded, so a single accented character in the title was enough for the emitted order to matter. Worth checking on any generator: the advice and the output are written by different hands.
When not to use this tool
A generated block is a starting point and a template is the destination. Every value here except the viewport and the charset should differ per page, so pasting one block across a site produces exactly the duplicate-description problem that having no description at all is only slightly worse than. Put the tags in a layout that takes title and description as parameters, generate the shape once, and use this page afterwards to compare what a route actually renders against what you meant it to.
Frequently Asked Questions
- Which meta tags still matter?
- Title and description for the search snippet, viewport for mobile layout, charset for encoding, canonical for duplicates, and the Open Graph and Twitter sets for sharing. `keywords` has been ignored by every major engine for over a decade.
- How long should the title and description be?
- Around 55–60 characters for the title and 150–160 for the description, though both are measured in pixels rather than characters. Google rewrites both frequently, so clarity matters more than fitting exactly — the length is a guide, not a specification.
- Why must charset come first?
- Because the parser must know the encoding before it can read the rest, and the declaration is inside the document being read. The spec requires it within the first 1024 bytes, and a late declaration means the parser has already guessed — usually wrongly for non-ASCII.
- What does the viewport tag do?
- `width=device-width, initial-scale=1` tells a mobile browser to lay out at the real device width rather than emulating a 980px desktop and zooming out. Without it, responsive media queries never match and the design simply does not apply.
- Do I need a canonical on a page with no duplicates?
- A self-referencing canonical is still worth having. It settles the question when the page is reachable with tracking parameters, with and without a trailing slash, or over both http and https — none of which you created deliberately.
Common errors and gotchas
- Omitting the viewport tag, which makes a responsive layout behave as desktop-only on phones.
- Writing one description for every page, which is worse than having none.
- Using the keywords meta tag, which search engines have ignored for many years.
- Exceeding the useful title length, so the important part is truncated away.
- Leaving a placeholder title in place, which then ships to production.