Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

About the <tt>meta</tt> Element

Last updated Oct 17, 2003.

The meta element is an element used in HTML and XHTML documents for a variety of functions that are related to the document, but are not displayed within a browser. Typically, the element is used to define the author, set up keywords, and provide a description for search purposes. Other uses include identifying character sets and redirecting or refreshing pages.

The meta element appears within the head portion of a document. It typically appears above any scripts or style, although the order is really unimportant.

Keywords and Description

A lot of the focus on the meta element has grown out of its role in marking up documents for search engine purposes. By providing a set of keywords and a description for each document on a Web site, you enable certain public search engines to easily read the information within the tag and catalog it.

Although this feature has helped in the past (and currently help) improve ranking on search engines, the use of proper meta information does not work alone—and in some cases, it isn't cataloged by certain engines. What's more, search software that you implement on your site might very well use the meta information for its own cataloging.

Listing 1 shows an example meta element with keywords. Different engines have different rules on how to use keywords, but a good rule of thumb is to be sure you don't repeat the same individual word or term twice, although you can use words in different term combinations such as "web design" and "web development".

Listing 1 Keyword Sample in HTML, from the W3C's Web Site

<meta name="keywords" content="W3C, World Wide Web, Web, WWW, Consortium, 
computer, access, accessibility, semantic, worldwide, W3, HTML, XML, 
standard, language, technology, link, CSS, RDF, XSL, Berners-Lee, 
Berners, Lee, style sheet, cascading, schema, XHTML, mobile, SVG, PNG, 
PICS, DOM, SMIL, MathML, markup, Amaya, Jigsaw, free, open source, software">

Listing 2 shows an example meta element description. In this case, you see that the example is written in XHTML, with the trailing slash at the end of the meta element (because meta is an empty element and must be terminated in XHTML). Note that descriptions are typically 50 words or fewer, with some developers recommending around 25 words. Many search engines use this description when returning URL results, assisting searchers in better understanding what the page contains.

Listing 2 Description Sample in XHTML, from the W3C's Web Site

<meta name="description" content="W3C is about 400 organizations leading the 
World Wide Web to its full potential. Founded by Tim Berners-Lee, the 
Web's inventor. The W3C Web site hosts specifications, guidelines, 
software and tools. Public participation is welcome. W3C supports 
universal access, the semantic Web, trust, interoperability, 
evolvability, decentralization, and cooler multimedia." />

Whether you're using meta for public or local searches, it's an important part of document management and it's a highly recommended practice to follow.

Identifying Character Set and Content Type

Another important use for the meta element is to identify character sets, which are the characters that will be used within the document. Different sets are required for different languages.

Ideally, character sets are defined on the server, not within the document. But this is not always set up properly, so using a meta element to ensure that the proper character encoding is used is helpful.

Simply add the meta element with the http-equiv and charset attributes to the head portion of your document as follows:

<meta http-equiv="Content-Type" content="charset=utf-8" />

In the above instance, the character set is UTF-8, which is a global character set. For more information on character sets, please see the Resource section at the end of this section.

You can also identify the content type of the document, which in the case of HTML or XHTML will be text/html. The following sample shows both the character set and content type:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

As with any meta element, these will be entered into the head portion of your document.

Other Uses

There are several other uses for meta elements.

By simply by adding a value to the name attribute, you can add a range of information, including the following:

  • generator. This option allows you to define the authoring tool used for the document:

  • <meta name="generator" content="Dreamweaver MX 2004" />
  • author. This option allows you to define the author of the document:

  • <meta name="author" content="Meryl K. Evans" />
  • copyright. You can use this to add information about the document's copyright:

  • <meta name="copyright" content="&copy; meryl.net" />
  • date. This option allows you to include the date of authorship:

  • <meta name="date" content="2003-11-05" />

To tap into meta elements and how they relate to http headers, you can modify the http-equiv attribute in a variety of ways:

  • expires. You can allow a page to send an expiration date and time via the http header upon a request for that page. This assists in caching:

  • <meta http-equiv="expires" content="Tue, 20 January 2004 14:25:27 GMT" />
  • refresh. To refresh a page regularly (such as with portal sites that update information from the server every quarter hour or so), you can use the following meta data, changing the numeric value to the time you want, and the URL to the URL of the document in question:

  • <meta http-equiv="refresh" content="10; url=http://www.mysite.com/" />
  • redirect. To redirect a page automatically, simply add the "refresh" value as above, but instead of refreshing to the same page, include the URL of another location:

  • <meta http-equiv="refresh" content="10; url=http://www.anothersite.com/" />

Finally, some search engines support the robots attribute name, allowing you to make certain determinations about how search engines will use your meta information. The basic syntax in this case is as follows

<meta name="robots" content="x, x" />

where x,x represents the value options for the "robots" attribute value. You have a number of options to place in the content area and you can combine options as long as they are separated with a comma. Here are the options:

  • index. This attribute specifies that the search engine robot index the page:

  • <meta name="robots" content="index" />
  • noindex. This option revents the search robot from indexing the page:

  • <meta name="robots" content="noindex" />
  • follow. This option specifies that the page's links should be followed by the engine for cataloging:

  • <meta name="robots" content="follow" />
  • nofollow. This option specifies that links within the document should not be followed:

  • <meta name="robots" content="nofollow" />
  • all. This value is the same as index,follow:

  • <meta name="robots" content="all" />
  • none. This value is the same as noindex,nofollow:

  • <meta name="robots" content="none" />

Additional uses of meta elements include some less-used options, which you can read about via the references in the Resources section later in this guide.