Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Take time to tune your titles
If you want to get a lot of bang for your standards-compliant buck, make good use of the <title> element. The title element resides within the <head> of the document, between the <title></title> tags, and using it well has three major advantages:
- It improves your page’s accessibility. The page title is the first thing read by screen readers. A clear, meaningful title that accurately describes the contents of the page is an invaluable tool for navigating a site with a screen reader, mobile browser, or other non-visual device.
- It improves your page’s search engine rankings. Search engines look to your page titles as an important indicator of the page’s content, and rank information found in the title higher than other stuff on the page.
- It improves your page’s usability. Page titles are shown in the chrome at the top of your browser, used by browsers and services like del.icio.us as the title of bookmarks, and are often used as the the page’s indicator in site-wide search results. Good titles make it easier for us all to understand at a glance what a page is about, if it’s where we want to be, and why we should come back to it in the future.
How to write a tight title
The best titles are short, sweet, and to the point. They relate the main contents of the page in a sentence or less, with the most relevant content at the beginning. For example, suppose we are writing a <title> element for a page describing courses offered in the marine biology program at Fictitious University. A good start would be “Marine Biology Courses”. However, a reference to the site within which the page resides—Fictitious University— would improve the context. So we could revise the title to be “Fictitous University Marine Biology Courses”. This is a fair title, but it could be improved by changing the order of the contents to “Marine Biology Courses | Fictitious University”. This distinguishes the page nicely from other pages on the FU website that may reside in our bookmarks or come up in our search results. The pipe character (shift-\) is a nice, accessible character to use as a separator, and allows us to put the most important part of the title first.
Bibliography
7 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Roger Johansson
: http://www.456bereastreet.com/
15 April 2006, 04:46 : Permanent link to comment
Minor nitpick: it’s Johansson, not Johanssen ;-).
Andrea Arbogast
: http://interllectual.com
15 April 2006, 10:06 : Permanent link to comment
Sorry about that Roger! I have fixed it in the article. :)
Derek Punsalan
: http://5thirtyone.com
15 April 2006, 21:58 : Permanent link to comment
Now what would you recommend title-wise for bloggers who often blog about a whole slew of random bits with varying degree’s of professionality and or casualness?
Chris Griego
: http://cgriego.suprglu.com/
16 April 2006, 08:22 : Permanent link to comment
I’d have to disagree with “The pipe character (shift-\) is a nice, accessible character to use as a separator.”
The pipe character gets read by screen readers literally as “vertical bar” which is a rather annoying 4 syllable interruption to hear for each page of a site you visit.
I prefer an em-dash since it still shows the separation and is read as a long pause.
Andrea Arbogast
: http://interllectual.com
16 April 2006, 10:35 : Permanent link to comment
Chris: According to the Standard Schmandards article above, the em-dash is also read out at “em-dash”. I think it varies according to the screen reader you are using.
Two syllables is definitley less than four, but the vertical bar is easier to encode properly in blog apps, etc. It’s all a trade-off. The dot is also suggested as a good candidate.
James AkaXakA
: http://akaxaka.gameover.com/
16 April 2006, 10:37 : Permanent link to comment
I think I’d go for the ~ sign. It’s read out as ‘tilde’ everywhere, right?
Andrea Arbogast
: http://interllectual.com
16 April 2006, 10:39 : Permanent link to comment
Derek: With blogging tools, you often don’t get a lot of flexibility with how you set up your titles, in that you have to choose one format for everything.
In this situation you described I would do something like “Title | Category | Site Name”. If your title is humourous, at least there will be the category infomation placing in in some context.