The HTML Survival Kit - META tags; Document Indexing Controls

Core META tags for Document Indexing

The META tags inserted within <HEAD> and </HEAD> elements are designed to embed document-specific meta-information. Such information may be accessed/extracted by servers/browsers for an indexing purpose.

Bottomeline is that if you want your HTML pages indexed and keyword searchable by popular search engines, i.e., yahoo, altavista, lycos, etc., you do need to add following critical META tags in your HTML pages. (of course, presuming that you already submitted your pages to search engines for initial indexing)

Else, basically you're playing all by yourself and will start wondering why all these peoples in the net do not come to your fabulous site. :-)

	<META NAME="resource-type" CONTENT="document"> <META NAME="description" CONTENT="sentence"> <META NAME="keywords" CONTENT="keywords"> <META NAME="distribution" CONTENT="global">

At the moment, the only resource type that can be embedded in a document is "document", so you won't need to change this. This is the only absolutely necessary tag. If you omit the other META tags, the index will list only the title portion of your document (that is, if you have a <TITLE> and </TITLE> element defined in your document.)

A sentence describing your document. This will be displayed along with the title of your document in the index listing. It should be concise and clear yet give a very good idea of the content/context of the document.

If you do have an obscure, meaningless and clueless 'description' META tag, your web page is as good as non-existent. Nobody would be able to figure out what your page is all about. Worse, nobody would bother to access yours.

Length of 'description' META tag can be varied from one line to several lines.


		<META NAME="description" CONTENT="

		   The HTML Survival Kit (rudimentary HTML authoring guide),

		   -- CEE Unix Computing Laboratory (UCL) Helpdesk & FAQs

		   ">

Words logically related to the content of the document (think what you would enter into a keyword search to locate this document). I'd say that this "keywords" tag is most widely used META tag -- both for indexing and CGI functions.

Length of 'keywords' META tag can be varied from one word to several words connected by a comma.


			<META NAME="keywords" CONTENT="HTML authoring guide, CEE UCL">

'global' is a normal indexing directive. Use 'local' for constraining only to local indexing (by an intranet indexing engine). I.e., you do not want the document to be indexed by popular internet search engines.

Put it all together

<META NAME="resource-type" CONTENT="document"> <META NAME="description" CONTENT=" The HTML Survival Kit (rudimentary HTML authoring guide), -- CEE Unix Computing Laboratory (UCL) Helpdesk & FAQs "> <META NAME="keywords" CONTENT="HTML authoring guide, CEE UCL"> <META NAME="distribution" CONTENT="global">

Optional META tags for Document Indexing

As the name imples, optional META tags are not required by standard indexing engines. However, they are very usefule to convey additional information, and if present, all optional tag information will be indexed.

Optional META tags are also heavily used for website management - revision, categorization, version control, and documentation.

	<META NAME="author" CONTENT="creator/maintainer of the page"> <META NAME="reply-to" CONTENT="contact e-mail info"> <META NAME="address" CONTENT="contact address info"> <META NAME="copyright" CONTENT="copyright disclaimer"> <META NAME="date" CONTENT="last modification date"> <META NAME="expires" CONTENT="expiration date for the page"> <META NAME="robots" CONTENT="Index, Follow">

Too apparent to explain. See example below.

Too apparent to explain. Be careful not to surround your e-mail address with "<" and ">".


			<META NAME="reply-to"  CONTENT="yoon@cee.odu.edu (Jaewan Yoon)">

Too apparent to explain. See example below.

Too apparent to explain. See example below.

Creation/Modification time stamp. The format is:

YYYY-MM-DDThh:mm:ssTZD

where

YYYY	= four-digit year
MM	= two-digit month (01=January, etc.)
DD	= two-digit day of month (01 through 31)
hh	= two digits of hour (00 through 23) (am/pm NOT allowed)
mm	= two digits of minute (00 through 59)
ss	= two digits of second (00 through 59)
TZD	= time zone designator

See example below.

Page expiration time stamp. The format is the same as in date META tag. You can use this tag to force the browser to reload/refresh with the lastest page (instead of loading old page from disk cache) after a designated expiration date. See example below.

There are standard search engine clients called robots (also known as crawlers, spiders and other cute name) that wander around the web looking for updated and/or new interesting resources. Most robots are sent to your site by search engines, and used to generate a web index of your site which is then sent back to search engines to help locate information in your website.

