SEO Meta Tag Generator - Title and Description Width Check

How long is a title, if the answer is not a number of characters?

Two titles, both exactly 54 characters. Fitting Slim Lift Kits in Little City Utility Vehicles uses 74 percent of the room a search result gives a title. Best Wide Wooden Worktops for Modern Kitchens Reviewed uses 94 percent. Same count, twenty points apart, because a search result is measured in width and a character counter is measured in characters. That gap is where titles get cut in half by something nobody checked.

This generator writes the tags and measures them three ways at once: characters, UTF-8 bytes and width. It draws the search result as it would appear, cutting the text where the width actually runs out, and it produces the block of markup ready to paste into the head of your page, with everything you typed escaped so a stray quotation mark cannot end an attribute early and take every tag after it down with it.

3.56x

how much wider a W is than an i

29.6 to 105.3

width of sixty characters, depending which ones

57 and 141

width budget for title and description

10 to 17

tags produced, from the two required fields to a full form

What the two required fields are actually for

The title element is the strongest single piece of text on the page for search, and it is also the blue line people decide on. Those two jobs pull in opposite directions. Search rewards the phrase somebody typed appearing early; a human reading a list of ten results rewards a title that reads like a sentence rather than a keyword shopping list. The workable compromise is almost always the same: the phrase first, the brand last, and the brand dropped entirely once the budget gets tight, because the reader can see your address underneath it anyway.

The description is different in kind. It is not a ranking factor, and search engines rewrite it whenever they think a different sentence from your page answers the query better, which happens often. That makes it easy to dismiss, and dismissing it is a mistake, because when it survives it is the only sales copy you control in the entire result. Write it as the answer to the query, put the promise in the first sentence, and treat everything after the first clause as material that may or may not survive.

Everything else on this form exists to stop something specific going wrong. A canonical address tells search which of several addresses for the same page is the real one, and its absence is what quietly splits one page's signals across three URLs that differ only by a tracking parameter. An image address turns a shared link from a line of text into a card. A robots value is how you keep a thank-you page out of results without deleting it.

Every tag this produces, and who reads it

Tag	Read by	What breaks without it
`meta charset`	the browser, first	accented characters render as rubbish until the browser guesses again
`title`	search, the browser tab, bookmarks	search invents one from your headings
`meta description`	search results	a sentence is lifted from the page, sometimes mid-thought
`link canonical`	search	one page competes with its own copies
`meta robots`	search	nothing, until you needed a page kept out and it was not
`og:title`, `og:description`	social and chat previews	the platform falls back to the page title, or to nothing
`og:image`	social and chat previews	a text-only card that nobody notices in a feed
`og:url`	social platforms	shares of the same page under different addresses count separately
`twitter:card`	one platform, and a few that copy it	a small card where you wanted a large one
`meta viewport`	mobile browsers	the page is rendered at desktop width and zoomed out

The charset line comes out first on purpose. The specification wants it inside the first 1024 bytes of the head, and a generator that emits it fifth, after a long title and a long description, can push it past that line on a page in a language that needs it most.

The order to fill this in

Page title. The phrase somebody would type, first; the brand last or not at all. Watch the width bar rather than the character count.
Meta description. The answer, not a summary of the page. First sentence carries the promise, because the rest may be cut or replaced.
Canonical address. The one address this page should be known by, absolute and with the scheme. It also fills in og:url and the breadcrumb in the preview.
Preview image. Absolute address again, because the social platform fetches it from its own servers where a relative path resolves to nothing.
Site name, author, indexing, card type. Optional refinements. Leave indexing alone unless you specifically want the page kept out of results.
Read the three panels. The preview shows where the cut falls, the table shows how close each field is to its budget, and the notes list what is missing or contradictory.

Five things the character count hides

Letters are not the same width, and the spread is enormous. A W is 3.56 times as wide as an i. Sixty narrow characters measure 29.6 width units and sixty wide ones measure 105.3, against a title budget of 57. One of those fits twice over, the other is cut before it is halfway through.

Capital letters cost more than you think. Title Case is not free. Setting a title in capitals throughout is the single fastest way to lose a third of the visible text without changing a word.

A character is not a byte. An accented letter takes two bytes in UTF-8, a Chinese character three, an emoji four. A tool that reports bytes will disagree with a tool that reports characters, and both of them will disagree with the one that measures width. All three numbers appear in the table above, so there is nothing left to argue about.

