 |
|
 |
 |
 |
|
 Print this Article (NS4) Netscape Navigator Internet Explorer Opera Neoplanet
|
 Forums
HTML General Programming Flash Site Dev Grafix (Art)
|
 Laboratory
Smart HTML Color Lab Generators
|
 HTML Editors
Simple Editor(Win*) EditPad(Win95) AOLPress(Win95) BBEdit(Mac) Dreamweaver CuteHTML
|
|
Related Files
Font Creator True Type Fonts WEFT Icon Creator
|
 Contents
Introduction to Ultimate Enlightenment
Body Works
Images and Eye Candy
Lists and Forms
Tables
Frames and those that Float
Meta Data
Sound of Music
Channel Surfing
|
Meta Data
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:
- #.Linked Title
-
Description - the first piece of text it encounters.
URL: http://etc.etc...
Last Modified: on-this-date - page size 1K - in English [Translate]
[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:
| <HTML> <HEAD> <TITLE>Ad Infinitum Web - Web Design Reference Site Unlimited!</TITLE> <META NAME="Description" CONTENT="A site focusing on web design aspects such as HTML, DHTML, Graphic Design, and various web programming aspects to web development."> <META NAME="Keywords" CONTENT="web,web design, web development, Web Programming, html, dhtml, javascript, java, cgi, perl, c++, web hosting, internet"> </HEAD> <BODY> |
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:
| 800 Characters for the Keywords 150 Characters for the Description 60 Characters for the Title |
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
and searching:
| Search Engines | Meta Tags Used | Spamming Penalty | Frame Support | Indexing Time/Method |
| Alta Vista | Yes | Yes | Yes | Instant/Deep Crawl |
| Excite | Description | Yes | No | 2 Weeks/Deep Crawl |
| HotBot | Keywords | Yes | No | 2 Weeks/Deep Crawl |
| InfoSeek | Yes | Yes | No | Instant/Crawl |
| Lycos | No | Yes | Limited | 2-3 Weeks/Crawl |
| Northern Light | No | No | Yes | ?/Deep Crawl |
| AOL NetFind | Description | Yes | No | 2 Weeks/Deep Crawl |
| MSN Search | Yes | No | No (?) | Instant/Deep Crawl |
| Web Crawler | Description | Yes | No | 1 Week/Crawl |
Some terms used in the table of search engine features above:
- Crawl
- A method whereby search engines look through a web page and generate summaries (including keywords).
- Deep Crawl
- A method whereby search engines crawl through a web page and then continue by crawling its links.
- Frame Support
- Most search engine crawlers cannot follow the links in frames-based pages to index the pages themselves. This factor notes which crawlers can interpret <FRAMESET> tags.
- Instant Indexing
- Crawling is done within one to two days of the URL submission.
- Spamming
- The process whereby you submit the same URL to a search engine in the hopes of increasing your ranking (how prominent your URL is in search results).
Directories such as Yahoo and Open Directory are not search engines. Compare their statistics to those above:
| Directories | Meta Tags Used | Spamming Penalty | Frame Support | Indexing Time/Method |
| Open Directory | No | No | Yes | ?/Manual |
| Yahoo! | No | Yes | Yes | 1 Month/Manual |
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:
| <HTML> <HEAD> <TITLE>Ad Infinitum Web - Web Design Reference Site Unlimited!</TITLE> <!-- A site focusing on web design aspects such as HTML, DHTML, Graphic Design, and various web programming aspects to web development. web,web design, web development, Web Programming, html, dhtml, javascript, java, cgi, perl, c++, web hosting, internet --> <META NAME="Description" CONTENT="A site focusing on web design aspects such as HTML, DHTML, Graphic Design, and various web programming aspects to web development."> <META NAME="Keywords" CONTENT="web,web design, web development, Web Programming, html, dhtml, javascript, java, cgi, perl, c++, web hosting, internet"> </HEAD> <BODY> |
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:
Public - may be cached in public shared caches
Private - may only be cached in private cache
no-cache - may not be cached
no-store - may be cached but not archived
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.
| Code | <META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://etc.etc..."> |
| What it does | After 3 seconds, it will redirect the visitor to the URL http://etc.etc... |
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.
| # | Transition Effect |
|---|---|
| 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 | Stripes Left Down |
| 18 | Stripes Left Up |
| 19 | Stripes Right Down |
| 20 | Stripes Right Up |
| 21 | Random Bars Horizontal |
| 22 | Random Bars Vertical |
| 23 | Random |
Further "Ventures" Into the META World
Simple HTML Ontology Extensions (SHOE).
http://www.cs.umd.edu/projects/plus/SHOE/
ht://Dig.
http://www.htdig.org
The MetaWeb Project.
http://www.dstc.edu.au/RDU/MetaWeb/
IMS Meta-data.
http://www.imsproject.org/metadata
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
| TrueDoc (Bitstream) | OpenType (Microsoft) |
| Font File Extensions | |
|---|---|
| .pfr (Portable Font Resource) | .eot (Embedded Open Type) |
| How It Displays Fonts Dynamically | |
| Creation: TrueDoc chooses just the characters used
in the document or documents (called subsetting), records shapes,
then discards hints (special instructions that help fonts look better
in small sizes on screen) and stores them in a Portable Font Resource (PFR)
file.
Display: When fonts are displayed in the browser, TrueDoc anti-aliases (soften the edges) fonts at color depths as low as 4-bit. Creating a .pfr file requires a commercial utility. |
Creation: OpenType ubsets, then compresses TrueType
fonts using a method that keeps all of the font's hints
in the file and stores them in an Embedded Open Type (EOT) file.
Display: The created web fonts are temporarily installed on the visitor's computer, for the browser's use in displaying the web document. Creating an .eot file requires a free Windows-only utility program from Microsoft, called WEFT. |
| Code Used to Include These Font Files (Placed in between the <HEAD> </HEAD> tags) | |
| <LINK REL="Fontdef"
SRC="fontfile.pfr"> or <LINK hxburned REL="Fontdef" SRC="fontfile.pfr"> or <STYLE TYPE="text/css"> @fontdef url("fontfile.pfr") </STYLE> |
<STYLE TYPE="text/css"> <!-- @font-face { font-family: Some Font Family; font-style: normal; src: url(fontfile.eot); } --> </STYLE> (Javascript code is required if you wish to add a progressive rendering feature while loading embedded fonts.) |
| Browsers and Platforms Supported | |
| Netscape Navigator 4.0+; Internet Explorer 4.0+ (plugin) | Internet Explorer 4.0+ |
| Problems and Bugs | |
| Associates fonts with domain names, so that they cannot be copied or used remotely by another site. (?) | Security issue for professional typographers that allow visitors to save
these fonts for their own use (bad if you make money selling copyrighted
fonts).
Associates fonts with domain names, so that they cannot be copied or used remotely by another site. (?) |
| Language Support | |
| Works with any font format and any language regardless
of the language setup on the designer's/visitor's computer.
Multiple languages can be displayed simultaneously. |
OpenType uses Unicode, the 64,000 character set system that can encompass all the world's languages. Unicode is used so that a single font can handle a huge character set. (Source: Web Review) |
So what are you waiting for? Grab a copy of WEFT or check out TrueDocs 20 free, but copyrighted, pfr's for use on your website! More to come on this new technology; stay tuned :)
