The Usable Page Title

We almost forget about it. It's an afterthought, really. The <title> sitting up there in the <head>. It doesn't really add anything to the design of the page. But there are times when a user interacts with the page title. It appears at the top of the window, it appears when printing, it appears in search results and it's used when people bookmark your site. How can we help the user?

Elements of a title

So, what are the various elements that might appear in a page title? You've got:

  • site title,
  • site tagline,
  • article title,
  • category (and subcategories), and
  • keywords

Which of these items should be in the page title and which items can you do without? Including all of them would just be too cluttered and would end up just getting cut off anyways.

Keywords we can leave out. Search engine optimization techniques say to include keywords in the <title> but we can accomplish the same thing by using a useful and relevant article title that makes use of the necessary keywords. For example, if you have an article about the digging power of a back hoe, make the article title "The Digging Power of the Back Hoe" instead of something less relevant like "Pushing Dirt". If you really want to have the witty title then you could always call it "Pushing Dirt: The Digging Power of the Back Hoe".

I used to include the category and subcategory information in the page titles but really found that the information was irrelevant. If a user prints out the article then knowing what the article is categorized under isn't necessary or can be reflected elsewhere in the actual page design. I would recommend keeping it simple and not bother with including any categorization in the <title>.

That leaves us with the site title, the tagline, and the article title. For the home page, I use the site title followed by the tagline. For article pages, I use the article title followed by the site title but no tagline. I put the article title before the site title on article pages because if someone bookmarks the page then the most relevant information for that user is the content of that page and not what site it's on. For example, if someone bookmarks "The Digging Power of the Back Hoe - Company Name" and a year from now go back to find it then they can easily locate that article. If the site title is used first and the title is truncated then the user has to remember what site the article is on to locate the page that they want.

Your page title is often the only thing a user retains when storing or accessing your article. Make it relevant and make it easy for them to find that information.

Published October 07, 2004 · Updated September 17, 2005
Categorized as Usability
Short URL: https://snook.ca/s/249

Conversation

4 Comments · RSS feed
Pete said on November 06, 2004

Nice article. I have recorded some output from screen reader software JAWS to help you select a proper separator character in case you do want to privide some context information in your document title.

Wombat said on December 20, 2006

I like the article... one frustration though, I am unable to scroll down the page with my mouse-wheel. The scroll-wheel works but only as far down as the title of the article, then stops... Blame the browser? Firefox.. mmmh, doubt it. Blame my OS? Well Debian Linux, so more likely. Blame your site design? Could be. I've never seen this before: a half scrolling page... Just thought I'd let you know. Cheers.

Just perusing said on March 08, 2007

Wombat - Is it possible your mouse was over the Contribute Your Thoughts comment box when it stopped scrolling?

Devlin said on August 03, 2007

Wombat: I'm not having that problem right now, and I'm in Firefox 2.0.0.6/Win XP Pro.

Great article Jonathan, very helpful! :D

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.