Document titles and title separators
I came across an interesting discussion on title separators the other day: What’s your favourite blip? at The Man in Blue. It made me start thinking about document titles and separators.
I posted a comment with my take on the matter over at The Man in Blue, but I’ll state it here as well. This is not something I feel very strongly about, so if anyone has seen some research on what the best title separator is from accessibility and usability perspectives, please share, and I’m willing to reconsider my ways if necessary.
Some time (almost two years) ago I came across a similar discussion at Holovaty.com: Page titles on news article pages. Much of what is written there makes sense to me.
I like and use the pipe/vertical bar, | , for most sites. I also reverse the order in the title:
document title | category | site name
or just
document title | site name
depending on the context and importance of the document. Sometimes having the whole “crumbtrail” in the title can be good, but often it just gets in the way, and reducing it to the document title and site name is better. That’s what I do here, since I figure there is very little benefit of knowing that this document is in the “Archive” section.
I think reversing the order of items in the title makes bookmarks, browser windows and tabs easier to keep track of, especially if you have many tabs in your browser window. If more than one bookmark or tab lead to the same site, I find having the document title first is more helpful than repeating the site name several times. I also have a feeling that search engines like it.
One exception is the home page, where I normally use just “site name” or “site name | some blurb”.
As for title separators, whatever you choose to use, read it out loud to get some feel for what screen reader users will hear. I know I wouldn’t want to listen to page title minus colon colon minus section title minus colon colon minus site name
or the result of some similar fancy separators made up of several characters.
What’s your take on document titles and title separators? Can you see any problems with the way I’m doing it? I’m open to any suggestions for improvement.
- Previous post: In Search of Validation
- Next post: Global White Space Reset
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I'm with you!
I missed that post. Looks like I haven't subscribed to your RSS feed. There. Done. :)
I use "title @ site name", hoping that it might make sense when being read out loud.
Tommy: That makes sense in English, but what about other languages? I don't think it makes a whole lot of sense in Swedish, for example. But then, neither does '|'.
We (at the college where I work) prefer and use "-" as a separator. Document title goes first, then the "section" if it is suitable, then the name of the college (always).
Title [ - section ] - Site Name Here
I like page title, then separator, then site name.
But mainly because Google will then display the page title first (more important) but also display the site name (advertising, branding, etc), and will possibly treat the page title as more important for ranking (as it's the most relevant bit of that page).
Google is the main place I think of HTML page titles being used. I tend not to look at my browser's title bar very much: it's small and high :)
Ah, scratch my last comment. Just go with Snook. Amen.
Roger, you're right. But I'm thinking about dropping the Swedish section anyway. :)
Since I don't like my page titles showing up in search engines and RSS readers like:
"site name ?? page name"
for any non-ASCII "blip" ...I prefer to stick to one of the standard ASCII characters that I know won't cause problems:
~!@#$%^&*()_+`-={}|[]\:";'<>?,./
Now... since we all know that poor programming can get the best of us, I try to avoid using HTML brackets for anything I know that will be presented in a web page to avoid this problem:
missing site name or maybe some HTML displaying inline followed by "page name"
..so that excludes > and < ..but then there iss the issue of what items have to be escaped in HTML and sometimes when they are escaped cause problems like:
"site name — page name"
actually displaying in the search engine results page.
So that exludes "& and maybe even ; if it immediatly follows something without a space... though that is debatable.
So we are down to just a few more... let's look at screen readers ...how do they read these characters. I know that some read # as "pound" or "number" from what I understand... it could be that / even reads as "slash" and \ reads as "backslash" which would sound like:
"site name backslash page name"
Then we have the issue of encoumpasing content within some backets... so long as the space is there we are fine for search engines.. the second we remove that space things like "page" are now "[page" ...so I am going to say those are not optimal since they really look better with no space.
So what's left?
~!@^*+`-=:'?,.
I'd say the best options are either:
"site name | page name"
or
"site name - page name"
or
"site name : page name"
...thats just a best guess.. your tastes may range quite a bit.
Nick: Nice analysis. I edited your comment slightly - I'm guessing you meant for — to be — ("site name — page name").
The one thing about using vertical pipes (which I am in favor of) is that in IE6/Win (and probably 5.5 and 5), when someone adds a page to their favorites, the pipe is not rendered in the favorites list. It just renders as a space.
That could be problematic, especially on a site that may have long Titles for several sections down.
I use » for my separator - I think it kind of gives a feeling of hiearchary.
I liked your idea of bookmarking pages - entry titles do make sense to be first. However, I noticed WordPress automatically puts a strong emphasis»strong emphasis in front of the entry title because it's used to having it last.
Guess I gotta hack into the source code and find where it causes that, and get rid of it. mumbles to self
oops - I guess i misunderstood the instructions. lol. "strong emphasis»strong emphasis" should be ». :/
For WordPress users there is a good plugin, WP Plugin: Optimal Title, that makes better titles.
I use this scheme (as is default by Optimal Title): Main page: Sitename » Tag line Other pages: Title « Sitename
These separators I use works fine with Google at least.
Oh, forgot a line break, this is what it was supposed to look like:
Main page: Sitename » Tag line Other pages: Title « Sitename
Great roundup of best practices for document titles. I have recorded some screen reader output for the characters discussed in this article. This may be helpful when you choose your separator character.
It also tells you why the right double angle bracket character may be bad for your listeners.
Excellent info, Pete!
I'd go with the - sign. It's standardized. I know you kids like coming up with fancy new ideas, but sometimes tried and tested is best.
I see no real logic in using a pipe. Titles everywhere else use the - sign as a seperator, why change it for you web site.
You're effectively wanting the following
Document Name | Site Name - Browser Name
eg.
Blue Widgets | Widget World - Mozilla Firefox
instead of
Blue Widgets - Widget World - Mozilla Firefox
I would certainly discourage the use of unicode in titles (or any English language web document for that matter). Again if there's no need to, why break things?
Bill: The dash (-) is ok but can be confusing to screen reader users, especially if it is also used in other parts of your title text.
I think only Windows browsers add "- Browser name" to the title. Mac browsers certainly do not. They only display the content of the title element.
This discussion is not about coming up with anything new or fancy - it's about what is most accessible and usable.
I'm using the triangular bullet (?).
Drupal uses the same order for page titles by default in most of its themes. Another score for Drupal! :)
Sorry, comments are closed for this post.