Nomensa.com

You need to turn on Javascript in your browser to use this site!

How to write better page titles | Nomensa

How to write better page titles

Posted on

2 minutes, 12 seconds

 


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.

A keyboard with a green key shown as accessible.

Related posts

  1. The image features a whimsical, cartoon-style drawing around an open book on a solid pink background. From the book, a burst of symbols and objects is flying out, suggesting a magical or imaginative event. These symbols include a question mark, an exclamation point, a musical note, a speech bubble with "Aa" indicating text or dialogue, a small cloud suggesting an idea or thought, and various abstract shapes and squiggles.

    Blog

    What’s new in WCAG 2.2

    Discover the latest advancements in web accessibility with WCAG 2.2. From new success criteria focusing on mobile interaction to cognitive disability support, learn how these…

We'd love to hear from you

We drive commercial value for our clients by creating experiences that engage and delight the people they touch.

Email us:
hello@nomensa.com

Call us:
+44 (0) 117 929 7333

Nomensa.com

Please update your browser to view this site!