Concise Guide to HTML Head Tags

Serious on-site optimization begins with the head tags of your HTML documents. For example, up to 150 characters from the description are displayed on the search result pages. This article gives a concrete guideline for writing the HTML head section. You will also learn the meaning of important and even some mysterious meta tags, e.g. GEO values, and find out what is now deprecated.

Now that you know how to structure your website (from part 2 of this series), let’s dig deeper and take a look on an HTML document. Between the <html> tags, you have only two areas, the head and the body.

<!DOCTYPE ... >
<html>
	<head></head>
	<body></body>
</html>

As we like the top-down approach, we start with describing the important stuff for the head:

<head>
	<title></title>
	<meta ... />
	<link ... />
</head>

All about the <title> Tag

The most important tag is <title>. It has the highest weight for the search results and its content will be displayed at several locations:

  • as the tab title or on the top of your browser (see image below)
  • as the title of a bookmark
  • as the first element of a result on a search result page (SERP)

The content of the title tag is displayed as the tab title or on the top of your browser (as shown here with Google Chrome).

The title should contain the most important keywords of that page, describing the main topic of that page.

Here are some rules for the title:

  • Should be unique for each page of a website
  • Should have between 5..7 words with a max of 65 characters
  • Should be structured similar to this:
    keyword/phrase – category – name/title of the website or brand
  • Should not have special symbols in it
  • The order of the keywords in the title is important, place the most important keyword at the beginning of the title
  • Don’t choose a title like <title>Welcome to my homepage</title>, Google has already more than 200 Millions search results for that topic.
    Imagine a company called Nuremberg confectionary selling handmade chocolate, a good title could be: “Handmade chocolate truffles by Nuremberg confectionary”

Next comes the <description>

Nearly as important as the title is the description. It’s enclosed in the tag

<meta name="description" content="..." />

and should contain a good description of the content of your website. It’s very likely, that the description will be shown as a snippet of your website with the title on the search result page, and it should contain the most important keywords of your site. But the description shouldn’t be stuffed with keywords only – that would be detected by the search engine spiders and could be penalized by them (mostly, they remove your site from the search result pages).

For the description, you should consider the following:

  • Should be unique for each page of a website
  • Should have between 25 and 150 characters
  • Should not have special symbols in it

Favicons

Favicons are the little icons shown beside the address in the Browser or beside the title in the tab and may help to remember your website.

The Favicon is displayed beside the title in the tab.

Favicons are added with this tag:
<link rel="shortcut icon" href="http://www.example.com/favicon.ico">

Some Browsers already support animated favicons, but an animation may annoy some visitors. Think about it before you use an animated icon, don’t just use it because you think it’s cool.

Important and Mysterious <meta> Tags

There are a few other tags for the header, which may help your website to get a better ranking:

  • GEO tags help search engine spiders to localize your website, if no other correct information is available on a webpage. The information in the geo tags are helpful for a local search, e.g. when a visitor searches for a websites with companies in a specific area
    <meta name="city"...
    <meta name="country"...
    <meta name="state"...
    <meta name="zipcode"...
    <meta name="geo.position"...
    <meta name="geo.placename"...
    <meta name="geo.region"...
    <meta name="icbm"...
    
  • <meta name="robots" content="noindex,nofollow">
    • Gives hints to the bot, if that webpage should be indexed, if the bot should follow links on that webpage and some other stuff. The parameters may be combined.
    • By the way, the combination content="index,follow" doesn’t need to be specified, as this is exactly the thing a bot intends to do
    • “index” (“noindex”) – tell bots (not) to index that page
    • “follow” (“nofollow”) – tell bots (not) to follow links on that page
    • These two parameters cannot be combined with the ones above because they serve a different purpose. Anyway, they have to be specified in the <meta name="robots" tag in order to be valid:
      • “noodp” – prevent usage of Open Directory
      • “noydir” – prevent usage of Yahoo! Directory (similar to ODP)
  • <meta name="googlebot" content=" unavailable_after:31-Dec-2010 23:59:59 GMT">
    • Tell Googlebot (and only Googlebot) that you plan to remove that page from your website, which may be usefull for time limited offers
    • Only Googlebot can understand this directive
    • The date at which the page will be unavailable should be specified according to RFC-850, e.g. “25-Aug-2007 15:00:00 EST”
  • <meta http-equiv="content-language" content="en-en">
    Defines the main language of the page. That may help e.g. if a visitor searches for a websites with companies in a specific area, or if you use many words of a different language on your page.
  • <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    Defines the charset of your website
  • <link rel="canonical" href="http://www.example.com/products" />
    It may happen, that a webpage could be found under several URLs. Imagine, there’s a website selling some kind of product, and the product description could be found with different search parameters. A bot would count that as duplicate content, which may degrade your ranking.
    To avoid this, simply add the <link rel="canonical" href="http://..." /> to the header of every webpage with the same content, linking to one page, which should be indexed.

Deprecated Tags

And now there’s a small collection of tags, which don’t help (any more):

  • <meta name="keywords">
    Deprecated, shouldn’t be used anymore
  • <meta name="Revisit-after" content="1day">
    Unfortunatelly, the search engines don’t care about that one
  • <meta name="pagerank" content="10">
    Nice try ;-)

As you see, there is a lot of Meta information you can place in the head section of your pages. Knowledge about those Meta tags can be very useful, especially when you want to specify fine-grained robots directives to your site on page level and in addition to the robots.txt file.
The next part of this series will cover optimization of the body area of your web pages.

Share

Leave a Reply

*

One Response to “Concise Guide to HTML Head Tags”

  1. Very helpful, but I must add that to many data in the header section is sometimes harmful to your rankings in the SERPS. But it´s worth trying with different solutions on two websites for ranking purposes!