|
"Hey! What's the <META> in Your <HEAD>?"
"A slicker opening... and I look better on Search Engines!"
The place that these tags go are within the <HEAD> ... </HEAD> part of your HTML document that we learned about way back in lesson 1.
The first type of META tag allows you to write HTML that will display your web page, wait an arbitrary number of seconds, and then automatically advance to another page or URL. Why would you even want to do such a thing?
The <META> tag resides inside the <HEAD>..</HEAD> tags:
<head> <title>My page title</title> <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html"> </head>
where Xis the number of seconds that this page will be displayed before advancing to the HTML file or URL listed after URL=. Note that the whole string after CONTENT= must be in quotes, and there must be a semi-colon after the value for the number of seconds.
You are doing all of this hard work to learn HTML and create web pages. Ultimately, you probably want people to be able to find them among the other 10 gizillion pages out there. META tags allow you to add extra information that will help identify your web page when people use Internet searches.
We are not going to go into great detail about web search engines (You may check this out "How to be a WebHound"). Basically, some clever programmers have written code that tries to follow as many web links as it can, and return a bit of information about each page it "walks" to a centralized database. They then offer a single web page where you can enter some descriptive words, and their site returns a list from their database that might match what you are looking for.
If you are not familiar, experiment with using the search features from sites such as Altavista, HotBot, Excite, Lycos, etc.
At many of these web sites, the results that are returned display the text of the first few lines of the displayed web page. Unless the very first words on your page are very descriptive, the results will not provide a clear understanding about what is on the page. For example, for our Writing HTML tutorial main page at http://www.mcli.dist.maricopa.edu/tut/, without META tags, a search engine might return something that looks like:
|
This is not too bad; we can get an idea about what this site is about, but we are seeing the text from the links at the top of the tutorial pages. However, by inserting a META tag, we can make it so that the results appear like:
|
The HTML format for adding this kind of META tag is
<META name="description" content="The string of text is a really
good description of this web page. Perhaps a second sentence
would help as well.">
If you are tempted to write a long descriptive narrative, keep in mind that maximum length of a META tag, from the first < to the last > is 1024 characters, leaving 998 characters between the beginning of the tag
<META name="description" content="
and the closing
">
leaving room for perhaps 100 words.
Another META tag that is useful in shaping how your site fares on web searches allows you to add the important words that you think a visitor might enter when they are searching for a site such as your own. For example, for our Writing HTML tutorial main page at http://www.mcli.dist.maricopa.edu/tut/ we provided these keywords using the format for our META tag:
<META name="keywords" content="HTML, tutorial, learn,
make, create, design, web page, home page, education,
maricopa, mcli, writing, form, tables, frames,
javascript">
Experiment with a front end page that introduces your web site and use the META REFRESH tags to make it jump to your main page. Can you make the opening page compelling enough to "invite" someone into your site? Do you think this page should contain a lot of graphics or very few? Why or why not?
To learn more about search engines and how they work, see Search Engine Watch, and their special section on How to Use Meta Tags.
If you want to learn more about how to search techniques, try Web Hound tutorial (it is as much or more fun than this one!)