All web pages must have an HTML <title> element to be valid. In fact, of all the various elements out there in HTML land, the <title> is one of the very few that are required in every HTML document. There’s a good reason for this. A document becomes much more valuable when it has a title. Put another way: in a sea of millions of documents, a document with no title is practically worthless.

Here at Foraker, we like to take this a step further and use two titles for each web page. We do this to ensure that, should the first title suffer a terrorist attack, unexplained downtime, or system errors, the second title can immediately step in as a hot failover… No, wait, that’s not why.

Actually, we use two titles because they each have very different purposes. One title brings folks to your website from the outside, the other title keeps users on your website and leads them to conversion actions (e.g. buying a product or signing up for a newsletter).

Title #1: The HTML Element

The first title we concern ourselves with is the one we started with above: the HTML <title> Element. This title appears at the top of the browser window when the page loads, and also is the default bookmark label. More importantly, the HTML <title> Element is usually used as the hyperlinked “headline“ on any Search Engine Results Page (SERP). If you want more people to click on your website from a SERP, optimize your HTML <title> Elements for the unique perceptual environment of the SERP.

Title #2: The Navigation Title

This title is used for within-site navigation (e.g. left navigation, breadcrumbs), the web page’s header (generally the <h1> element), and often for internal search results as well. Unfortunately, default behavior for many CMS and eCommerce systems is to simply re-use the HTML <title> element as the Navigation Title.

We strongly recommend against this approach.

Why?

Optimizing the HTML <title> Element for SERP performance is often at odds with optimizing the Navigation Title for an optimal website user experience.

When folks are Googling around, there’s a good chance they’ve never heard of you… and it’s appropriate to include a bit more information about your company and website in the HTML <title> Element. It also is usually helpful to add subject area context to the HTML <title> Element, which helps orient users to the topic of the web page when they have not yet arrived at your website. This extra organizational and contextual information is overkill, however, once a user has arrived at your website.

Let’s look at an example.

Here’s a web page with information about breast cancer treatments and side effects:

Notice that the HTML <title> Element is “Breast Cancer Treatment & Side Effects”, while the Navigation Title is “Treatment & Side Effects”.

While the whole website is about breast cancer, putting the words “breast cancer” in front of all Navigation Titles would severely harm a user’s ability to scan the website navigation, thus reducing usability.

But out on a Google SERP, it’s a whole different story.

On a SERP, it’s vitally important to make it clear that the treatments and side effects in question are specific to breast cancer, and in this case it is also important to distinguish the source of this information as coming from a trusted nonprofit organization (as opposed to a pharmaceutical company).

If your CMS or eCommerce system allows it, take full advantage of dual web page titles. If not (and you’re not too heavily invested in the product or application service), consider exploring alternative solutions. If moving to a new CMS or eCommerce system isn’t practical, see if you can get someone to open up that second title field via custom development, or at least get it added to the list for the next product release.

Once you have two title fields, work on optimizing each title for its unique purpose in life. And don’t forget to measure your results via a Web Analytics program (such as Google Analytics, which is free) so you know what works for your audience.