October 15, 2009

The SEO series: HTML Header – SEO & usability

Posted in Tutorials, Usability by Gergely Marton | Tags: SEO, Tutorials, Usability, Web analytics

This article is the first from our “SEO series” we intend to write this week. The articles from this category will cover SEO tips from our good friend Claudiu Murariu and helpful information about today’s analytics and optimization tools available on the web.

The elements in a site’s header, or so called <HEAD></HEAD>, is ignored by many web programmers, but it is very relevant the way this header is constructed from a SEO & Usability point of view. How well the header is constructed and structured will be a deciding factor in the process of reducing your headaches in the future.

Before we get to the header, we must make sure we have set a DOCTYPE for our HTML document, which will help browsers identifying the type of the (X)HTML code used in writing it and avoiding rendering errors especially in modern browsers.

The following example of constructing a DOCTYPE is about XHTML version 1.0:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

If you read the W3C standards you will notice that only the <title> element is mandatory in the header of any HTML document. Initially this tag was used by the browsers to identify and display the title of the documents but later the search engines begun using this tag to display the title of the search results. For the description of the search results, Google and other search engines use the meta description tag to display the information, if such a tag is defined in the document, otherwise they display random and truncated elements from the content of the respective page. None of the major search engines use the meta keywords tag anymore.

It is a good idea to use title and meta description as the first two lines in our header to ensure that search engine spiders won’t get in any difficulties reading this information.
<head> <title>Page Title (max 70 char): Keyword | Category | Website name</title> <meta name="description" content="Website description in max 255 characters, preferably 100"/>
On important aspect which the majority of people is not considering is the localization of the website. As long as the search engine doesn’t have a clue that the website is written in another language or that it is offering information especially for another country, the website can be easily saved in a totally different category than it was intended to be. For example we’ve seen websites getting fantastic results after an optimization campaign, but in Republic of Moldova, not in Romania, as intended (very similar language, different diacritics). To avoid such cases and to assure that all the regionally significant content is indexed correctly (ex. Diacritics), the next two lines in our header, for content written in French for example, should be:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="content-language" content="fr"/>
Also, don’t forget to set the same language at the localization elements in Google Webmaster Tools.

We’ve seen many cases where indications regarding the indexing of a website are still set up in the header. The best approach is to define these indications in a file called robots.txt in your web server’s root directory, so you can keep your document’s header compact and optimized for faster page loading. These indications should be used only if you don’t want the search engine spider to index some of your pages or directories, or to indicate the correct navigation for the links in a specific page.
Suggestions on implementation of the meta robots tag in such cases, can be found at robotstxt.org.

Now that we have completed the part about search engines, we can move on to the part where usability comes in. It is a fact that the user can’t see the information written in our document’s header, but the way it is structured affects the user directly.

One of the most relevant factors is the load time of the page. The browser will make a separate call to the server for every style sheet and every javascript document we have included in our header. the more calls to the server the more time will take the page to load. Our recommendation is to use a maximum of 2 files for defining styles (a maximum of 8kb each) and 2 files max. for javascript functions at the lowest file size possible.
<link rel="stylesheet" href="/css/css1.css" type="text/css" media="screen"/> <link rel="stylesheet" href="/css/css2.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scripts/script1.js"></script> <script src="scripts/script2.js"></script>
It is very important NOT to embed any inline CSS and JavaScript code in your header. All these functions and styles must be externalized as much as possible. Search engines are indexing the whole code (irrelevant information) from a page but not the external files. This rule also applies to the case where you need to define special styles for Internet Explorer. The correct code syntax in this case is:
<style type="text/css"> @import url(css/ie6.css); </style>
I recommend adding one last element to the HEAD of your document, although this element is not used by all the browsers and it is more an esthetic definition, the icon of the webpage.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
For most of the developers I worked with the coding of a website begins with the <body> tag, the only thing they use in the <head> is the validation of the HTML code.

Have you ever tried to opitimize your header? Do you know any other tricks or tips?

Author: Gergely Marton (20 Articles)

Marton Gergely is a self-tought web designer and developer with over seven years of experience. He owns his own little web design agency WebGurus, and runs this blog in his spare time. Usually the work gets more important for him than anything else, but he struggles to get some time to read and to play his violin.

2 Comments to “The SEO series: HTML Header – SEO & usability”

November 20, 2009 at 2:54 pm
Thomas Mayman says:

I found this extremely useful in clarifying a few issues i was concerned about when optimizing my site, i will put them into practice now – thanks!

Also- it may be worth you guys adding social links to easily bookmark/share your pages
November 20, 2009 at 2:57 pm
Gergely Marton says:

Hello Thomas!

Thank you for your feedback and good luck in optimizing your website.
We are working on our new theme right now where visitors will have all the new and fancy stuff a design blog should have.

Thanks again!