Writing usable titles for web pages

Summary

To write usable page titles, we need to consider the ways in which titles are used. This article discusses some common mistakes and provides a list of guidelines for writing better page titles.

What is a page title?

In this article, "page title" means the content of the HTML <title> element. This is the information that you can see in your browser's title bar when viewing a web page (as shown in the image below where the page title is circled in red), or in the <head> section when looking at the markup of a web page, as shown in this markup example:

<html>
<head>
<title>Microcontent: Headlines and Subject Lines (Alertbox)</title>
</head>

How page titles are used

Page titles are used by people and search engines. People use page titles to help them find information, while search engines use the terms in page titles to help index content.

When people use page titles, they are generally read out of context. That is, there is nothing except the contents of the <title> element to tell users what the page is about. We all rely on the communicative power of page titles in the following situations:

  • In search results: page titles are used to create the links to pages displayed in search engine results lists
  • In browser favorites or bookmarks: the page title is used to distinguish between pages we've saved for later reference
  • In browser history lists: page titles are used to help us move back through our history of recently viewed pages to find the page we want to return to.

A second issue to note about page titles is that long titles get truncated (chopped short), so that they can fit in small screen spaces.

  • Most browsers truncate at the end of long page titles in favorites and history lists
  • Some browsers, like Netscape, truncate in the middle of titles stored in bookmark lists
  • Search engines won't index all the terms in long page titles

Common mistakes in writing page titles

1. Untitled documents

The most common mistake of all is not knowing that you should, or forgetting to include a page title. As a result, there are millions of documents on the web that cannot be properly identified. The image below shows the Google found almost 4 million documents with no page title.

2. Kitchen sink titles

At the other end of the scale are those who know they should include a page title, but just can't figure out what to include. Afraid of leaving something out, they opt for the kitchen sink approach and throw in everything they can think of. The image below shows a page with the title "Research Degree Options | Monash Institute of Reproduction & Development | Faculty of Medicine | Monash University". A better alternative would be "Research degrees, Monash Institute of Reproduction & Development".

3. Breadcrumb bar titles

Page titles and breadcrumb bars serve different purposes. Page titles are supposed to identify the unique contents of a document, while breadcrumb bars show users their position in the site hierarchy (though sometimes they serve as breadcrumbs in the Hansel and Gretel sense of the word, as markers of the route the user took to the page they are now on). The image above is like a breadcrumb bar in reverse. The one below is a common, but mistaken approach. The title is: "DallasNews.com | News for Dallas, Texas | JobCenter". A more usable approach would be "Job Center, DallasNews.com" or "Dallas Job Center, DallasNews.com" if the jobs were restricted to openings in Dallas.

4. Cloned titles

The image below shows four pages on a website that share the same page title "Commonwealth Bank Institutional Banking - welcome". The problem with this approach is that it not only adversely affects search engine indexing, but users will be unable to distinguish between the four pages in search results, bookmark lists or browser history lists. Each page should have a unique page title.

5. Titles in need of an interpreter

Page titles can sometimes include jargon or abbreviations that people (and search engines) may not understand. The example below is one that we saw perform badly in usability testing. The page title is "University Secretariat - Principal Dates". The title is derived from the owner of the information, the university secretariat, and uses the official jargon for important dates, "principal dates". We asked students to locate information about semester dates and most passed this page by in a list of search results. One user commented "that's not for me, that's for secretaries".

6. Titles that SCREAM to be heard

Some people use uppercase to draw attention (as in the example shown below: "BLACK REBEL MOTORCYCLE CLUB"), but this strategy can backfire. Page titles written in uppercase can be hard to scan when presented in a list of browser bookmarks or a set of search results.

Guidelines for writing page titles

Page titles should:

  1. Provide a clear and accurate description of the page content
  2. Be very concise:
    • Aim to restrict page titles to less than 60 characters
    • Omit unnecessary words ('Welcome to...')
    • Do not use 'a', 'an', 'the'
    • If you need to identify the organisation or author, keep the identification as brief as possible .
  3. Be easy to scan. Some tips for improving scannability:
    • Put the key words at the beginning of the title
    • Use mixed (sentence) case
    • If you're identifying the organisation or author, put this information last
  4. Not contain jargon, acronyms or abbreviations (unless widely known)
  5. Be unique

Related (external) links

Published: 1 October, 2004