Naming Your Web Page
Everything needs a name, whether it is a hit song, your pet goldfish or a Web page. A good name should be unique, descriptive and concise. If that isn't hard enough, Web pages have three places to put their name and each three have slightly different requirements: The <h1> HTML element, the <title> HTML element and the file name.
The <h1> Element
The <h1> element should hold the true name of the page. Every page should use it once and only once. And the number of its usings shall be one. Leave out information about context. You don’t need to mention anything bigger than the page: Don't say what site it is on, what section of the site, or that it is on the Web on the Internet on Earth in the Universe. The user knows these things because they are already on your site. (And, I presume, in our Universe.)
The <title> Element
The text you put in your <title> tag won't display on the page, but that doesn't mean it is invisible. Where does it show up? Here are the main places:
- The title bar of the browser
- Browser tabs
- Bookmarks / favorites lists
- Search results
Difference Between <title> and <h1>
Open the bookmarks / favorites list in your browser. If you are like me there is a bunch of junk in there. See those all those words? Those are the <title> elements of their pages. Looking at these should be very illustrative of what makes a good title tag. Which ones do you think work and which ones are confusing? Here's what I see...
Qualities of Good Titles
Includes Context
These little lost pages are a long way from home. It's nice to know where they came from at a glance.
Succinct
There is not much room to display all the verbage in bloated, spammy titles. Most get cut off. Browser tabs typically have even less room, though search page listings will have plenty.
That's Hard
So, we need to add contextual information to the page title and keep it short. I love a challenge. Let's see who does this well.
Examples
Usability Testing with 5 Users (Jakob Nielsen's Alertbox)
Let's start with a usability guru's site. Jakob uses a page title, then tacks the name of his site and section at the end in parenthesis. Not too bad in my opinion. It is a little long, but only the name of the site gets cut off in my bookmarks list.
Web 2.0 how-to design style guide - London web designers (Scratchmedia)
Here's another site about making good Web sites that uses a similar method. He's using hyphens as well as parenthesis as delimiters. I doubt it makes much difference, but it is interesting to note the common use of text separators when displaying context. Hyphens are probalby the most common, but I also see : (colon,) / (forward slash,) | (pipe,) > (greater than) and all sorts of others.
Amazon.com: Akira Kurosawa - 4 Samurai Classics (Seven Samurai / The Hidden Fortress / Yojimbo / Sanjuro) - Criterion Collection: Toshirô Mifune, Misa Uehara, Eijirô Tôno, Tatsuya Nakadai, Keiju Kobayashi, Yûnosuke Itô, Minoru Chiaki, Kamatari Fujiwara, Takashi Shimura, Susumu Fujita, Eiko Miyoshi, Toshiko Higuchi, Akira Kurosawa, Ryuzo Kikushima, Hideo Oguni, Shinobu Hashimoto, Shugoro Yamamoto: Movies & TV
Holy snu-snu. I think Amazon might be overdoing it. One interesting thing about Amazon.com's titles is they begin with the site name. I think they can get away with it because it is short, so there's plenty of room left over for other information. I suppose they know most of their title will be truncated in bookmarks and tabs, but as long as the critical information is visible, it is OK.
These guys like to keep it simple, no? The home page of your site is probably best served with simply the name of your site as the title. Google are the people that index your site to be searched. It might be a good idea to follow their lead on this.
Getting Started: gadgets.* API - Gadgets API - Google Code
Not to let Google off the hook - they have some longer titles as well. They keep the site name at the end which seems to be common. Many effective titles use a reverse order of hierarchy so the contextual info may get cut off, but the name of the page is still prominent.
File Name
File names are a critical component of Web addresses (or URL or URI or whatever it is being called these days.) It should be similar to your h1 element, with a few exceptions:
- If you want people to be capable of typing it into their address bar, you may want to shorten it. Try not to abbreviate - instead pare it down to its key words. Unlike the title, no context information needs to be added because the name of the site and its subfolders will already be included in the URL.
- Remove all characters that are not letters, numbers or the underscore. Weird characters will probably get encoded, mangling your addresses, or worse, causing problems when linking to your page.
- Different browsers, Web servers, operating systems and other technologies have different case-sensitivites. Avoid problems by using lower case only.
- It is not as easy to change the file name as compared to h1 or title.
Permanent Names
Unlike h1 and title, where whenever you think of a better one, you just change it; file name is more rigid. If you change it for any reason, you have just broken every link and bookmark to that page. There are ways to create redirects but they are a clunky hassle. You are better off getting it right on the first try. Good luck with that.
That’s Great. But How do I Choose a Good Name?
Sorry, I can’t help you there. You'll have to think of the perfect name on your own. But once you do, at least I gave you some ideas about what to do with it.