Need a WordPress website this weekend? Start here...

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

September 28, 2009 By

(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:”


Your <title> element is the single most important part of part of your web page…

…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.

Thesis title tag is slightly misnamed.


See where it says “…contents of the <title> tag”? That should be “…contents of the <title> element.”

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

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

Head element for Bing SEO article

There’s more, too much to show in a screenshot, which just proves the point.

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

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

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

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!

[Update 12/12/2010: Perfection Kills has a great article on the difference between HTML tags and elements.]

Filed Under: Creating Content Tagged With: , , , , , , , , ,

How To Create Custom Template Pages in Thesis Theme

July 11, 2009 By

(Reading time: 6 – 10 minutes)

[Updated 2/5/2011]

If you do not have a Thesis license, and cannot log in to the Thesis forum, please go purchase a license from DIYThemes.com. I will not consult for anyone on Thesis who does not have a license indicating legal purchase of Thesis theme. Thank you.

I’m willing to take on updating this Thesis Custom Template code to 1.8 for $300. Here’s what’s in it for you:

  • 5 options: with or without header, with or without footer, no sidebar, 1 sidebar, 2 sidebars.

    NOTE: these templates will be available to you from the dropdown menu in your page editor. These are not “1 time shots.” They are permanent solutions.

  • 2 new sidebars you can use in your new templates
  • Your byline as a sponsor for the expensive whitepaper resulting from this work.
  • I’m about 2/3 of the way finished with updating (10/30/2010). Once I do finish and write it up, I’ll release the whitepaper for $57. Current customers, you get your free upgrade of course.

If you have a little time and some programming experience with PHP, it’s not that hard to figure out on your own. I’ve been programming since 1994, and it only took me about a day to figure it all out. You can use the work I’ve done here as a starting point.

Calibrate accordingly.

Contact me if you’re interested.

Note: I’m happy to help registered users of the Thesis theme when I can. Just point me to your account on the DIY Themes forum (you should have the link, right), we’ll take it from there.

Thesis theme for WordPress is an excellent piece of gear. What it doesn’t handle “out of the box,” it can be easily persuaded to handle with a minimum of fuss and bother. For example, custom page templates are not explicitly supported in Thesis, but are easy to implement, and I’m going to show you how.

The procedure requires 2 simple steps:

  1. Create the custom page template file
  2. Create the custom page template function

1. Create a custom page template file

Go to your thesis theme root directory, typically wp-content/themes/thesis151. You will see files named “archives.php,” “no_sidebars.php” and “custom_template.php.” Add your file there, say “cool_page.php.”

Add a single function to this file “cool_page();” It doesn’t really matter what you call it, but mirroring the file name makes it easy for everyone, including yourself, to see what’s going on. Here’s a source code listing of what that looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
/**
 * Template Name: Cool Page
 *
 * A custom template framework for creating pages with 
 * wholly arbitrary layouts.  DO NOT EDIT THIS FILE. Instead, 
 * use the thesis_hook_custom_template() hook
 * to specify the contents of div#content_box. 
 * Be sure specify which page should receive which code 
 * by dividing your action using the is_page() conditional tag.
 *
 * @package Thesis
 */
 
cool_page();

NOTE: Make sure you change the name of the template on line 3 so it will correctly appear in your page template menu.

Sign up here so I can let you know when I get this code updated, thanks. By the way, if you’re finding this article useful, send an empty email to wp-weekend.customtemplate@aweber.com to get more useful tips, tricks, lessons on WordPress, news on security updates, etc. You’ll the get the cutting edge stuff a couple of times per month. It’s spam-free, privacy protected, yadda yadda yadda. You’ll have to confirm to get in; opting out later is an easy click. Just an empty email to wp-weekend.customtemplate@aweber.com does the trick.

2. Create a custom page template function

Now you need to add some code for rendering the page. Define the cool_page() function in custom_functions.php, and populate it using code you rip out of these files:

  • lib/html/frameworks.php
  • lib/html/content_box.php
  • lib/html/templates.php
  • lib/html/hooks.php

The easiest way to figure out what code to use is to print each of these files on paper, along with custom_template.php. Then follow the control of flow using a red pencil. Figure out which functions you want on your final page, circle those in blue pencil. Once you have it figured out, type it all in by hand. Actually, I just cut-n-paste, but I’m lazy and I’ve been programming long enough to follow it in my head… (is that a good thing or a bad thing…?). If you cut and paste, watch out for the “smart quote” problem.

Here’s what my code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* MY COOL PAGE CUSTOM TEMPLATE */
// Function is called from wp-content/themes/thesis/cool_page.php
function cool_page() {
 
	get_header(apply_filters('thesis_get_header', $name));
	echo '<div id="container">' . "\n";
	echo '<div id="page">' . "\n";
	//thesis_header_area();
	//thesis_content();
	echo '	<div id="content_box" class="no_sidebars">' . "\n";
	thesis_content_column();
	echo '	</div>' . "\n";
	echo '</div>' . "\n";
	echo '</div>' . "\n";
        get_footer(apply_filters('thesis_get_footer', $name)); 
}

Some of the lines are commented out to show you where to put calls for various parts of the page.

Now, when you add a new page, you should be able to select Cool Page from your template selection drop down box on the New Page page.

NOTE: The function above produces an *extremely* stripped down page, no navigation. Don’t test it on a production blog. Here’s a screenshot:

No header, footer, sidebars, nav menu... totally custom page template!

No header, footer, sidebars, nav menu... totally custom page template!

If you’re a Thesis hacker, you should give this a try. It’s easy and fun!

Other solutions

There are other ways to do this, notably by modifying custom_functions.php and adding code to select page layout based on page ID or category, etc.

I find this clunky, and difficult to understand and maintain. Because the selection is done with numbers instead of logical entities (names), it requires looking up page IDs for every page you want rendered with the custom template, and modification each time you add a page using that template.

However, it does have the advantage of being “Thesis Portable.” That is, you only need to move what’s in the custom directory and nothing else.

Lagniappe

Just to be absolutely and thoroughly pedantic about literate programming, “thesis_get_header” from the source listing above really ought to be named “thesis_get_html_head” because:

  1. thesis_get_html_head says what it does.
  2. The word “header” is overloaded and requires context to parse meaning. “html_head” means exactly one thing, no context required. Read “Head vs. Header — A critical difference for modifying WordPress themes” for in depth explanation.
  3. It confused me initially. I knew I didn’t want a header… but without including the head element of the html, I didn’t get any of the required CSS files controlling the page display.

It’s true about literate programming: elegance and good taste matter!

I run several websites using Thesis. If you’re serious about mastering WordPress, Thesis has a lot to offer, and I recommend—without reservation—that you purchase a license for your own use. Thesis has an excellent affiliate program as well, which you should join when you purchase your license.

Filed Under: Extending WordPress Tagged With: , , ,
« Older Posts