Meta Tag Generator
Write the title and description of a page, see how the result looks in Google on desktop and mobile, and copy the finished tags for the head — canonical, robots, hreflang and social tags included.
- Google preview
- Measured in pixels
- Built-in checklist
- Runs in your browser
Title and description
The one address this page should be known by — full, with https://.
Shown above the address in the preview and used for og:site_name.
Google preview
Google cuts titles and descriptions by their width in pixels, not by the number of characters — wide letters such as W and M use up the space faster. The preview measures your text the same way. Google may still rewrite a title or pick another passage of the page as the description.
Checklist
Social sharing
Search engines (robots)
noarchive: no cached copy · nosnippet: no text below the title · noimageindex: pictures of this page stay out of image search · notranslate: no translated version in the results.
Leave a limit empty for the default. -1 means no limit, 0 means none at all. max-image-preview:large is needed for big pictures in Google Discover.
For pages with an end date such as offers and events (unavailable_after).
Language, character set and viewport
A language code such as en, en-US or de-AT. It belongs on the opening tag: <html lang="en-US"> — the code box reminds you.
Language versions (hreflang)
List every language version of this page, this page itself included. Every version must carry the same list. x-default names the version for everyone else.
No language versions yet.
Author, colors, icons and more
Optional, separated by commas. Google has ignored this tag since 2009 and Bing treats a long list as a spam signal — a few words at most, or leave it empty.
Tells the browser which color schemes your page supports.
How much of the address is passed on when a visitor follows a link.
Icons
HTML code
Import from existing HTML
The pasted code is only read as text inside your browser. Scripts in it never run, nothing is loaded from it and nothing is sent anywhere. Importing replaces what is in the form now.
How to generate meta tags
The code and the preview update while you type.
- 1
Write the title and description
Enter the page title, the meta description, the canonical URL and the site name. The preview shows where Google would cut the text on desktop and on phones.
- 2
Add what the page needs
Switch on Open Graph and X card tags, set the robots rules, list the language versions, or open the sections for viewport, theme color and icons.
- 3
Check and copy
Read the checklist, fix what it flags, then copy the code or download it and paste it into the <code><head></code> of your page.
The head of a page, tag by tag
Only tags that browsers and search engines actually read.
Search result preview
Shows the title, address and description as a Google result for desktop and mobile. Text is cut by its width in pixels, the way Google does it, not by a character count.
Checklist with explanations
Flags a missing or overlong title, a description that is too short, a relative or http canonical, tracking parameters in the canonical, a blocked zoom and more.
Robots directives
index or noindex, follow or nofollow, noarchive, nosnippet, noimageindex, notranslate, max-snippet, max-image-preview, max-video-preview and unavailable_after.
hreflang for language versions
List every language version with its address, add x-default and the page itself. The checklist reports invalid codes, duplicates and a missing self-reference.
Social tags in one step
Adds Open Graph tags and the X card type from the same title, description and share image, without repeating what X already reads from Open Graph.
Import existing HTML
Paste the head or the whole source of a page and the form is filled in from its tags. The code is only read as text; scripts in it do not run.
Private by design
Everything runs in your browser. What you type, paste or open is not sent to a server.
Free, no sign-up
No account, no limits, no watermark — on a phone, tablet or computer.
Which meta tags matter, and what they do
Meta tags sit in the <head> of a page and describe it to browsers, search engines and apps. Two of them shape how the page looks in search results: the title tag, which usually becomes the blue headline, and the meta description, which is often used as the text below it. The title is also a ranking signal. The description is not, but a clear one can earn more clicks. Google may rewrite either of them when it thinks another text answers the search better.
Search engines do not count characters. A result has a fixed width, so a title full of wide letters such as W and M is cut earlier than one with many narrow letters. This tool measures your text in pixels: about 580 px for a desktop title, which is roughly 50 to 60 characters, and about 920 px for a desktop description, roughly 150 to 160 characters. Phones show less of the description, so put the most important part in the first sentence.
Common mistakes: the same title on many pages; a title in capital letters only; a description that repeats the title; a noindex left over from a test version, which removes the page from the results; a canonical URL that is relative, uses http or still carries tracking parameters; and a viewport tag that blocks zooming, which is an accessibility problem. The keywords tag is another classic: Google has ignored it since 2009, so a long list brings nothing and shows competitors what you target.
The most important tags in the head
| Tag | What it does | Advice |
|---|---|---|
| <code><title></code> | Headline of the search result and label of the browser tab | Unique per page, important words first, about 50–60 characters |
| <code>meta name="description"</code> | Suggested text below the headline | One or two sentences, about 150–160 characters |
| <code>link rel="canonical"</code> | Names the preferred address of the page | A full https:// address without tracking parameters |
| <code>meta name="robots"</code> | Allows or blocks indexing and snippets | Leave it out unless you need noindex or a limit |
| <code>meta name="viewport"</code> | Makes the layout adapt to phones | <code>width=device-width, initial-scale=1</code>, zoom allowed |
| <code>link rel="alternate" hreflang</code> | Connects the language versions of a page | Same list on every version, with x-default |
Tips
- Need article or product details, several images or a video in the share card? Continue in the Open Graph Generator.
- Design the 1200 × 630 px share image with the OG Image Generator and the icons with the Favicon Generator.
- Clean up the page address before you use it as canonical with the Canonical URL Generator, and add structured data with the Schema Generator.
- Write the title for people first: say what the page offers, put the brand at the end and avoid repeating the same word three times.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
How long should a title tag be?
There is no fixed number of characters. Google cuts titles by width, at about 580 pixels on desktop, which is usually 50 to 60 characters. The preview measures your title in pixels and tells you when the end will be cut off.
How long should a meta description be?
About 150 to 160 characters fit on desktop, and noticeably fewer on phones. Put the main message in the first sentence so it survives on small screens. Very short descriptions are often replaced by a passage of the page.
Do meta tags help SEO?
The title tag is a ranking signal and the description influences how many people click. Robots and canonical tags control which pages are indexed and under which address. The keywords tag has no effect on Google.
Where do I put the meta tags?
Inside the <head> element of the page, before </head>. The character set should be one of the first lines. In a content management system you normally enter title and description in the SEO fields of the page instead.
Why does Google show a different title or description?
Google builds the result for each search. If it finds that a heading or a passage of the page matches the query better, or the title is very long, stuffed with keywords or the same on many pages, it uses its own text.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free SEO and website tools
Generate tags and files, check status codes, redirects, DNS and certificates — free, without an account.