xHTML Meta Tags

In the previous page of these tutorials, titled Inside the Head of a Web Page, we covered pretty much everything inside the <head> section except <meta> tags. Here, you will learn some of the different uses for these tags.

Keywords and Description

Two of the most common uses for <meta> tags are for adding a description and keywords for a page, to help search engines index pages better. Due to many people doing what’s referred to as “keyword spamming,” some search engines don’t pay much attention to the meta keywords, if they even pay attention to them at all. However, they still seem to give weight to the meta description, which should be a very short summary of the content on your page, and also match the content that is on that page.

This is how a typical meta description and meta keywords would look:

<meta name="description" content="In this tutorial, you will learn how to use meta tags in xHTML for SEO, robots." />
<meta name="keywords" content="xhtml, learn xhtml, xhtml tutorials, meta tags" />

Notice how I’ve used keywords in both the keywords and the description, and how you will also find those same keywords on this page. For Search Engine Optimization (SEO), it’s better to use a few highly-targeted words and phrases in these two meta tags to increase the weight of each one, rather than many generalized words that will only water down the good ones.


No, not those robots. I’m talking about the bots (aka spiders) that crawl around the web, collecting information from websites. Some bots are spambots, which go around collecting email addresses that are posted openly on websites, while other bots can be very beneficial to the success of your website. Googlebot is one such bot, which crawls through sites in order to index them in their search engine.

You may decide for some weird reason that you don’t want any bots crawling your website. Then again, you may want to allow only certain bots, or you may want to exclude only certain bots, such as known spam bots.

Before I go any further, there is a more effective way to exclude robots, by adding a “robots.txt” file to your website’s root directory. Yes, this time the filename does matter, because robots specifically look for this file before entering a website. However, if you don’t have that kind of access to your website, you may be limited to using the <meta> tag for this.

To allow all bots to index your page, as well as follow all links within it:

<meta name="robots" content="index,follow" />

To prevent bots from indexing your page or following any links, which I wouldn’t recommend unless you’re trying to keep your website out of search engines:

<meta name="robots" content="noindex,nofollow" />

To allow all bots to index your page, but not follow any of the links on it:

<meta name="robots" content="index,nofollow" />

To prevent bots from indexing your page, but allow them to follow links within it:

<meta name="robots" content="noindex,follow" />

Instead of “robots”, you can specify certain robots, such as googlebot, slurp, msnbot, teoma, or others.

<meta name="googlebot" content="noindex,nofollow" />

I repeat, I would not recommend excluding googlebot unless you don’t want people to find your site, but that’s how it’s done if you choose to do it.

In addition to index/noindex, follow/nofollow, there is also noarchive (it won’t cache the page), nosnippet (description on a search results page), or noodp.

noodp? Google and some other search engines use the Open Directory Project as a source for descriptions in their search results. By specifying noodp (noODP = no Open Directory Project), the search engine will use what’s in your meta description. Or, if no meta description is supplied, it will use content from the page itself.

Not all bots obey all of these commands, but it doesn’t hurt to try.


Possible values for the http-equiv attribute are:

AllowDefines the methods supported by the server
Content-EncodingDefines additional content-encoding for the document
Content-LengthDefines the size of the document (in bytes)
Content-TypeDefines the MIME type of the document (like text/html)
DateDefines when the document was created
ExpiresDefines when the document will be considered obsolete
Last-ModifiedDefines when the document was last modified
LocationDefines an absolute URL for the document
RefreshDefines a time interval for the document to refresh itself
Set-CookieDefines a cookie-value
WWW-AuthenticateDefines authentication rules returned by the server

Since I don’t know all of those off the top of my head, I obtained that list from w3schools.com.

In addition to http-equiv and its value, you must also add a content attribute and a value for that content.

To give you an example of how the http-equiv attribute works, let’s say you have a web page advertising an event that will occur on a certain date. You won’t need that page showing up in search results after the event is over, so you might want to tell search bots when the page “Expires”. This is how you could do that:

<meta http-equiv="Expires" content="Fri, 8 May 2009 16:00:00 GMT" />

Miscellaneous stuff that you can make up

View this page in Firefox, right-click on the page, and choose “View Page Info.” There, you will see some whatever information is included in <meta> tags. When using the name attribute in a meta tag, the value of name, as well as the value of content, can be whatever you want it to be.

Try this meta tag out in your practice page (remember, it needs to go somewhere between <head> and </head>), then view it in Firefox and bring up the page info like you did with this page:

<meta name="What are you doing?" content="I'm learning how to write code!" />

You have now graduated the guided portion of these xHTML and CSS tutorials, but stay tuned for more tutorials to come!