Meta Tag Generator — Create SEO Meta Tags Online
Generate HTML meta tags for your website's head section. Optimize title, description, keywords, robots directives, viewport settings, and theme color for better search engine indexing and social sharing. 100% client-side — your data stays private.
What is a meta tag? A meta tag is an HTML element inside <head> that describes a page to browsers and crawlers rather than to readers. Each one is a name and a content pair, such as <meta name="description" content="…">. Meta tags render nothing on the page; they control how it is summarised in search results, how it scales on a phone, and whether it may be indexed at all.
How to Use the Meta Tag Generator
- Write the page title — Aim for roughly 50 to 60 characters and put the distinctive words first. Search engines truncate by pixel width rather than character count, so a title full of capitals or wide letters is cut sooner than the counter suggests.
- Write the meta description — Around 150 to 160 characters. It is not a ranking signal, but it is the sales line under your link, so make it specific to this page and include the phrase a searcher would type. The counter turns red past 160.
- Fill in keywords and author only if you need them — Google has said since 2009 that it ignores the keywords meta tag, so treat it as optional metadata for internal search or a CMS rather than as SEO. The author field is likewise informational.
-
Choose the robots directive —
index, followis the normal setting and matches the default behaviour. Usenoindexfor thin, duplicate or staging pages, and remember it only works if crawlers are allowed to fetch the page and read the tag. -
Set the viewport and theme colour —
width=device-width, initial-scale=1.0is the correct value for virtually every responsive site; without it a phone renders the page at about 980 pixels wide and shrinks it. Theme colour tints the browser UI on supporting mobile browsers. -
Generate, check the preview, then paste into your head — The preview approximates how the title and description read as a search snippet. Copy the block and paste it inside
<head>, replacing any existing title or description rather than adding a second one.
What Each Tag Actually Does
"Meta tags" is a loose label for several unrelated jobs that happen to share a syntax. Two of the tags this generator writes influence how your page is summarised, one controls whether it may be listed at all, one governs mobile layout, and one is pure decoration. Knowing which is which stops you from over-tuning the ones that barely matter.
| Tag | What it controls | Practical guidance |
|---|---|---|
<title> |
The clickable headline in search results and the browser tab label | Strictly an element, not a meta tag, and the most consequential single line in the head. Roughly 50–60 characters; unique on every page |
description |
The snippet text beneath the headline | Not a ranking factor, but it decides how many people click. Around 150–160 characters, written for this page specifically |
keywords |
Nothing, for Google | Publicly ignored since 2009 after years of stuffing abuse. Harmless to include, pointless to optimise |
author |
Informational attribution | Read by some CMSes and feed readers; search engines use structured data instead for authorship |
robots |
Whether this page may be indexed and its links followed | The one tag that can remove a page from search entirely. Check it before deploying — a stray noindex from a staging template is a classic outage |
viewport |
How a mobile browser sizes the layout viewport | Required for responsive design. Omit it and a phone assumes a desktop-width page and zooms out |
theme-color |
Tint applied to browser UI | Honoured by Chrome on Android and by recent Safari versions; ignored elsewhere. Cosmetic, with no SEO effect |
Why Your Characters Do Not Always Fit
The familiar "60 characters for a title, 155 for a description" figures are rules of thumb, not limits enforced by anything. Google composes result snippets to a pixel width — on a desktop result that is roughly 600 pixels — so a title of narrow letters survives longer than one of the same length in capitals or wide characters. Treat the counters in this tool as a guide, front-load the words that matter, and make sure the phrase you care about appears before the point where truncation is likely.
It is also worth knowing that supplying a title and description does not guarantee they are what appears. Search engines frequently rewrite both when they judge that page content, an on-page heading or the wording of the query makes a better snippet. That is normal and not a sign of a broken tag. Your job is to give a clear, accurate, page-specific starting point rather than to control the output exactly.
How the Generated HTML Is Built
Everything you type is HTML-escaped before it is written into an attribute: ampersands, angle brackets and double
quotes become entities. That matters because an unescaped straight quote inside a content attribute closes
it early and silently truncates the description, which is one of the more common ways a hand-written meta tag goes
wrong. Order the block with <meta charset> first in your own head, then the viewport, then the title
and description — the charset declaration must appear within the first 1024 bytes of the document.
Nothing you type is uploaded; the tags are assembled in the page. The generator also stores the fields in the address bar so a set of tags can be bookmarked or shared with a colleague for review.
Frequently Asked Questions
Meta tags are HTML elements placed in the <head> of your page that provide information to search engines and browsers. They are not visible on the page itself but are read by crawlers and used to determine how your page appears in search results.
Keep meta descriptions between 150-160 characters. Google typically truncates descriptions longer than 155-160 characters in search results. A well-written description that accurately summarizes your page can significantly improve click-through rates.
No. Google stated publicly in 2009 that it does not use the keywords meta tag for ranking, because it had been abused for stuffing for years. Including it does no harm and can be useful to an internal site search, but no amount of tuning there affects a search engine. Spend the effort on the title, the description and the page content itself.
No. The tags are assembled by JavaScript in your tab and copied straight to your clipboard. The fields are also stored in the page URL so a set of tags can be bookmarked or handed to a colleague for review, which means the link carries whatever you typed — clear the form first if a title or description is not yet public.
Only indirectly, with one exception. The title element is a genuine on-page signal and worth writing carefully. The description is not a ranking factor, but it drives click-through, which is why it still matters commercially. The robots tag has the largest effect of all, though in the negative direction: it can remove the page from results completely. Keywords, author and theme-color have no ranking effect.
They work at different stages and combining them backfires. A noindex meta tag tells a crawler that has already fetched and read the page not to list it. A Disallow rule in robots.txt stops the fetch happening at all — so the crawler never sees the tag, and the URL can still appear in results as a bare link discovered elsewhere. To remove a page from search, allow crawling and serve noindex.
Yes, if links to your pages are shared on social platforms or in chat apps. Those clients read the Open Graph and Twitter Card tags rather than the standard description, and without them a shared link falls back to whatever the platform can scrape — often no image and a truncated line of body text. Build them with the Open Graph Generator and put both sets in the same head.
Search results reflect the last crawl, so a change can take days or weeks to appear, and a low-traffic page is revisited less often. Before assuming a delay, check three things: that the tag is inside <head> rather than the body, that the page has only one description tag, and that the URL is not being canonicalised to another page whose description is what you are actually seeing.
Use Cases
Rewriting a Weak Search Snippet
A page ranks but nobody clicks. Draft a sharper title and description here, check them against the preview, and ship the pair together rather than tweaking the title alone.
Mobile Responsiveness
Set proper viewport meta tags to ensure your website displays correctly on all screen sizes and devices.
Keeping Staging Out of Search
Generate a noindex, nofollow block for a preview or client-review environment so a half-finished site never competes with the production one in search results.
Browser Theme Color
Add theme-color meta tags for a branded experience in mobile browser address bars and Chrome's new tab page.