Breadcrumbs

Styling Our Heads with Meta Tags

Don't leave your <head> tags dry with only a lonely title tag! Meta tags allow you to describe your website and pass information along to web devices. Serving in a variety of scenarios from freeing your website of frames to redirecting a user, meta tags are hard to live without.

Meta Tags Aren't Magical

Contrary to popular belief, <meta> tags aren't a magical solution. The most common use of meta tags is to list keywords and a site description, supposedly to be read by search engines. Sadly meta tags aren't that powerful, most search engines don't even read meta tags.

Even though meta tags aren't picture perfect, as many amateur web designers are lead to believe, they are still useful.

Basics of Meta Tags

Before we begin with the uses of meta tags it is proper to know their basics. Meta tags are placed within the <head> tag of a document. They typically have two attributes - name and content. The value of the name attribute declares the meta subtag, and the content sets the value of that subtag.

Code: XHTML

<meta name="author" content="John Smith" />

Some meta tags use different attributes, although they share the same purpose as name and content. If you're using XHTML remember that meta tags are self closing.

Describing Your Document

The main purpose of meta tags are to describe your document, but hide that information from the visible eye. Three common meta subtags are description, author, and copyright. Placing these meta tags in your head tag allows you to describe your document:

Code: XHTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>First Web Page</title>
    <meta name="author" content="Ethan Poole" />
    <meta name="description" content="Sample web page demonstrating the use of meta tags to describe a document." />
    <meta name="copyright" content="2004-2005 Lowter" />
</head>
<body></body>
</html>

Now your page contains some basic information of what it is about, the author, and its copyright. Remember that most search engine crawlers don't use this information to render their results. Therefore, the choice of including them is yours, and remember that there is no harm in including them.

Listing Keywords

Seven out of ten websites will use meta tags to list keywords. When search engines first arrived they relied on the meta subtag keyword to render results. A common myth goes around to beginning web designers about using the meta tag to list your keywords. Sadly, today most search engines don't take into consideration meta tags. Although some smaller search engines will use the meta tag, so it is good to include it.

To list keywords we use the following:

Code: XHTML

<meta name="keywords" content="lowter, web design, programming, php, xhtml, css, graphic design, articles, blogs, community forums" />

You separate each keyword by a comma in the content attribute's value.

Redirecting A User

Meta tags enable you to refresh your page to either the current URL, or another one. Using the refresh subtag we can set our page to refresh at set intervals:

Code: XHTML

<meta http-equiv="refresh" content="300" />

Constantly refreshing your page isn't practical in every situation, although it is beneficial for websites with ceaseless content flow such as a stock market viewer. The value of the content attribute is the delay in the redirection measured in seconds. The above meta tag would refresh the page every 300 seconds, or every five minutes.

The refresh subtag also allows you to redirect users to a different URL:

Code: XHTML

<meta http-equiv="refresh" content="12; url = http://www.lowter.com" />

Redirecting a user to a new page is useful in situations where you might have moved or a page's URL has changed. Now you can easily redirect your users to a new page, without server configuration or scripting.

Free Your Website from Frames

You may have seen websites that will place other websites within a frame, such as some search engines or directories. Not only is this bad-mannered in some ways, but it can be annoying and ruin your design. Meta tags allow you to break your website from frames:

Code: XHTML

<meta http-equiv="window-target" content="_top" />

Most web browsers support this meta subtag to break your website from frames. If you find that frames often break your layout, then you should include this meta tag in your head tag.

Summary

Meta tags may not be a magic solution as some believe, but they still serve a useful function. With just one tag you can improve your entire website in a variety of ways. You've taken a look at some of the uses of the <meta> tag, although there are others.