META Tags

Killersites Newsletter Archive: March 4th 2004

META TAGS

"A prefix meaning to provide added meaning "

Ok, what does that mean?

Now in English

Think of it as a way to 'tack-on' or to attach extra information about something. In our case, since we are talking about web sites, it is a way to attach extra information about a web page. Let's move on to the 'formal' explanation.

What are META tags when it comes to web pages?

META tags are used to communicate extra information about the web page that a human visitor will not see directly, but which may impact what happens on the web page.

Meta tags come in two basic flavors

<META HTTP-EQUIV =" name " CONTENT=" content ">
<META NAME =" name " CONTENT=" content ">

META tags always go in the <HEAD> section of the web page; that is to say, in-between the <head> and </head> tags that are found near the top of every web page. Here is a basic web page template you can use to try the meta tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>My Practice HTML Page</title> 


</head> 

<body> 
 

</body> 

</html>

Nerd-level details about Meta tags

If you really want to get into the details on how meta tags should be built, check out these links:

4.2. Element and attribute names must be in lower case
4.3. For non-empty elements, end tags are required
4.6. Empty Elements
XHTML 1.0 spec: http://www.w3.org/TR/xhtml1/

The 'META HTTP-EQUIV' type of META tags

META tags with an HTTP-EQUIV attribute are like HTTP headers (HTTP headers are special information that the web server sends to the browser about the web page the browser is trying to see. We don't actually see this information; it all happens in the background).

Usually, this type of META tag controls what the browsers do, like controlling when the browser should load a page from it's cache or to download a new version from the server:

<META HTTP-EQUIV="expires" CONTENT="Fri, 26 Feb 2001 09:23:47 GMT">

The above meta tag tells the browser that the page will expire on Fri, 26 Feb 2001 09:23:47. Since we are way past this date the browser should go to the server and get a new version of the page.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

This is another META tag that tells the browser to avoid using its cached version of the web page, and that it should always get the latest version from the server. There are different ways of doing this because the browsers don't always do what there supposed to.

<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

This is yet another way to tell the browser to avoid using the cached pages, the old-fashioned way for older servers. The bottom line is if you want to ensure that your visitors always see the latest pages you should include all three.

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://www.killersites.com/">

This is one of my favorite tags. This META HTTP-EQUIV tag tells the browser that in three seconds it should automatically load the page listed in the URL attribute; in this case http://www.killersites.com. This is a useful tag when you need a simple redirect. If you recall, I used this on the page you used to sign up for this newsletter.

With this tag you set the delay (before someone is redirected) in seconds (we used three seconds in the above example) to any destination on the web. Create a basic page for yourself and give it a go.

<META HTTP-EQUIV="Window-target" CONTENT="_top">

Lets say you don't want your page to appear inside frameset; this tag will force the browser to 'break-out' of the frameset. This META tag works like the 'target' attribute of a link tag.

<META HTTP-EQUIV="Content-Language" CONTENT="en-US">

This META tag tells the browser that this page is in English US style (that is to say the US dialect). The browser will make adjustments for this language so that the page is displayed properly.

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">

This META tag tells the browser that the document (the web page itself) is a web page made with plain old HTML text; this is the default setting (what the browser assumes). I should point out that you can change the content-type, this will cause the browser to, for example, display an excel spreadsheet:

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="application/vnd.ms-excel">

This META tag will cause the browser to try and launch Microsoft Excel (it can only do this if the person viewing your web page actually has Excel installed on their system). To format the page to display a proper excel spread sheet is a little beyond the scope of this newsletter; I mention it to open your eyes to some possibilities you may have not been aware of.

To practice setting content type with the META tag try his:

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/plain">

This will cause the browser to display any text in the web page as plain text, even your HTML.

The 'META name' type of META tags

META NAME tags include descriptions and keywords that gives more information about the page for things like search engines to use.

Some commonly used META tags for the search engines are:

<META NAME="AUTHOR" CONTENT="Stefan Mischook ">

This META tag tells us the author of the web page is me, Stefan Mischook.

<META NAME="COPYRIGHT" CONTENT="&copy; 2004 Stefan Mischook ">

I think you can guess what this META does!

<META name="description" content="A description of what this web page is about ">

The above description tag gives the search engines a 'description' of the web site. Of course there are no guarantees that the search engines will actually pay attention to that.

<META name="keywords" content="webpages, websites, html, Flash, Dreamweaver ">

Search engines categorize your web site based on the keywords it finds in your web pages. When someone searches (on a search engine like Google, for example), for those same keywords, your web site may pop up in the list, if it has a good rank.

These days none of the search engines will pay attention to what the META name keywords contain. It is pretty much useless because when this META tag first came out and some search engines actually used it, some 'crafty' web masters decided to put in misleading keywords to get more traffic. In response, the search engines decided to ignore this meta tag.

So some of you are saying, 'why tell us about a useless META tag!?' I have a few reasons.

It could be that one or two search engines (AltaVista, Infoseek) use this META tag just a little bit, so it can't hurt to have them.
In your exploration on the web, you may find some old articles on this meta tag and how important it is. I just want to be sure you all are up to date on this.
My goal is for you to understand META tags, by seeing the 'META name' tag in it's various 'flavors'. Hopefully, it will sink in.

<META name="ROBOTS" CONTENT="NOINDEX,FOLLOW">

This tag stop the search engines from indexing the web page. Maybe you have a web page that you don't want people to be able to find on the web directly; this tag will help. The 'FOLLOW' tells the search engine that it can follow the links on the page.

<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">

This META tag tells the browser that it can index (snoop) the page, but cannot follow the links.

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

This META tag tells the browser that it cannot index the page AND cannot follow the links. Changing the content to "INDEX,FOLLOW" will, of course, allow both.

<META NAME="ROBOTS" CONTENT="NONE">

This META tag tells the search engines to just ignore the page.

<META NAME="ROBOTS" CONTENT="ALL">

This META tag tells the search engines to index the page.

<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

This is a Google specific META tag; it tells the Googlebot to not cache and archive the page.

If you liked the article and you want to see more let me know!

Stefan Mischook.