SEO

Optimise your ‹title› and ‹description› meta tags

You have only one chance to pitch your site to the user when he’s browsing through search results: your title and description html tags. So you must keep them in top shape.

Proper use of title and description meta tags in every page or your site (keywords meta tag is not very useful nowadays, although it does not hurt having it), will help the search engines understand your content better.

There are various ways to format the title and description tags. The worst one is just to leave your site’s name as the title and your tagline as a description in all the pages.

The title of each page should tell what this page is about in a short sentence, while the description tag should give a short abstract of the content.

The real challenge is to find the best possible way to format your title tag, and how to optimise your typo for the description.

Here are some variations for the title:

  • Page title
  • Page title – Site name
  • Page title – Category – Site name
  • Page title – Category

Your title tag, is how each page will be displayed in any search engine. Having your site’s name in the title may be helpful if you have a site with lots of traffic and a well known brand, so people can identify your pages easily. I wouldn’t suggest to put your site’s name in the beginning of the title, unless you want to sell your brand first and then your actual products.

Adding the category name (if any) will provide some additional keywords to the search engine and may help your ranking a bit, but be careful cause it may confuse the user, so you need to find some balance here.

Let’s say for example that someone needs to buy the book ‘Flash CS4 Professional Bible’, and wants to find an online reseller. Performing a google search for ‘Flash CS4 Professional Bible’ gives these results:

(note: these are not actual results)

  1. Amazon.com: Flash CS4 Professional Bible
  2. BooksOnline.com > Internet > Flash > Flash CS4 Professional Bible
  3. Flash CS4 Professional Bible
  4. buy Flash CS4 Professional Bible
  5. Bookbargains.com
  6. Flash CS4 Professional Bible – ebooks.com
  7. Flash CS4 Professional Bible, Bible Series, Robert Reinhardt, Book – Barnes & Noble

Amazon.com: Flash CS4 Professional Bible
In the first example, we can see the name of the reseller followed by the title of the book we’re looking for. Because Amazon is a well known and established brand, the user might feel more confident in following this link and purchasing the book. This is a case where having the site’s title in the beginning helps build trust with the user.

BooksOnline.com > Internet > Flash > Flash CS4 Professional Bible
In the second one we have to read through the name of an unknown reseller and a series of keywords, which we don’t really care, untill we get to see the actual title of the book. Although, the structure is pretty clear and we can understand that this is a shop selling the book that we need, a link with shorter text would be easier to scan-read.

Flash CS4 Professional Bible
In the third case we only see the title of the book, which is exactly what we were looking for, although we may need to read the accompanying description bellow the title to see if this is an e-shop or something else related to the book. Still, the title serves it’s purpose.

buy Flash CS4 Professional Bible
The fourth one is similar to the second, but without the reseller’s name and the word “buy” added. I don’t think that having action words (‘buy’) in the title helps in this particular case. Online commerce is a sensitive field, and many users feel reluctant in visiting unknown sites with keywords like ‘buy’, ‘best offer’, etc. To me it looks like a spam site that will probably be filled with ads, etc. You can leave the action words for the description of the page. For example, having the actual title of the page as title and a phrase like “buy Flash CS4 Professional Bible for $39.99 at bestbooks.com” as a description, helps a lot more to make a decision on if I should follow this link or not.

Bookbargains.com
The fifth example shows a site that uses just a generic title for all the pages, which is irrelevant to the user, does not tell us if we can find what we need and we will probably not visit it.

Flash CS4 Professional Bible – ebooks.com
The sixth one, provides the book title and the reseller’s name. This is a good one and just to the point.

Flash CS4 Professional Bible, Bible Series, Robert Reinhardt, Book – Barnes & Noble
The seventh and final one contains the title of the book, the series, the author’s name and the reseller’s name. Although this one might rank better in search engines, the user may find it a bit crowded and just skip to the next one that contains less unnecessary text for him/her.

Which one is the winner?

For this particular example I would say that Amazon.com: Flash CS4 Professional Bible, Flash CS4 Professional Bible and Flash CS4 Professional Bible – ebooks.com are good implementations, but I wouldn’t suggest Amazon.com: Flash CS4 Professional Bible as the best practice. In Amazon’s case it works, because people want to feel safe about their online purchases and Amazon has built a good reputation so far.

So, since I think that Amazon.com: Flash CS4 Professional Bible and Flash CS4 Professional Bible – ebooks.com are good implementations, why didn’t I use ‘Design Without Frontiers’ in the title tag of this site?

The truth is that I may use it in the future, but in the format of ‘ – DWF’.

I don’t think that having the ‘ – Design Without Frontiers’ added to the title of each page, adds value for the user when he’s browsing through some search results. On the contrary, it would just add unnecessary noise over the actual title of the page. No need to focus on the brand over the user, especially for a new blog.

Conclusion? My picks for the title tag would be:

  • Page title
  • Page title – Site name
Of course, every website has different goals and different needs. Understand your audience, evaluate your aims and create the titles and descriptions that are most appropriate for you.

Make your title tag short and easy to read. Create description tags that can explain the content of the page in 2 sentences. Don’t forget to optimise the title and description with some nice keywords.

As always, remember that we create content for the user, not for ourselves or the search engines.

What’s your approach on creating titles and description tags for your sites? Do you use your site’s name in the title? Do you add keywords to rank better in search engines? Do you create descriptions yourself or just leave it on the CMS software that you use?

Post to Twitter Post to Digg Post to Facebook

Related posts:

  1. Reset your CSS
  2. Succesful dating with a search engine (or What is SEO?)
  3. I am interested in Web Design and intend to become a professional Web Designer

1 Comment »

Comment by Stu Collett
2008-12-01 13:25:34

Great article, thanks very much.

stu collett.

 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped=""> in your comment.
CommentLuv Enabled

Trackback responses to this post

©2008-2009 Design Without Frontiers Magazine, all rights reserved. A project by IconOf.Com.