What the Heck is HTML TITLE element and why do I need one?

(Reading time: 10 – 16 minutes)

Title tags, title elements, title attributes: Do you understand the difference, and why the difference matters for your SEO results?

You’d think smart computer programmers could figure out a simpler way than using the same word 3 different ways. But they haven’t, and the underlying problem (metadata specification) is surprisingly messy.

It’s late Sunday evening, a little after 11 pm. I guess that’s not really late… didn’t leave the house until 11 last night. Had a nice cup of espresso about an hour ago, as much to kill the headache (don’t ask) as to perk me up. Mostly, I’m thinking about how to wrap up your next two articles on SEO. The information is all there, everything you need to know. Rendering it into digestible form is proving tedious.

iTunes is streaming from a Chillout/Ambient site, and I stop, cold.

Lezzi Baba “I love Music” is the current cut in the playlist.

I’ve never heard it before. It’s good. For me, beyond good. I’ve found nothing about the artist, the singer, any of it. I’ve only found it on Youtube, and I’ve been playing it over and over.

I won’t ask your opinion, such things are intensely personal, and I don’t want to know whether you like it or not. It moves me and that’s what matters.

In a recent comment, Jan Geronimo was moved to write:

I’m stumped with title tags and what to do about them. I use Thesis theme and there’s a box in my dashboard which asks me to supply a title tag. I always leave them blank because I don’t know what to make of it.

Are you stumped by title tags too?

Title tags are not that difficult to understand, provided you understand the definitions.

Wait… before we dig into the “what,” let me motivate you with the “why:”

…for search engine indexing. It’s so important you can almost forget about out all other “SEO” if you’re writing bulletproof articles to sit on the long tail.

If all you understand about SEO is the function of the title element, you’re ahead of most bloggers.

Now let’s take a look at what a “title tag” really is.

Commit the following to memory:

• title element: The HTML title element occurs only once in an HTML document, and only as a child of the HTML head element. A title element looks like this: <title> element data here </title> or like this: <TITLE> element data here </TITLE>. For example,
  <title>My Document Title Goes Here</title>
• title tag: The word “tag” refers to the actual sequence of characters that open and close the title element. For example, <title> is the required opening tag, and </title> is the required closing tag. The characters comprising the title element are then opening tag characters, title characters, closing tag characters.
• title attribute: Many other HTML elements, such as <a> (anchor) and <img> (image) may have an optional title attribute. For example:
  <img src="foobar.png" title="Foo Bar strikes again." />.

As you can see, the word “title” in HTML is context-dependent, and yes, that’s a hassle. But that’s how it is.

Why is this <title> thing so confusing?

Much of the confusion occurs because people do not understand these definitions, or do not care to employ the definitions correctly. For example, in the Thesis theme, the word “tag” is overloaded to mean the character data (e.g., the title) enclosed between the opening and closing title tags. Here’s a screenshot:

Thesis title tag is slightly misnamed.

Now, right here, a large number of programmers would dismiss this point as nit-picking. The general spirit of programming is this: When you write the code, you get to call stuff whatever you want. This is not official policy anywhere, it’s just – by observation – how programmers act. The (polite) explanation being “If you don’t like it, don’t use it.”

However, redefinition creates context-dependency where none previously existed. I never noticed this context-dependency here myself, but I’ve been hacking HTML since 1994, so I just sort of “know” what people mean. Someone without my experience might well stumble over context… especially when a web search results in a number of different, possibly contradictory explanations.

Website In A Weekend uses Michael Torbert’s All In One SEO (AIOS) plugin, which Thesis politely defers to when AIOS is present. Here’s what AIOS looks like for this post:

All In One SEO title

I believe Thesis defers to Godley’s Headspace plugin data as well.

Note that the title element is not the same as the article title. There’s several reasons you may want these to be different, a discussion postponed to a later article on title elements and SEO.

Note also the character entity data in the title, which gives me the angle brackets for displaying HTML correctly. By W3C title element definition, you can use any valid HTML character entity you choose in your title element.

Did you get all that? Great! Because handling the title element for a post or a page is only part of the story. You still need to handle the title element for your web site as a whole. That is, the title element delivered when someone (or a search engine) lands on your front page. This isn’t hard, but let’s get more fundamentals mastered first. We’ll handle your front page with both Thesis and All In One SEO in a later post.

