Title Tag Workshop

Most advice about page titles begins with a number of characters. The number is usually somewhere near sixty, it is usually given without a source, and it answers a question nobody has asked. A title is not shown by the character. It is drawn, in a font, in a strip of screen that has a width, and what does not fit in the strip is cut off. The useful questions are how wide the words are and what they say when the end goes missing.

What the element is for

The HTML Standard gives the title element a short definition. It represents the document’s title or name, and authors should use titles that identify their documents even when they are used out of context. The standard then lists the contexts it has in mind: a user’s history or bookmarks, or search results. That is the whole brief. A title is the label that has to work when the page itself is not there to explain it.

The same passage adds a remark that settles a common worry. The document’s title is often different from its first heading, the standard says, because the first heading does not have to stand alone when taken out of context. A heading sits above its own article and can afford to be short. The title travels. So a title that repeats the heading is not an error, and a title that says more than the heading is not one either.

There are two hard rules. A document may hold no more than one title element, and its content is text that is not just white space. Everything else is judgment. When a script asks a browser for the title, the standard has the browser strip and collapse the white space first, so a run of spaces or a line break in the source reads as one space.

The accessibility guidelines treat the same element as a navigation aid. Success Criterion 2.4.2 asks that web pages have titles that describe topic or purpose. Its explanation says titles identify the current location without requiring users to read or interpret page content, and that a browser may display the title in the window title bar or as the name of the tab. The matching technique gives a three-step test: the page has a title, the title is relevant to the content, and the page can be identified using it.

Why length is a width

The search documentation that Google publishes for site owners is unusually direct on length. While there is no limit on how long a title element can be, it says, the title link is truncated in search results as needed, typically to fit the device width. No pixel figure appears on that page, and no character count. The page for descriptions uses the same sentence shape: no limit, truncated as needed, typically to fit the device width.

That wording matters because width and character count come apart quickly. In most fonts a capital W takes several times the room of a lower-case i. A title of sixty narrow letters can fit where forty wide ones do not. Scripts differ more: a line of Chinese or Japanese carries fewer, wider characters. Any rule stated in characters is a rule about one alphabet in one typeface.

The stylesheet rule that most interfaces use for this cut is described in the CSS overflow specification. Its ellipsis value renders an ellipsis character to represent clipped inline content. The reader sees the start of the line, then three dots in one character, then nothing. Whatever was at the end of a long title is the part that disappears.

A browser can be asked how wide a string is. The canvas text interface in the HTML Standard returns, for a string and a font, the width of its inline box in CSS pixels, which the standard glosses as the text’s advance width. That is a measurement and not an estimate, but it is a measurement on one device. The font named first in a list may be missing on another machine, and the next one in the list has different widths. Two visitors can measure the same title and get different numbers, and both are right.

So a pixel figure is best treated as a ruler you choose. Six hundred pixels at a text size of twenty is a common working figure for a wide screen; it is not a published limit of any service, and this page does not present it as one. Set a width that matches what you design for, then compare your own titles against each other with the same ruler.

A worked example

Take the title “Fern Care Tips - Watering, Light and Repotting for Indoor Ferns - Greenhouse Notes”. It has 82 characters and twelve words, the two hyphens not counting as words. Because every character is plain ASCII, it is also 82 bytes in UTF-8, the encoding whose rules give one byte to each of those characters.

On the machine where this was written, in a common sans-serif at twenty pixels, the browser measured that title at a little under 750 pixels. Against a width of six hundred, 66 of the 82 characters stayed and the site name was the part cut. Your device will report slightly different widths. The count of characters and bytes will be the same everywhere.

Now change the shape instead of trimming letters. Put the question first: “How Often Should You Water a Fern? - Greenhouse Notes” measured about 520 pixels on the same machine and fit whole. Nothing was shortened. The words were arranged so that the specific part comes first and the site name comes last, where losing it costs least.

Characters are not always what they seem. A family emoji made of three people is one character to a reader and one unit that must be kept or dropped whole, yet it is five code points joined together and 18 bytes of UTF-8, since the encoding spends up to 4 bytes on a single code point. A cut that counts code points can slice such a character in half and leave a stray figure or a broken box. Browsers expose a segmenter that splits text into graphemes, the units a reader perceives, and a careful cut uses those.

What a search engine says it does

A title is a request, not an order. The same documentation says the generation of title links is completely automated and takes into account both the content of a page and references to it that appear on the web. It lists the sources it draws on, and the title element is only the first: the main visual title, heading elements, text made prominent by styling, anchor text and text in links that point to the page all appear on the list.

The page also names the situations in which a different link is likely to be shown. A half-empty title, where a separator and a site name are all that is left, is one. A title that no longer matches a dated page is another. Titles repeated across many pages are a third, and the documentation says plainly that distinct text for each page is important. It advises against keyword stuffing in the same breath: there is no reason, it says, to have the same words or phrases appear multiple times.

On site names the advice is practical. Put the name at the beginning or the end of each title, separated from the rest with a delimiter such as a hyphen, colon, or pipe. That is structure, not vocabulary.

Lists of persuasive words circulate widely, under names like power words and emotional triggers. None of the documents read for this page supports one, and no evidence base that could be cited here was found, so the tool on this page offers none. It offers shapes: topic first, site name first, a question, a count, a lead-in, a place. Each only rearranges words you supply.

Writing for the person who sees only the title

The honest limit of all this is that measurement tells you what fits, not what works. Nothing here can predict whether a title will be shown as written, where a page will appear, or whether anyone will choose it. Those depend on systems and people that no bench can observe.

What a bench can do is narrow the craft to things you control. Say what the page is in its first words. Keep the part that distinguishes this page from its neighbours ahead of the part they share. Check a whole site’s titles together, because duplicates and near-empty titles are invisible one page at a time.

A pasted list brings its own small hazards. Comma-separated files have a written format in which a field holding a comma or a quote must be quoted and a quote inside it doubled, and a strict reader refuses a file that breaks it instead of guessing. A cell that begins with an equals sign can be run as a formula by a spreadsheet, so an export meant for one should defuse such cells.

Then write the title for a stranger. They will see it in a row of tabs, in a history list, or between two other results, with the page nowhere in sight. That is the situation the standard describes.