Create essential HTML meta tags for your pages in seconds, then download the generated METATAG output for easy copy and use.
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-language" content="en"> <meta name="robots" content="index, follow">
<title> tag — keep it 50–60 characters so Google's roughly 600 px desktop SERP slot doesn't truncate it with an ellipsis), Description (150–160 characters; Google measures the snippet in pixels, around 920 px, which usually maps to ~155 characters), and the Canonical URL for the page.twitter:site so cards credit your account), and a Theme Color in hex (drives the Android Chrome address-bar tint and the PWA splash/title-bar color).index,follow, noindex, nofollow, noarchive, max-snippet:155), add hreflang entries for international variants, paste a JSON-LD block (Article, Product, FAQPage, BreadcrumbList), or override the auto-included charset=UTF-8 and viewport=width=device-width, initial-scale=1 defaults.<head> block. Hit Copy and drop it into your template. Everything renders client-side — no upload, no account, no rate cap.A modern page's <head> carries 15–25 tags across at least four namespaces — core HTML (title, meta description, charset, viewport), Google/SEO (canonical, robots, hreflang), Open Graph (og:title, og:description, og:image, og:type, og:url), and Twitter Cards (twitter:card, twitter:site, twitter:image). Forgetting one breaks the rich preview on a single platform; mistyping one (e.g. og:imgae) silently fails with no warning. A generator gives you a known-good block every time, with the right namespace prefixes, the right quoting, and the right defaults.
title, description, canonical, robots, viewport, and charset before publishing so Google indexes the right URL with the right snippet on first crawl.og:image shows a placeholder; missing og:title shows the raw URL.theme-color, viewport, and a manifest reference are the minimum for an installable web app and an address-bar tint on Android Chrome.hreflang annotations plus a self-referencing canonical tell Google which language/region version to show in each market without triggering duplicate-content penalties.<Head>, Astro layout, Hugo partial, or WordPress header.php once, then template-fill the variables.Pair this with the HTML Minifier before shipping production HTML, JSON Formatter for validating JSON-LD blocks, or Image Resizer to crop OG images to the 1200×630 sweet spot.
| Tag | Required? | Why it matters |
|---|---|---|
<meta charset="UTF-8"> |
Required | First tag in <head>; without it browsers may guess Latin-1 and mangle non-ASCII characters |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Required | Mobile-friendliness signal; without it Chrome/Safari render at desktop 980 px width on phones |
<title> |
Required | Single biggest on-page SEO signal and the blue link in every SERP |
<meta name="description"> |
Recommended | Drives SERP snippet click-through; Google rewrites it often, but a good one still wins ~30% of the time |
<link rel="canonical"> |
Recommended | Consolidates duplicate URLs (UTM-tagged, sorted, paginated) so ranking signals don't split |
<meta name="robots"> |
Optional | Use to noindex thin pages, control snippets (max-snippet:155), or block image previews (noimageindex) |
<meta property="og:title"> / og:description / og:image / og:url / og:type |
Recommended | Open Graph powers cards on Facebook, LinkedIn, Slack, Discord, iMessage, Telegram |
<meta name="twitter:card"> |
Recommended | Tells X whether to show summary (small square thumb) or summary_large_image (full-width hero) |
<meta name="twitter:site"> |
Optional | Your @handle — credits your account when the card is shared |
<meta name="theme-color"> |
Optional | Tints the Android Chrome address bar and PWA UI; supports media="(prefers-color-scheme: dark)" variants |
<link rel="alternate" hreflang="..."> |
Conditional | Required if you have language/region variants; otherwise omit |
Google measures both in pixels, not characters — the truncation point depends on which letters you use (a row of ms eats space faster than a row of is). The character counts below are safe averages for mixed-case English.
| Element | Desktop limit | Mobile limit | Practical character target |
|---|---|---|---|
<title> |
~78 chars before truncation | 50–60 chars; front-load the primary keyword | |
<meta name="description"> |
150–160 chars; put the value prop in the first 100 | ||
og:title |
60 chars (Facebook); 70 (LinkedIn) | Same | ≤60 chars to avoid line-wrap |
og:description |
200 chars (Facebook truncates ~155 in feed) | Same | 150–200 chars |
og:image |
1200×630 (1.91:1) recommended | Same | <8 MB, JPG/PNG/WebP, absolute URL |
twitter:card |
summary, summary_large_image, player, app |
Same | summary_large_image for blog/article links |
Going long isn't penalized — Google just truncates with an ellipsis, which costs you clicks. The pixel measurement also means CJK characters (which are wider) hit the cap at fewer characters than Latin text.
Google's SERP allocates roughly 600 pixels of horizontal space to the desktop blue link (mobile fits ~78 characters). Past that point the title is cut with an ellipsis ("…") or, increasingly often, rewritten entirely from H1, anchor text, or page content. The 50–60 character target keeps the full title visible on both desktop and mobile while giving Google a clear, on-topic string to use verbatim.
Yes. Google's own documentation confirms it "sometimes uses the meta description … if it might give users a more accurate description." External SERP studies put the rewrite rate around 60–70%, but the remaining 30%+ of impressions where your description does appear are exactly the impressions you control. A good description also gives Google a strong starting candidate when the query closely matches your meta — write one, keep it under 160 characters, and front-load the value.
rel="canonical" and what does it actually do?Use rel="canonical" whenever the same content is reachable at more than one URL — sorted/filtered variants (?sort=price), tracking-tagged links (?utm_source=newsletter), trailing-slash variants, HTTP/HTTPS pairs, or syndicated copies on another domain. Google treats it as a strong hint (not a directive — redirects are stronger), and it consolidates ranking signals into the chosen URL. Self-referencing canonicals on every page are a safe baseline.
hreflang and canonical different?Canonical tells Google "this is the URL to index for this content." hreflang tells Google "show this version to users in this language or region." You use them together on international sites: every localized page gets a self-referencing canonical and a full hreflang set listing every language variant (including itself, with an x-default for the fallback). Pointing the canonical to the English page on your Spanish page is the most common hreflang bug — it tells Google to ignore the Spanish version entirely.
viewport and why is width=device-width, initial-scale=1 the default?width=device-width tells the browser to treat the layout viewport as the device's CSS-pixel width (so a 390 px iPhone gets a 390 px viewport, not a zoomed-out 980 px desktop default). initial-scale=1 sets the starting zoom to 1:1 so users don't land on a tiny pinch-zoomed page. Without this tag, mobile browsers fall back to "desktop mode" and Google's Mobile-Friendly Test fails the page. Avoid user-scalable=no and maximum-scale=1 — both block pinch-zoom and hurt accessibility.
robots combinations are useful and which are redundant?index,follow is the default — no need to declare it. Useful combos: noindex,follow (don't index this page but follow its links — good for tag/archive pages), noindex,nofollow (don't index and don't pass PageRank — good for staging or thank-you pages), noarchive (suppress the cached copy link), nosnippet (no description snippet in SERPs), max-snippet:155 / max-image-preview:large (fine-grained snippet control). nofollow,index is rarely useful — if a page is worth indexing, its outbound links usually are too.
twitter: namespace?Yes — X (formerly Twitter) falls back to Open Graph for og:title, og:description, and og:image when the corresponding twitter:* tag is missing. The two tags you genuinely need in the twitter: namespace are twitter:card (pick summary_large_image for most articles) and twitter:site (your @handle for attribution). That keeps your card markup minimal without breaking the X preview.
theme-color do and where is it actually visible?theme-color tints the Android Chrome address bar to match your brand color and is used by installable PWAs for the title bar, splash screen, and recent-apps card. Desktop Chrome and Firefox currently ignore it on regular pages. Safari uses it inside Home-Screen PWAs and (on iOS 15+) inside Safari's tab/toolbar background when set. Use a media="(prefers-color-scheme: dark)" variant to ship a dark-mode tint alongside the default.
Yes — the page still indexes; only the structured data is dropped. Google logs the JSON parse error in Search Console's "Enhancements" report but treats the rest of the page normally. Validate every JSON-LD block in Google's Rich Results Test before shipping, and run it through the JSON Formatter first to catch trailing commas and unescaped quotes that break parsing.
No. The generator runs entirely in your browser — your title, description, URLs, and any JSON-LD never leave the page. No account, no log, no watermark on the output.