Digging deeper into the title element

First, let’s see what the canonical source for all things HTML, namely, the World Wide Web Consortium (W3C), has to say about the HTML title element:

The title of a document is specified by the TITLE element. The TITLE element should occur in the HEAD of the document.

There may only be one title in any document. It should identify the content of the document in a fairly wide context.

The title is not part of the text of the document, but is a property of the whole document. It may not contain anchors, paragraph marks, or highlighting. The title may be used to identify the node in a history list, to label the window displaying the node, etc. It is not normally displayed in the text of a document itself. Contrast titles with headings . The title should ideally be less than 64 characters in length. That is, many applications will display document titles in window titles, menus, etc where there is only limited room. Whilst there is no limit on the length of a title (as it may be automatically generated from other data), information providers are warned that it may be truncated if long.

>>>NOTE: Your article is NOT the “document” as explained above. Your article, blog post, page, etc. exists as content within the body element of the HTML document. Your article title exists within the “header” component of your article, the element title exists in the <head> element of the HTML document. Here’s more information on head vs. header if this point isn’t clear.

Here’s the source for the w3c HTML title definition web page:

4
5
6
7

<HEAD> 
  <TITLE>The TITLE element in HTML</TITLE> 
  <LINK rel="Stylesheet" href="GuideStyle.css"> 
</HEAD>

Personally I find both amusing and enlightening how little metadata the <head> element contains for this web page. Standard SEO practice is to stuff the <head> element with metadata to improve search engine results. The W3C rightly needs no “SEO optimization.”

If you’re not quite following me, take a look at the source code for any page on your blog. CTRL-U opens the source in most browsers. Now examine everything located in the <head> element, everything between <head> and </head>. Thats a bunch of stuff, right? Here’s part of what Holly Jahangiri’s Bing SEO article’s <head> element looks like:

Head element for Bing SEO article

That’s a lot of stuff compared to the W3C web page!

This is proof positive: in the long term, for high quality, canonical, “evergreen” content, SEO doesn’t matter all that much.

Either your web site rises as a result of your dominating your niche and developing an excellent, trustworthy reputation for delivering valuable content, or you quit blogging (for whatever reason) and your stuff goes away. W3C has been on the (World Wide) Web since years before Google even started, so the entire W3C web site would have been one of the first sites in Google’s index. And it’s been in the index ever since: trusted as an absolute authority, totally dominating the HTML standards niche.

In short, you can go a long way just making sure your <title> element is handled.

Many uses for <title> element

The <title> element is often displayed in browser tab:

Title element on Chrome tab

The title element may also be used in the tooltip for tabs in the Google Chrome browser, as shown in the following screenshot. Note that the cursor position over the browser tab was not captured:

Tooltip using title element

I’m still playing Lezzi Baba. There’s a melodic thread that reminds me very much of Pitch Black’s Bird Soul. I have a crush on the woman at 2:38 in the Bird Soul video: Get outta there girl, before you get hurt!

“I Love Music” is tying itself to Upful Groupvine. For no particular reason at all.

Back to work…

Blog post and web page titles are different

Let’s revisit the difference between the web page as an HTML document, and your article as a property of the web page. Here’s the deal:

• Blog post and page titles are marked up using <h1> elements. The article title can be as long as you want.
• Web pages are titled with <title> elements. W3C recommends the title element contain no more than 64 characters as many browsers and other web applications will truncate long titles. Digg, for example, truncates long titles.

Blog post title using h1 element

The <title> element and WordPress SEO

As noted at the beginning, the <title> element is the single most important part of your document for SEO purposes. There’s a number of reasons, all of which require some in-depth discussion. Since this article is already very long, let’s agree to postpone SEO title discussion to a future article. Since you’re so agreeable to waiting, I’ll also include a link to my preferred SEO analysis tool. It’s free, it’s works on single web pages, and all the results are explained very well.

Ok, well, that’s enough for now. If you’ve enjoyed reading about title tags and the like, I’d be delighted for a tweet, stumble, digg, or whatever. Thanks!

Tagged as: Geronimo, head, Header, html, SEO, title, Title element