How to write better page titles
- Published on:
- 17th June 2013
- by:
- Category:
- Comment:
- View 2 comments
A few tips on how to write good and accessible page titles. How to write better page titles
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.
2comments
Hi Cliff,
I'm glad you enjoyed this post.
I have now updated the transcript and made the changes you suggested. Thank you for your feedback!
Gosia, this is an outstanding presentation of the title tag, and I've only been able to read the transcript! In fact, I'll be sharing this URL to better get the word out.
If I might make a couple of suggestions to buff up the shine a bit:
-1- In the first line, a <code> tag is missing around "<title$gt;".
-2- Farther down in the article, it looks like *both* a <code> tag and the respective encoded characters, instead of one or the other, are being used--in the content of the Parking & Transfers title tag, for example.
-3- In the description of each respective page, it would help me if the wording began with an orienting phrase: "First example" for the first, and then "Next example" (not "Second," "Third," and so on-- then I would have to remember which number I had just seen and which I was about to see).
-4- Finally, in telling why page titles should come before section and site titles, you say the other approach can be frustrating for people using screen readers, especially if page titles are long. Actually, it's not the page title that is the issue--it's the total length of the site and section titles. And this affects everyone. For people who use screen readers, it's annoying to hear the site and section titles every time they change pages. And people who can see and have many tabs open will suffer an undue cognitive burden, as they will see only something like "XYZ - Voted the" for every page from that site. How will they remember which is the tab for the main page of the "Events and training" section and which is tab for the "Terms and Conditions" page?
If you agree and make these small edits, please delete that part of this comment. Because truly you have presented an outstanding and highly useful explanation of the problem and its solution.