The budget is a shape, not a promise. Rendering differs between phones and desktops, results get extra lines for dates and ratings, and a description is sometimes replaced wholesale with a sentence from your page. The budget tells you when you are safely inside and when you are gambling. It cannot tell you the exact character the cut lands on.

Being far under budget is its own problem. A title at 40 percent of the budget is not efficient, it is an empty seat. The unused room is space a competitor is filling with a second phrase people search for.

Title	Characters	Width units	Of budget
Minimalist Italic Lists in Slim Trim Sites	42	34.6	61%
Fitting Slim Lift Kits in Little City Utility Vehicles	54	42.3	74%
Willow Wallpaper Warehouse: Modern Murals Made Well	51	50.0	88%
Best Wide Wooden Worktops for Modern Kitchens Reviewed	54	53.4	94%
Sixty capital M characters	60	91.9	161%

Rows two and four are the pair worth remembering. Identical character counts, twenty points of budget apart, and only one of them has room left for a brand name at the end.

Where a stray quotation mark takes down a whole head

Every value you type ends up inside an attribute, between two quotation marks. A title containing a quotation mark of its own closes that attribute early, and from that point the browser is reading your text as if it were markup. In the mild case the description is truncated at the apostrophe. In the less mild case an angle bracket in your text opens a tag that never closes, and everything after it in the head disappears.

Five characters cause it: the ampersand, both angle brackets, the double quotation mark and the apostrophe. All five are escaped here before the value is written, so Say "hello" & goodbye comes back out of the markup as exactly that string, and a pasted </title> stays a piece of text rather than becoming an instruction. It is worth checking, because it is the kind of failure that only appears with a certain product name and then looks like a mystery.

Questions that come up before a page ships

Do meta keywords still do anything?

No, and they have not for a long time. No major search engine uses them, and a keyword list sitting in your head is a tidy summary of your strategy for anyone who opens the page source. That is why this generator does not produce the tag at all.

If search rewrites my description anyway, why write one?

Because it is rewritten on some queries and used on others, and you do not get to choose which. When it is used, it is the only text in the result you wrote. When it is replaced, nothing is lost. The expected value of writing one is straightforwardly positive, which is rare enough to be worth noticing.

Why measure in width units instead of pixels?

Because a pixel figure would be false precision. The rendered width depends on the font the device has, the size it renders at and the screen it renders on, none of which are knowable from here. The width unit is the average lowercase letter, taken from the advance widths of a real sans-serif face, and the budgets are calibrated so that 60 characters of ordinary title text sit at 100 percent. It answers the question that matters, which is whether your letters are wider or narrower than ordinary, and it does not pretend to answer the one that cannot be answered.

Should the brand name go in every title?

On the home page and on anything where the brand is the thing being searched for, yes. On a deep page competing for a phrase, it is 10 to 15 width units spent on a word already visible in the address underneath. Put it last if you keep it, so the part that carries meaning survives the cut.

Where exactly does this markup go?

Inside the head element, before the closing tag, with the charset line kept first. If your page already has a title element or a description, delete the old ones rather than adding a second: two title elements are not an error the browser reports, it simply uses one of them and you find out which by accident.

Do I need both Open Graph and the other card tags?

Open Graph is the one nearly everything reads, including chat applications that show a preview when a link is pasted. The card tags are read by one platform and by a handful that copy its behavior, and they are three extra lines, so the usual answer is to keep both. Switch the card off if you genuinely do not want a preview there.

Why does the block need clicking before it copies?

The tags are shown as text rather than executed, which is the whole point of a generator that produces markup: a browser handed real tags would act on them and display nothing. Clicking the block selects all of it in one go, and the copy carries the real characters, not the escaped ones you see.

Does anything I type leave this page?

No. The measuring, the escaping and the preview all happen in code running on this page. That matters more than it sounds, because a page being prepared usually names a product, a price or a launch date before any of it is public.

Related tools

UTM Link Generator

Campaign parameters for the links pointing at this page, with the channel group named before you publish - Open the tool

UUID Generator

Identifiers in versions 1, 4 and 7, with a validator that reads the version back out of one you already have - Open the tool

QR Code Generator

Turns the canonical address into a printable vector symbol, encoded in your browser - Open the tool

Business Name Generator

The brand that goes in og:site_name and at the end of the title, before you commit to either - Open the tool

Lorem Ipsum Generator

Placeholder copy for the page while the real text is still being written - Open the tool

Barcode Generator

EAN-13, EAN-8 and UPC-A symbols, useful when the page being described is a product listing - Open the tool