When the first robots were developed, they had a bad reputation for sending hundreds/thousands of requests to each site, often resulting in the site being overloaded. Things have improved dramatically since then, but even so, you can set a permission for them to start/stop crawling and indexing your pages.

Permission to Robot can be set using this 'robots' META tag. See example below.


			<META NAME="robots" CONTENT="Index, Follow">

			
			or 
			
			<META NAME="robots" CONTENT="NoIndex, NoFollow">

Put it all together

Auto-Load/Forward META Tag

Here, you may wonder where the 'HTTP-EQUIV' tag pops up from suddenly -- 'HTTP-EQUIV' tag is equivalent to HTTP headers. Most web servers actually generate HTTP headers from the HTML tags including 'HTTP-EQUIV' tag. Thus, if you'd like to invoke an action such as refresh, effect, transition, etc. on the page, you need to use this 'HTTP-EQUIV' tag.

'Refresh' META tag is ideal to trigger a specific action -- forward the user to different URI, play an audio, etc. -- as soon as the current page is loaded into the browser.

There are two required parameters for 'Refresh' META tag. The first parameter, TimeLapse specifies a delay value in seconds. After the page has completely loaded in the browser, the page will wait TimeLapse seconds before triggering an action specified in the second parameter, URI. Great for redirecting users when your site has been moved.

For example, as shown below, as soon as current page is completely loaded in the browser, the page will wait 3 seconds, then immediately load a new page from http://www.cee.odu.edu as specified in the second parameter (auto-forwarding).

A nifty trick is to specify an audio file in URI and a TimeLapse of 0. This will cause the browser to play the specified audio file, while allowing the user to continue reading your page with an audio playing background.

However keep in mind that each individual "Refresh" directive is one-shot action and non-repeating. If you need to repeat an action, you may consider using a simple JavaScript.

<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://cee.odu.edu">

Prevent-Frame META Tag

Yes, that is a underscore (_), not a typo.

When someone links and squeezes your page into one of his/her frame, your page will be crammed into the frame instead of being displayed in entire browser screen. The best way to resolve this, and ensure a full browser screen display is to add a 'Window-target' META tag as precaution.

<META HTTP-EQUIV="Window-target" CONTENT="_top">

No-Cache META Tag

Time to time, you absolutely want the user to load the latest pages for critical updates, you can take two different approaches.

First approach is, as you may guess, explicitly stating in the page that '... has been updated MMDDYY...' and hope that user's browser is configured to load updated pages each time. However, this is not necessarily true most of time due to browsers' default memory- and disk-cache setting/preference.

Second approach is that you can force your pages not to be cached by user's browser, to both memory- and disk-caches. As a result, there will be no 'old' cache of your pages residing in user's computer, your pages have to be loaded freshly next time.

You can achive this forced 'no-cache' by adding above two META tags.

From the client side, you can also achieve it by setting memory and disk cache size to ZERO in your browser's setting/preference.

Transition-Effect META Tag

You can implement some interesting transition effect when the user enters and leaves a page by using 'Page-Enter' and 'Page-Exit' META tags.

'Duration' element controls the length of transition effect, and it is expressed in seconds. In my opinion, any duration longer than 2 seconds will eventually aggravate the user unless it is your intention that the page will be accessed only once per user for the eternity. (huh!)

Transition effects are excellent tools if used strategically and sparsely -- to make the point acrossed. However, please remember that effects are like makeups -- too much would make you look cheap -- use them wisely.

Following is a full reference for what transition numbers equal which tranisition effects. Keep in mind that this transition effect META tag will *NOT* work with neither Netscape browser or frames.

Transition No.	Description
0	Box in
1	Box out
2	Circle in
3	Circle out
4	Wipe up
5	Wipe down
6	Wipe right
7	Wipe left
8	Vertical blinds
9	Horizontal blinds
10	Checkerboard across
11	Checkerboard down
12	Random dissolve
13	Split vertical in
14	Split vertical out
15	Split horizontal in
16	Split horizontal out
17	Strips left down
18	Strips left up
19	Strips right down
20	Strips right up
21	Random bars horizontal
22	Random bars vertical
23	Random

<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=1,Transition=12)">