What's in your <head>? Part 2—<title>

My selfie

James Turner,

Tags: HTML

I᾿m talking about The Great Discontent, one of my all time favourite websites, and the one that inspired me to start blogging about my adventures in learning web design. In the last post, I started on the <head> section, focussing on <meta> and its many joys, and in this post, I᾿m looking at the all-important <title> tag. Hurray!

Skip to navigation

What does the <title> tag do?

Here᾿s the title tag for TGD:

<title>Liz Danzico on The Great Discontent (TGD)</title>

So, why is <title> important? According to w3schools.com, the title tag:

This is a screenshot which demonstrates what the title looks like in Firefox:

In Firefox, the text inside the title element appears in the tab at the top of the browser window
A webpage with a <title> element.

This is what a HTML document looks like without a title:

Without a title element, the tab at the top of the browser window just says Untitled Document
A webpage without a <title> element. Useless!

Leaving out the title is ugly. Don᾿t do it.

Skip to navigation

Tips on effective titles

From what I gather, there are people called search engine optimisers (SEOs) who dedicate their whole lives to writing title tags. So, what do they say about the subject? Here are a few articles about giving effective titles to web pages. The first two are straight from the horse᾿s mouth (the horse is Google). Found on 16/07/2014:

  1. support.google.com
  2. googlewebmastercentral.blogspot.co.uk
  3. www.hobo-web.co.uk
  4. searchenginewatch.com
  5. searchengineland.com

Some key points, just to summarise:

  1. Keep the title short: There doesn᾿t seem to be a cut-off point, but some of the sources suggest around 60-70 characters.
  2. Make each title unique: Don᾿t copy and paste the title tag into each page. Make sure your title reflects something unique about each page.
  3. (For websites in English) Important words go first: Search engines rank titles from left to right, so you should put the most important keyword at the beginning and the least important at the end.
  4. Use the pipe character: Don᾿t use other types of punctuation in the title.
  5. Write for humans: Above all, make sure that the title reflects what's important to the potential reader, make it meaningful (i.e. not ‘Home’ or ‘Page 1’), and avoid ugly keyword stuffing.

    6. And one more interesting point:

  6. Include a price in e-commerce sites: Price is a major reason why most people shop online, and the advice is that if you include the price in the title, more people will click on it in a search result.

Finally, remember that in Google, users can target their search at the title element, using the intitle:“...” prefix.

The <title> is clearly an important thing to get right if I want my websites to appear in search engine results. One of the articles above describes it as the “crown” of a web page, which is a fun image. I think I᾿ll go back and check that my title tags follow these guidelines.

Skip to navigation