By Lisa Hui
Although I recommend that you read this even if you haven't completed the entire 1-6 set of previous tutorials in this section, you should have a basic understanding of tags and the ability to create a basic page from scratch with the following elements: links, images and, of course, text before doing so. In this section, you'll find out about the most fundamental tool of site promotion, the <META> tag, it's other useful applications, and an introduction to the new technology called Dynamic [sometimes called "embedded"] Fonts and how to stream them from your own pages :)
Principles of META tags - the anatomy of web searching
After doing quite a bit of work on what should be the super-fantastic-work-of-art that is your web site, it becomes even more important to make sure your site turns up with a splashy pitch in search engines. Popular engines such as Altavista and Infoseek use meta tags extensively and thus this tag may be one of the essential tools in prepping your site for people to find it. Such search engines will grab the first bit of text (about a line or two worth of text) that doesn't look like HTML coding and display that as its search result description of your link (should it turn up in a search at all).
Altavista turns up a search result link in this format:
[Realize that most search engines will index the contents of the ALT= part of an IMG tag (image or graphics statement) however.] Often I've seen other things such as menu text and strange, frankly not-very-interesting, nonsense show up in the description line. Number one, it clearly demonstrates that the page was not created to be indexed by search engines, and number two, it sometimes make it difficult for people to get interested enough to move their mouse over your link and actually click it. So the saying "if you build it, they will come" doesn't always apply.
What can you do about it? First, notice that your page title does show up in the search results. That means, you'll want to put a title that is descriptive and to the point in between your <TITLE> and </TITLE> tags.
Type in a few <META> tags in between your <HEAD></HEAD> tags (if you're that lazy, just use a free online meta tag generator that does the work for you), and your site just increased its chances of not being kicked to the curb :)
The two important ones (the only two used in site indexing and searching) are the <META NAME="Description"> tag and the <META NAME="Keywords"> tag. If I wanted to put meta tags on a page about web design (!), the header (top section) of my page might look something like this:
The CONTENT of these meta tags are not case sensitive, so there is no need to repeat each keyword using variations in capitalization :) How about the size of each piece of information? The maximum recommended sizes, given by MetaGen are:
How useful are they? I wouldn't say that <META> tags are a panacea
of any sort. It works a little magic for you, but never rely on magic. Not
all search engines use meta tags (which is disappointing if you've just gone
to the trouble of "meta-tagging" all your pages), but here's a little category
list of some of the more popular ones with the methods they use for indexing
Some terms used in the table of search engine features above:
Directories such as Yahoo and Open Directory are not search engines. Compare their statistics to those above:
A couple of questions that come up are "Well...if that many search engines find <META> descriptions and keywords to be so abused as to not use them, what can we do about it?" and "What about the engines that don't even use <META> tags??" For the both questions, the recommended solution is to add a comment right after your title tag, using either the <COMMENT> </COMMENT> tags or the <!-- --> tags. And write in the <META> description there:
Find out about some search engine and directory tactics used to pull your site up to the top of the charts in my coverage of search engines. In the process, you may get a better idea of how this whole system works :)
There is also another brand of meta tags that can control how robots (crawlers) index your page(s) and other interesting properties. For example, some people (perhaps you included) prefer that robots/spiders/crawlers don't index every page on your site. (For those who ask why, it is because certain pages may be "private" or because the author feels that only a frame page, not its individual parts, should be indexed.) If you're adamant on preventing this, there are two methods to prevent this from happening. The first method is to use a special <META> tag and the other, more secure, way is to put a special message called "robots.txt" in your directory for the indexer (robot/spider/crawler) to read and obey. Since this page focuses mainly on the meta tag aspect of this situation, you can take a quick detour and read up on how to use your robots.txt file or note it for later.
The other common attribute form of a <META> tag is the HTTP-EQUIV. It is used much like it's NAME counterpart: <META HTTP-EQUIV="Parameter" CONTENT="Attribute">. These <META> tags are equivalent to HTTP headers (and thus can be used interchangeably). HTTP (Hypertext Transfer Protocol) headers are used to control browser interpretation of a page and a few other actions. Its various parameters will allow you to do some of the following neat things we will be taking a look at.
But first, let me give a quick answer to this question (so that you will understand the terminology that follows): What is a HTTP header?
Well, this would be the answer from the World Wide Web Consortium: "HTTP is a ... generic protocol for communication between user agents and proxies/gateways to other Internet systems, including those supported by the SMTP, NNTP, FTP, Gopher, and WAIS protocols. In this way, HTTP allows basic hypermedia access to resources available from diverse applications ... allowing messages to be in the format of MIME-like messages, containing metainformation about the data transferred and modifiers on the request/response semantics."
In other words, it tells the browser how to transfer the data in a web document or file, and aids in connecting between remote servers that store the web document or file and user agents (your browser, proxy/gateway). How do you use HTTP headers? Just write them in at the top of the web page. There are defaults, so no need to worry about putting them on every page :)
Robots - Control What that Opportunistic Indexing Spider can Touch
This <META> tag only "protects" the page it is placed in:
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
It is basically telling the robot /spider that it can look through the page, but cannot index anything it finds.
Cache Setting - Turning The Stuff On and Off
There are at least two <META> tag methods of preventing browsers from cache-ing a page; the parameters used are either Pragma (HTTP/1.0) or Expires (see Expiration below for information on this parameter).
Set Pragma's CONTENT value to "no-cache". <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> This command is given by browsers during a Reload request and prevents Netscape Navigator from cache-ing a page locally. A warning: web proxies and browsers other than NS often ignore <META> tag cache-ing commands.
The Cache-Control attributes used in HTTP/1.1 headers:
e.g. Cache-Control: no-cache
(Browser action is undefined if you use these headers in META tags.)
Expiration - The Web Page Expiration Date
This parameter controls how long the browser will cache (keep a temporary copy of the page on the HD for instant loading) the page (HTTP/1.0 header). Once the information "expires" it will dump the cached version and next time someone visits the site, the browser will load a fresh version. Robots/Spiders will likely delete that page's URL from the search engine; some will also revisit the site to index the content again.
<META HTTP-EQUIV="Expires" CONTENT="Sun, 27 Jun 1999 08:20:36 GMT"> (Dates written the CONTENT attribute must be given in RFC850 format, and in GMT - which is 10 hrs behind Eastern Standard Time)
If you specify the CONTENT value to equal 0, it may force some browsers to not cache your page at all (same thing as saying that the page expires "immediately")
The equivalent HTTP header is Expires: Sun, 27 Jun 1999 08:20:36 GMT
Reload -Do it again!
This parameter causes the browser to reload the given page. You can specify the time delay in seconds before the browser reloads the document. You can also specify an alternative URL, in which case, it redirects to that URL after the given time delay.
Its equivalent HTTP header is Refresh: 3;URL=http://etc.etc...
It will reload without cache-ing the page in Netscape Navigator. It may or may not work with recent versions of Internet Explorer.
Classification - Just Some FYI Facts
These HTTP-EQUIV parameters are pretty effect-less (nothing happens whether your put it in your not), unless you're just into putting this kind of information on your page: Generator, Formatter, Author, Copyright, Rating. The last three may interest you, so let's start with those first.
<META HTTP-EQUIV="Author" CONTENT="Lisa H."> Whoa, wait, an ego-boost! :)
<META HTTP-EQUIV="Copyright" CONTENT="©1999 Lisa H., Ad Infinitum Web. All rights reserved.">
<META HTTP-EQUIV="PICS-Label" CONTENT="(PICS-1.1 "http://www.classify.org/safesurf/" l gen true for "http://library.advanced.org/26297/" r (SS~~000 1))">
The last one is very cryptic, but robots and certain browsers (currently excluding IE or NS) use this to interpret that our site is safe to surf through :) How does this help your site? Parents who are concerned about their children's browsing habits may use restrictions that only allow "safe-rated" sites to be blocked out. It is very very very important that you answer the rating questions truthfully!!! To generate your very own content safety <META> label for your site/page, check out our online PICS-Label generator powered by Safe Surf. As Alison McNab, Betsy Anagnostelis and Alison Cooke wrote in a commentary about rating sites, "Never mind the quality, check the badge-width!"
The last two are basically the same. If you use a program to write your HTML code, it may automatically stick in a <META> tag identifying it as the "Generator." <META HTTP-EQUIV="Generator" CONTENT="HTML Editor">. As for "Formatter," it's a Microsoft FrontPage thing (Source: Dictionary of META tags) so you shouldn't bother about this one.
Special Effects - Microsoft's DHTML META Tags
This isn't truly DHTML but nothing could describe it better. It only works when viewed in Microsoft Internet Explorer 4.0+. But yes, <META> tags even do neat tricks :) You can specify a transition effect through the use of four possible parameters: Page-Enter, Page-Exit, Site-Enter, Site-Exit
<META HTTP-EQUIV="Page-Enter" content="revealTrans(Duration=3.0,Transition=2)">
The Duration determines how long the transitional effect will take; it is written in floating point, which means that there decimal places may be used. And the Transition (0-23) determines what kind of effect will occur during that Duration.
Further "Ventures" Into the META World
Dynamic Fonts - Wave of the Future or Yesterday's News?
Most say that dynamic fonts, a technology capitalized upon by Bitstream, is the wave of the future. In many respects, they're right. They allow you to dyamically "stream" fonts to a "User Agent" (your browser) so that visitors who may not have the fonts you used on your site installed can still view the page in all its glory :) It "ensures that a user sees documents exactly as the designer intended them to be seen."
There are currently two different technologies, one (called OpenType) developed by Microsoft and the other (called TrueDoc) developed by Bitstream. What's the difference you ask? Not really that much. Although I could go into detail about how dynamic fonts are rendered in browsers to make them easier to read etc. etc., that's not such a big deal for designers like you and me (well... if it is that important to you, check out WebReview's showdown: OpenType vs.TrueDoc). Except for one thing: price. I'm not such a big fan of that $200 price tag that Bitstream is offering their dynamic font converter at; in fact, it is down right impossible to get your hands on aTrueDoc font tool without shelling out at least $150 (although it may be a reasonable price for commercial developers). Considering that Microsoft is offering theirs for free, I think we all know which way the dice are rolling.
The Gory Details - A Comparison of the Two Dynamic Font Types
©1999 Team 26297 "Ad Infinitum Web." All rights reserved. Any reproduction of this document for commercial or redistribution purposes without the permission of the author is forbidden.