How to write better page titles

A few tips on how to write good and accessible page titles. How to write better page titles

A keyboard with a green key shown as accessible.

 

Hi, I'm Gosia from Nomensa, and today I'd like to talk about page titles.

The <title> tag is required in all HTML documents, and is used to identify the subject of the page.

Descriptive titles help people quickly work out what Web page they are using and if its content is relevant to them. They also help users to distinguish between pages open in different tabs of a browser window.

Titles are especially important to screen reader users, as the page title is the first thing announced to them when they arrive to a Web page.

Let's have a look at three examples showing the most common mistakes with titles.

[showing a mock-up page of “Your Energy Provider” site, where the page title (visible in browser tab) only reads: “Your Energy provider”. The main heading of the page is “How to contact us”. ]

On this site, page titles only include the name of the website, but don’t provide any information regarding the topic of each page. This title is not descriptive, and makes it difficult for users to understand where they are within the site structure. Titles should be unique within the site and clearly identify the site and section to which the page belongs.

[showing a mock-up “Parking & Transfers” page of “Fly With Us” site. The page title reads “Parking & Transfers”]

Other common mistake is not including website’s name in page title, as can be seen in our next example. Although the title clearly identifies topic of the page, it doesn’t inform the user what site this page belongs to.

[showing a mock-up “Terms and conditions” page of XYZ site. The page title reads: “XYX – Voted the best provider of financial services in 2012 - Events and training - Terms and conditions"]

In our last example, all pages have unique and descriptive titles, which also identify the site and section of the site to which each page belongs. However, the page name is actually placed last. This makes distinguishing between different pages open in separate tabs really difficult. It also means that screen reader users will have to listen to the same information every time they arrive to a new page. This may be quite frustrating, especially if page titles are long. That’s why the most important information (the page name) should be listed first.

So to summarize, the title of each Web page should: - be unique, concise and descriptive; - identify the site and section of the site to which the page belongs; - list the most important information first.

Add a comment

Fields marked with an asterisk (*) are mandatory.