How to use the title tag

I think this is something big, that every site should be aware of. Think about how to use the title tag! I’ve seen so many websites doing this wrong, so I want to explain the method which is in my opinion the best.

Why is <title> important?

You have to see where title appears, in order to know how important it is.

Title Bar of the browser

That’s the only thing where title plays a role – for some IE-only users and webmasters. Most people focus on this, and therefore titles can be very long.

Title in the title bar

Task Bar

This is very much related to the title bar of the browser. You expect every program to have the same title in the title bar and in the task bar.

Title in the windows task bar

Tabs

Since nearly every browser uses tabs for comfortable navigation, this becomes more and more important.

Title in tab

These where important locations where a title is displayed when you actually visit the page. But there are more.

Recent pages

You can’t go back only one page. Most browsers show you a list of recently viewed pages, click on a title to jump back to that page.

Title in recent pages

Browser history

See which sites you browsed last week.

Titles in the browser history

Bookmarks

Bookmark pages you like. Normally, the title tag will become the bookmark title.

Title as bookmark

ScrapBook

The ScrapBook extension stores your pages on your local hdd and you just have to click on a title to view it. The title is important here, too.

Title in ScrapBook

Search engine rankings

Have you thought of that? The title appears in the search results!

Title in search engine ranking

The correct format

Now that you have an idea where the title tag appears, it comes to the right format.

This is most important. Think about the correct structure and how the visitor will have a benefit from it. As you know now, the title appears nearly everywhere.

The primary information comes first. Not just because you read it first, no. Have a look at the screenshots above. If the titles would be longer, you just wouldn’t get all the information you want. That’s the big mistake. So don’t put the website title first.

Example:
CNN does it wrong

Yeah, excellent. I’m on CNN.com – but what was where? Until you click through the tabs or wait for a tooltip to appear, you simply have no idea.

That directs me to the following:
Structure: Primary and secondary information
The primary information is the document title, not the website title. Then you can add secondary information, like the category, and finally you can add your website’s title.
Structure: Document title vs. Website title
The title for a blog article would look like that:
Example Article | Category | Blog name

Unfortunately, many websites are doing this wrong, even the ones following web standards. I think there should be a standard for title tags.

What you can do to improve your titles

Follow the guidelines above :-)
Well, additionally you can search for your site at Google. Are you satisfied how your pages turn out? Are the titles clear and easy to understand? Could someone else understand what the document will be about?
Then bookmark your own page or open it in multiple tabs and ask yourself the same questions.

Published by

Julian Bez

Julian Bez

Julian Bez is a software engineer and former startup founder from Berlin, Germany.

  • Pingback: andrea's journal » Website Titles()

  • http://joeclark.org/weblogs/ Joe Clark

    If somebody could tell me how to edit my template and various hocus-cadabra/abracapocus PHP files in my WordPress, I would have my title information in the correct order. It bothers me, too.

  • http://www.julian-bez.de/blog/ Julian

    @Joe Clark:

    You could change the titles by editing “template-functions-general.php” in the “wp-includes” directory. Look for a function called “wp-title” and then for the comment “// Send it out”.

    That’s what the part of my file looks like:

    // Send it out
    if ($display && isset($title)) {
    echo "$title $sep ";
    } elseif (!$display && isset($title)) {
    return "$title $sep ";
    }

    $title is the title and $sep is a seperator you can define in the WordPress index.php file.

  • http://www.mstyle.nl/ Mstyle

    Nice article. I have even posted an extra thing related to title to the Mozillazine. I think it would be even better if we could do:

    <title>sitename</title>
    <subtitle>extra description</subtitle>

    The advantage: If you run a site with articles and such you could use just the title and put everything inthere. However if you have a site where the sitename is important, but the extra info might change from time to time you could use subtitle to do so. Also would this make a decent way to bookmark sites, instead of ‘title- welcome to our website, hope you enjou etc…’ it makes for ugly bookmarks.

    So i’m not quite done by how it should be implemented but i know it has the benefits if used/implemented right.

  • http://www.julian-bez.de/blog/ Julian

    I think we don’t need something like <subtitle>. If everybody would care about usability, and put the title elements title in the right order, there would be no problem.

  • http://joeclark.org/weblogs/ Joe Clark

    Julian, that didn’t work for me. I’ll need a better explanation, if you’ve got it. joeclark at my domain.

  • http://mikemariano.com/weblog/ Mike Mariano

    Julian,

    I second Joe’s request; thanks for your article and follow-up comment. I was trying to achieve similar results by creating a new WordPress template, but that required me to go into The Loop in header.php merely to hack together a makeshift title. Your solution would affect all templates, but that’s not necessarily a bad thing.

    There’s one drawback to putting the document title ahead of your site title: you may not be able to see the site title in Google. Observe. Right now, part of my overly long post title is not displayed, but with your method my site title would disappear. Overall it’s no big deal—the post title is more important—but just think of how panicked greedy Search Engine Optimizers would be!

  • http://www.christianscholz.com Kryz

    Thanks for this eye-opening article! I’ll have to change a bit in my home-cooked blog, but this will definitely be implemented in the new version.

  • http://www.artviper.net Frank

    Thanks, this is pretty helpful. Until now I only watched out to have the most common info in the title, yet not in a particular order like described above.

  • Pingback: Wordpress titles - two seven()

  • http://www.columbusvacuumcenter.com Chris Beale

    If your putting together a title for an online retail store, what would you want to do as far as listing items in your tittle? What would be the proper format.
    Thanx

  • http://www.nialfuller.com Nial Fuller

    I have used the tried and tested , site name and site author title tags for 2 years and my traffic is ace.