Practical Web Design - Top 15 META Tag Tricks
About the Author
Mike Tuck
Mike is an educator, freelance writer, and self-taught PC user who
maintains a Windows resource site at http://www.toejumper.net. His hobbies include
basketball, politics, and spoiling his cats.
By: Mike Tuck
December 6th, 2002
When you write a Web document, you can get by without META tags if you have to. You can simply leave your <HEAD> section blank (except for the TITLE) and go straight for the content, like this:
<HTML>
<HEAD>
<TITLE>My Magnificent Web Page</TITLE>
</HEAD>
<BODY>
...and go from there. The document will display nicely and the boss will gasp in wonderment at the glorious Web document you've created. So why even worry with META tags? After all, it's not like they show up or anything.
Well, let's find out.
According to Webopedia [1], a META tag:
"provides information about a Web page. Unlike normal HTML tags, META tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page's content. Many search engines use this information when building their indices."
And according to the World Wide Web Consortium [2],
"Meta data is machine understandable information for the Web."
Luckily, we don't have to understand the ins and outs of META tags to use them in our pages.
Note that META tags are "singletons"; they don't require the use of closing tags like </META>. They have to go within your <HEAD></HEAD> section to function.
Keywords and Descriptions
The most important META tags give search engines something to latch onto when they try to index your page. The two META tags that perform this function are KEYWORD and DESCRIPTION tags. The KEYWORD tag provides keywords that search engine users put in to find pages like yours. The META tag for this page might look something like this:
<META NAME="keywords" CONTENT="META tags, Practical Web
Design, HTML, tips, tricks, SitePoint, Michael Tuck">
(Note: as pointed out by a vigilant SitePoint Forums [3] member, if you wish to adhere to strict XHTML standards, your tag would look like this:
<meta name="keywords" content="META tags, Practical Web
Design, HTML, tips, tricks, SitePoint, Michael Tuck"/>
Note that the attribute NAME defines what kind of META tag is being used, and the CONTENT attribute gives a list of key words and phrases that describe your page. Also note how quotation marks are used.
You should put some serious effort into deciding exactly what keywords your page will use. Scour a thesaurus, brainstorm with friends or colleagues, and make wise decisions. Put the most useful words first. These keywords will go a long way in deciding where your site ends up in a search engine's results listing.
The DESCRIPTION subtag is very similar, except that instead of listing key words and phrases, you provide a short, pithy description of your page. This description will be used by search engines to describe the page, so you should put some time and thought into crafting the perfect description for your Web page. This page might have a DESCRIPTION tag something like:
<META NAME="description" CONTENT="Column One of SitePoint's
Practical Web Design series; a discussion of META tags
and how they're used in Web documents. Written by
Michael Tuck and published by SitePoint.com, your
source for Web design information.">
The DESCRIPTION tag is a great place to put your organization's slogan or another promotional or descriptive phrase that catches the reader's attention. Remember, most search engines will only use the first 150 characters or so. Focus first on the page's content and not your organization's slogan.
Be warned: most search engines have rules against META tag "spamming," which means you shouldn't try to overwhelm a search engine by repeating the same keyword or phrase over and over again. The best way to handle this is to keep your keywords and description short and concise, and avoid repetition.
Here's something to try: why not right-click this page, choose View Source, and see what META tags SitePoint chose to build into this article's HTML code? I didn't code this page, the SitePoint gurus did, and I bet you dollars to donuts that their META KEYWORDS and META DESCRIPTION tags are substantially different from the examples I cited above -- more suitable for SitePoint contt, and probably better choices than the ones I tossed off.
It's worth noting, as did several SitePoint Forums members, that of the four most popular search engines -- Google [4], AltaVista [5], FAST [6], and Inktomi [7] -- only one, Inktomi, still indexes Web pages using the META KEYWORDS tag. Some people, including Danny Sullivan of Search Engine Watch [8], advise us not to bother writing META tags for the search engines (though conversely, it's probably not worth the effort to remove them from your existing pages).
On the other hand, it's worth noting that the Inktomi engine powers a number of smaller search engines, and other search engines such as Teoma [9] may still be using META tags to help index their pages. Plenty of intranets and other subsidiary site searches also use META tags. And Inktomi itself is still a force to be reckoned with. So the decision is yours.
Is it worth the time and effort to create META KEYWORD and DESCRIPTION tags? The answer depends on the audience for your site and what search engines and strategies will be used to access the page. One thing's for certain, it doesn't hurt to include them. If you want to cover all your bases, go ahead and add them. Just be aware that they may not be worth the time and effort you spend crafting them.
Refresh and Redirect
Here's a little tag that you'll find useful. The REFRESH subtag can be used to either send page visitors to an entirely different page, or to refresh the page's contents periodically -- say, every 30 seconds or whatever.
An example might be of a small software firm, Our Cool Software, that began marketing its wares via a free Geocities Web page. The firm sells enough software to make buying its own .COM Web page feasible, so they do so. Now, instead of logging on to:
http://www.geocities.com/OurCoolSoftware/,
users will log on to:
http://www.OurCoolSoftware.com/
But what about the users who already know and use the old Geocities address, and have it bookmarked? Well, after you shift your site's content to the new URL, you write a META REFRESH tag for the old page. This forces the old page to "redirect" the user to the new page automatically, with a time delay specified in seconds, like so:
<META HTTP-EQUIV="refresh" CONTENT="10;
url=http://www.ourcoolsoftware.com">
Write a little bit of text to alert the surfer that they're being transported to a new page and voila! You've redirected your site visitors to the new page with very little muss nor fuss:
We've moved to a bigger and better Website! You will be transported to our new site in 10 seconds. When you get there, don't forget to bookmark our new page!
In 10 seconds or so, your site visitors are at your cool new digs, without having to know the new URL. You've done the redirection for them. And if you'd rather send them to the new page in 2 seconds, or 30, or whatever, just change the number in the CONTENT section of the tag to whatever you like.
Personally, I find 10 seconds is a good choice -- long enough for the reader to read your text letting them know what's happening and to bookmark the new site, but not long enough to make them impatient. And some people get annoyed with a 2-3 second redirect -- if for whatever reason they don't want to visit the new page, they don't have the chance to hit the BACK button. Also, if they don't realize that they're being redirected, they may wonder if they're not being hijacked to a site they don't want to go to -- a porn site, perhaps, or a site that threatens their computer's security. It's always best for the site visitor to know what's happening before it happens, and let them have the time to make the decision of whether or not to let the redirect happen. Besides, it's common courtesy, and these days, courtesy counts for a lot.
Note: In a very few cases, the REFRESH tag won't work, for arcane reasons that I won't go into here. So you might add a line such as this:
If your browser doesn't take you to our new site in a few moments, click on the link below to go to our new site. Once there, don't forget to bookmark us!
www.ourcoolsoftware.com/
Of course, the plain-vanilla version of the REFRESH tag has its uses as well -- the idea is to automatically update the page at selected intervals. This is useful for pages featuring stock market information, say, or news feeds, or ad content, or any information that changes in a matter of minutes. Here's the tag:
<META HTTP-EQUIV="refresh" CONTENT="600">
The 600 in the tag indicates the number of seconds between automatic page reloads, which in this case translates into 10 minutes between reloads.
Another, more creative, usage of the REFRESH tag is to take the visitor on a "tour" of a sequence of content. Say that you want to take your visitors through a set of photos of your visit to Uluru (Ayers Rock). You can create separate HTML pages of each photo and its accompanying text, and use the REFRESH tag to take the visitor from page to page without them having to touch their mouse. If you decide to try this, make sure to allow enough time for each image to load and for the visitor to read the text. You'll have to judge how much time is enough -- too little time, and they'll feel yanked through one page to the next, and too much ime will strain their patience.
By the way, don't worry about the meaning of the tag attribute HTTP-EQUIV. You can use the attribute without knowing that it gives the name of a "name/value" pair, and that it tells the server to treat the pair as part of the MIME (Multipurpose Internet Mail Extensions) document header. See, aren't you happier not knowing any of that?
Keep Your Page Out of Other Sites' Frames
Some sites are bad-mannered enough to make other pages appear within their own framesets. Sometimes this is by design, other times it's due to bad coding. You can make your page break out of another site's frames by including the following tag (make sure it's in every page of your site):
<META HTTP-EQUIV="Window-target" CONTENT="_top">t
Other META Tag Usage
Here's some other META tags for you to use if you see a need:
META Author
Identifies the author of the page.
<META NAME="Author" CONTENT="Michael Tuck">
META Date
Identifies the date the page was created.
<META NAME="Date" CONTENT="November 17, 2002">
META Copyright
Sets the copyright date of the page.
<META NAME="Copyright" CONTENT="2000-2003 SitePoint,
Inc. All rights reserved.">
Expiration
If you want to have your page "expire," here's how to set it:
<META HTTP-EQUIV="expires" CONTENT=
"thu, 31 DEC 2002 00:04:00 EST">
What this means in the real world is that your visitors' browsers will use the cached version of your page, if available, until the specified date and time are reached, at which time the page will reload from the server the next time it's visited. To force your visitors' browsers to reload your page from the server (i.e. always use the most recent content) on every visit, use the following:
<META HTTP-EQUIV="expires" CONTENT="0">
META Cache-Control
This tag keeps your page from being automatically cached by servers or browsers. AOL, for example, usually stores cached pages on its servers, which means that AOL users may view cached (i.e. old) copies of pages without being able to see the updated versions. Although caching pages speeds loading times, if your page is updated frequently, I suggest you use the no-cache tag to make sure your visitors always get the most recent version of your page:
<META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">
The following tag works specifically on Netscape browsers:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
META Content-Type
This specifies the character content of the page. While most plain-vanilla HTML pages don't need this, any page using XHTML requires it.
< META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-1>
The above tag is fairly generic and can be used for most Web pages. There are plenty of other character encoding values available. ISO-8859-1 is the default value.
META Content-Style-Type
Specifies the default Cascading Style Sheet language. The tag below is a relatively generic example:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
META Robots
"Robots" are programs used by search engines to index your site's pages. Most sites are OK having all of their pages indexed separately; these sites can use the following tag:
<META NAME="robots" CONTENT="all">
But you have other options:
<META NAME="robots" CONTENT="noindex,nofollow">
(the page is not added to the search engine at all; another way to write this is <META NAME="robots" CONTENT="none">)
<META NAME="robots" CONTENT="noindex,follow">
(while the home page is not added to the search engine, the robot follows the links)
<META NAME="robots" CONTENT="index,nofollow">
(the home page only is indexed)
<META NAME="robots" CONTENT="index,follow>
The default is the last one: the "index,follow" CONTENT value. This has the search engine catalog the index (home) page and follow all links. If this is what you desire, there's no need to include any ROBOTS tag.
META "Pics"
The World Wide Web Consortium [10] provides a site labeling protocol called PICS [11], which stands for Platform for Internet Content Specification. Many Web filtering software packages use PICS information to decide which sites are family-friendly and which are not. The whole idea can get rather complicated, so instead of my giving you anything "generic," I suggest you visit the PICS site and decide how to proceed for yourself. Or surf to the ICRA (Internet Content Rating Association) [12] site to find out how to "rate" your site for content.
META Generator
This tag is automatically added by many HTML editors such as PageMill, Front Page, and Dreamweaver:
<META NAME="generator" CONTENT="program name and version">
META "Smart Parsing"
"Smart Parsing" is a stealthy, and usually unwelcome, Microsoft invention that has yet to see widespread usage. If in use in any Microsoft application or operating system, it will force chosen words or phrases in your site to link to other sites of Microsoft's choice -- i.e. a user who clicks on the Smart Tagged-word "automobile" will be whisked away to, say, Toyota's Website. If this happens on, for example, a General Motors page, someone in the executive suite won't be happy when it comes to his or her attention.
Although Smart Parsing isn't in current versions of XP or in Internet Explorer 6, it is a feature of Office XP (turned off by default) and may appear in future versions of XP, IE, and other Microsoft products. It's uncomfortably similar to TopText, a nasty and well-known type of spyware (read more about spyware in my SitePoint article of Sept. 20, 2002, AdWare and Under-ware: The Definitive Guide [13]). In general, this kind of thing is a bad idea, possibly illegal, and definitely intrusive and unwanted.
As I write this (November 2002), Microsoft has contracted with 25 companies, including ESPN, C|Net, MSNBC, FedEx, and others to use Smart Tag technology to link to selected words and phrases in any Web document that can be invaded by Smart Tags. If you're like me, you'll link to ESPN or FedEx only if you want to link to them, and not allow Microsoft to add links to your page without your approval. Use this tag to keep Smart Tags out of your pages, and remember, this META tag must appear on every page of your site:
<META NAME="MSSmartTagsPreventParsing" CONTENT="true">
Let MetaGen Do It For You
Matt Mickiewicz's MetaGen page [14] automatically generates basic META tags for your page. Another fine resource from the wizards at SitePoint -- give it a whirl!
Bibliography and Further Reading
10 Questions about Meta Data
http://builder.cnet.com/webbuilding/pages/Authoring/Metadata/ss01.html [15]
A List Apart: Smart Tags
http://www.alistapart.com/stories/smarttags/ [16]
Advanced HTML: Tables, Frames, and the META Tag
http://www.rochester.edu/ats/Documentation/WebHelp/advanced.html [17]
Everything You Need to Know About Meta Tags
http://www.webmasterbase.com/article.php?aid=31 [18]
HTML, META, REL, and REV tags
http://vancouver-webpages.com/META/index.shtml [19]
HTML Tag Library: The <Meta> Tag
http://html.about.com/library/tags/bl_meta.htm [20]
META FAQS
http://vancouver-webpages.com/META/FAQ.html [21]
Meta Tagging for Search Engines
http://www.wdvl.com/Search/Meta/Tag.html [22]
Meta Tags
http://html.about.com/cs/metatags/index.htm [23]
Meta Tags Resources
http://www.ohlone.cc.ca.us/org/webcenter/metatags.html [24]
Meta Refresh Tag
http://html.about.com/library/weekly/aa080300a.htm [25]
Microsoft Clips Windows XP Smart Tags
http://news.com.com/2100-1001-269167.html [26]
Microsoft Office eServices - Smart Tags
http://www.officesmarttags.com [27]
New Windows XP Feature Can Re-Edit Others' Sites
http://ptech.wsj.com/archive/ptech-20010607.html [28]
Revisiting Meta Tags
http://www.searchenginewatch.com/sereport/02/12-meta.html [29]
SitePoint Tribune Issue #112
http://www.sitepoint.com/newsletter/archive/newsletter112.php [30]
SitePoint Webmaster Forums: Practical Web Design - Top 15 META Tag Tricks
http://www.sitepointforums.com/showthread.php?threadid=86842 [31]
Webopedia
http://www.webopedia.com/ [32]
World Wide Web Consortium
http://www.w3.org/ [33]
[1] http://www.webopedia.com/
[2] http://www.w3.org/
[3] http://www.sitepointforurms.com
[4] http://www.google.com
[5] http://www.altavista.com
[6] http://www.fast.com
[7] http://www.inktomi.com
[8] http://www.searchenginewatch.com
[9] http://www.teoma.com
[10] http://www.w3.org/
[11] http://www.w3.org/PICS
[12] http://www.icra.org/
[13] http://www.ecommercebase.com/article/888
[14] http://www.servicesbase.com/metagen/
[15] http://builder.cnet.com/webbuilding/pages/Authoring/Metadata/ss01.html
[16] http://www.alistapart.com/stories/smarttags/
[17] http://www.rochester.edu/ats/Documentation/WebHelp/advanced.html
[18] http://www.webmasterbase.com/article.php?aid=31
[19] http://vancouver-webpages.com/META/index.shtml
[20] http://html.about.com/library/tags/bl_meta.htm
[21] http://vancouver-webpages.com/META/FAQ.html
[22] http://www.wdvl.com/Search/Meta/Tag.html
[23] http://html.about.com/cs/metatags/index.htm
[24] http://www.ohlone.cc.ca.us/org/webcenter/metatags.html
[25] http://html.about.com/library/weekly/aa080300a.htm
[26] http://news.com.com/2100-1001-269167.html
[27] http://www.officesmarttags.com
[28] http://ptech.wsj.com/archive/ptech-20010607.html
[29] http://www.searchenginewatch.com/sereport/02/12-meta.html
[30] http://www.sitepoint.com/newsletter/archive/newsletter112.php
[31] http://www.sitepointforums.com/showthread.php?threadid=86842
[32] http://www.webopedia.com/
[33] http://www.w3.org/