Basic HTML: Meta Tags

Meta tags are important tags that should be included in the <head> of your web page document (that is, between the opening and closing head tags). They generally contain information for the browser – how to render the page, who made it, a description of it, etc. This information is also collected or used by bots when indexing your pages for search engines.

Meta tags are usually written with “pairs” of attributes — one part telling the browser what the meta tag is about, and the other explaining the content of the meta tag. Types of meta tag are usually defined by the name or http-equiv attributes, depending on whether the meta tag has a name, or is connected with an HTTP header. These are the most common meta tags and how to use them…

Content-Type

The most common — and most frequently discussed — meta tag is content-type. Content-type controls how your pages are delivered and is often used in conjunction with the right DOCTYPE. The most common content-type is text/html delivered with the HTML 4.01 DOCTYPEs. Only — because of flaky browser support — XHTML pages with the XHTML DOCTYPE also get delivered as text/html instead of application/xhtml+xml which makes the browser parse the code as HTML making any XHTML pretty redundant (not to mention forgiving: allowing errors that serving a page as XML would not allow). Which content-type you should use to be “right” is a long and often boring road which I really can’t be bothered to travel down — I always use text/html irrelevant of the doctype. So, techno-babble aside your content-type meta tag should look a little like:

For HTML users:
<meta http-equiv="content-type" content="text/html; charset=utf-8">

For XHTML users:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

(utf-8 is the recommended character set to be used with XHTML, I use it because it’s the easiest to remember.)

Description

The meta description tag is quite important in identifying your web page. Admittedly, it doesn’t carry the same weight with search engines as it used to, but descriptions ARE searchable. By using a unique and identifying description accurate for each page, you are more likely to rank higher for keywords found in the description/page than if you used a generic description on every page of your website. Search engines often use the listed description underneath a page’s title in the results of a search too, so don’t forget to make the page sound good!

For HTML users:
<meta name="description" content="a descriptive tutorial on basic meta tags">

For XHTML users:
<meta name="description" content="a descriptive tutorial on basic meta tags" />

Keywords

Keywords are also dying when it comes to ranking in search engines, but are important in the identification of pages within a website. It hasn’t been proven whether all search engines have ditched them in favour of more complex algorithms so add them anyway. You can specify as many keywords as you like (although, apparently, Google blacklists people for “keyword stuffing”) and these must be separated by commas:

For HTML users:
<meta name="keywords" content="html, xhtml, meta tags, content-type, keywords">

For XHTML users:
<meta name="keywords" content="html, xhtml, meta tags, content-type, keywords" />

Controlling Bots/Robots

If you’re one of those strange people that doesn’t like the idea of search engine robots spidering your web site, or want to block certain pages from being spidered, you need the robots meta tag. Using this meta tag you can control whether or not a page is indexed, and whether or not links on a page are followed. The default behaviour is “all” — all pages are indexed and all links followed — but you don’t need to specify a robots meta tag just to tell it this. Let’s see the possible combinations:

For HTML users:
<meta name="robots" content="all,none,index,noindex,follow,nofollow">

For XHTML users:
<meta name="robots" content="all,none,index,noindex,follow,nofollow" />

While it is possible to use multiple directives separated by commas as above, it makes no sense to use them all or to have something like “all,none”. Unless you want something like “index,nofollow” or “noindex,follow” I suggest ignoring this tag.

Resources

For more information and other meta tags, you might be interested in:

Speak Your Mind

*