Much of web development comes down to personal taste. How you indent your code, whether you use b & i or strong and em tags, whether you compartmentalize all your styles into neat little external stylesheets or liberally pepper your HTML with inline styles; most of these types of decisions have little bearing on the functionality or even “correctness” of your code. Likewise, there are many ways to handle some of the common elements that fall within the domain of that most sneaky of snake-oil salesmen—the SEO expert.
But I’ve spoken before of my disdain for that profession. What I’m going to talk about now is one little nugget in that arena:
The Title Tag
It’s a fundamental piece of the HTML standard, and there are probably as many ways of using it as there are websites. This is my personal take, based on my preferences and my 14 years (only 10 professional years, mind you) of web development experience.
As with most things HTML, many SEO experts suggest that your title tag should be chock full of site- or (hopefully) page-relevant keywords, to help reinforce the search engines’ association of your page with those keywords. (“Hey, it’s in the title, the h1, the img alt tag, and peppered throughout the page, the page *must* be about this!”) Honestly, while having keywords in your page titles certainly will help to some extent, the necessity and actual benefit of the practice are often grossly overstated.
Unfortunately, the SEO experts with whom I’ve worked seem to give the title tag little thought beyond the stuffing of keywords as a means to a very singular and limited end, and give little to no thought to how users interact with a page, or how browsers or other tools handle or present such information.
So, how are page titles really used, by search engines and other tools, and by people and their browsers?
In Action
The title tag doesn’t contain the bulk of the content a user sees or interacts with, but it does appear in a myriad of critical and useful places and ways. Back when browsers had title bars, the title tag appeared there, prominently displayed at the top of the browser window. Now that tabs have taken over, and, in fact, completely displaced the title bar in many cases, the page title now typically populates the tab itself. Depending on how many tabs you have open, you might see four or five words of a page title, or you might see three to five characters. In some ways, this has made the page title less critical to the end-user with a modern browser.
Nevertheless, many other tools—like bookmarking (delicious, pinboard, or browser-native), and social sharing tools—prominently feature the page title whenever you save or share a link. In these cases, having a well-formed page title will help users recognize your content later when they go back to retrieve it.
Delving into the search engine world, but remaining human- rather than ‘bot-focused, we know that most search engines use the page title as the text of the main links in their search results, or at least feature it prominently. Here again, having a well-formed page title may help a user more easily recognize yours as valuable content worthy of their time.
As for search engine spiders, ‘bots, or indexing engines, the page title is merely a piece of content in a sea of content. Perhaps a particular engine weights the page title heavier than, say, an img alt tag, or the h1 of a page, but it’s still just one piece of content out of several on a single page. At least one search engine (*the* search engine, Google) has said they’re building their system to look beyond such obvious tricks as keyword-stuffing so they can get to what matters—the actual content, and the value of the content as determined by other active and reputable internet citizens. So, at least in Google’s case, I’d wager that page titles—keyword-stuffed or not—have little impact on a page’s ranking.
An Example
So, after all that, let’s look at an example. Say we’re building a site to sell Pet Rocks, and we have a new pet in the Sedimentary category named Limestone Louie.
Going by common SEO practices, you’d likely end up with a page title like this:
Pet Rock | My Pet Rock | Sedimentary Rock Pets | Rock Pets | MyPetRock.com
This crams in a bunch of keywords, but is it going to make any sense to the consumer? Is it going to help them find your tab in their browser, find their browser window in their task bar, or decide to click your link on a search engine results page? Yeah, probably not so much. This is just a mess of keywords without regard to the end user—your customer.
My opinion is that a page title should represent the hierarchy of your site, forward or backward (with backward being best). For instance, either of these would be a huge improvement:
MyPetRock.com | Pet Rocks | Sedimentary Pets | Limestone Louie
or:
Limestone Louie | Sedimentary Pets | Pet Rocks | MyPetRock.com
The second one is best, because it’s legible, it’s hierarchical, it conveys to a higher degree of precision what this particular page is about, it better positions your branding (by not burying it in an avalanche of keywords), and it will actually function reasonably well in most end-user scenarios.
Again, as with most things HTML, there’s no “one true way,” but this is a damn good starting point.
If you have your own preferred way of handling page titles, feel free to share by leaving a comment below!