Writing useful page titles

In Title Junk, John Gruber brings up the usability problems that poorly designed web page titles can cause. He makes many good points – I posted similar thoughts in Document titles and title separators back in 2004.

Writing good titles for web pages (or web applications, for that matter) is far from a new subject. A little reminder every now and then doesn’t hurt though, so here are a few simple guidelines:

  • Reverse the order of the title, i.e. put the document title first and the site name last. This makes the document title appear first in bookmark lists, browser tabs, and search results.
  • Use a plain separator character that doesn’t cause confusion. I would say that your most robust options are the dash (-) and the pipe/vertical line (|). Keep fancy characters, repetitions and other attempts at graphic design out of page titles. Not only can they make reading the title more difficult, they can also be confusing or tedious for screen reader users to listen to.
  • For documents that are deeply nested in the site hierarchy, try to avoid putting the entire breadcrumb trail in the title unless the document title on its own won’t make sense. This part can be tricky to get right when you’re using a CMS to automatically construct the page titles, but it’s doable.
  • Resist the temptation and SEO advice to stuff page titles with keywords. There’s nothing wrong with having keywords in your document titles, but as John Gruber puts it Write them for humans, not search engine spiders. Spammy page titles do not give visitors a good impression of your site.

Just a few rules of thumb to keep in mind when constructing page titles.

Posted on February 8, 2011 in Usability, Accessibility