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.
<title>Page Title (max 70 char): Keyword | Category | Website name</title>
<meta name="description" content="Website description in max 255 characters,
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.
<link rel="stylesheet" href="/css/css1.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="/css/css2.css" type="text/css" media="screen"/>
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?
About the author
Gergely Marton, 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.
- Kizi 3 on Inspiration: The Art Of Joshua M. Smith
- Y8 on Inspiration: The Art Of Michal Lisowski
- Y8 on Sleek Admin – a clean admin skin for your backend
- yepi2 on Inspiration: The Art Of Joshua M. Smith
- yepi1 on 20 Quality examples of high contrast in web design
- Inspiration: The Art Of Joshua M. Smith
- Freebie: Material Layer Styles
- Inspiration: The Art Of Ben Hewitt
- Free Fonts For Your Next Design by Fontfabric
- Inspiration: The Art Of Michal Lisowski