META Tags Tutorial

Introduction to using META tags in web pages

META Tags are HTML tags which provide information that describes the content of the web page a user will be viewing. Some search engines use META tag information when indexing sites, however listing on sites like Google are mostly based on page content and links to and from your site.

The Description and Keywords META tags are the most important meta tags to have in your pages.

Where to put META tags

Meta tags should go in the head area of the HTML page, after the title tag.

Example:
<html>
<head>
<title>web page title here</title>
<meta name="description" content="put your description here" / >
<meta name="keywords" content="put your keywords and key phrases here" / >
</head>
<body>
page content goes here
</body>
</html>

HTML and XHTML changes to META tags.

If you are designing your web pages using XHTML 1 rather than HTML 4 then all META tags now need a closing tag at the end. All tags also need to be lower case.

e.g. <meta name="description" content="Your description here" / >

the space followed by /> closes the meta tag.

This is a shortened version of
<meta name="description" content="your description here"></meta>

On older web pages - those built to HTML 4 and older standards you may come across unclosed META tags and upper case tags.

e.g. <META name="Description" content="Your description here">

There should be a doctype statement at the top of your page code which tells the browser (and also you) which spec the web page is built to.

All the code on this page is compatible with XHTML pages as this is the spec that most professional web designers are now working to.

Description META tag

The Description META Tag is a general description of what is contained in your webpage

Search engines that support META tags may display the Description META tag along with your title in their search results.

Description tag usage example:

Length - up to 200 characters or around 20 words

Try to use important word and phrases from your keywords and title tags at the start of your description tag. The description tag along with keywords tag is the most important META tag in your document and should always be used.

Important

Keywords META tag

The Keywords META Tag is a list of keywords that relate to the content of your web page

Keywords tag usage example:

Length - up to 80 characters (less for some search engines & directories). Words or short phrases separated by commas or spaces.

Using less keywords will give each keyword a stronger influence. You should always put the most important keyword at the start of the list.
Keywords should also appear in the description tag, the title tag and in the page content.

Important

Revisit META tag

The Revisit META Tag tell the search engine how often they should revisit your webpage for re-indexing

Revisit META tag usage example

Optional

Robots META tag

The Robots META Tag tell search engines if they should index and or follow the links on this page.

Robots META tag usage example

possible attributes : noindex | index | nofollow | follow

An alternative is to use a robots.txt file on your site

Optional

Refresh META Tag

The Refresh META tag is a way to redirect users to another webpage after X number of seconds.

Many search engines dislike this page and will not follow links or index pages, so it is probably best to avoid using this on pages which you want indexed by search engines.

Refresh META tag usage example

Use not recommended

See the SEO page for more information on Search engine optimisation and META tags.

There are more META tags which you can use.
See the links below for more information on META tags and their uses.

Web Design Group - info on META tags

Submit corner - details on META tags and a meta tag code generator

More information on XHTML

Web Design Articles and Tutorials

Design Training