Tidbits
Weave a Web Part IV
- by
John Wolf
This is part four in the series of how to weave a web site. You've
heard of meta-physics, now we want to talk about meta-tags. They aren't
puffs of interstellar gases, although, they do float around the Internet
and help people gather at your website.
Here's the top part of any webpage again for reference:
<html>
<header>
<title>Visit this website - it's great</title>
</header>
(Web page stuff)
</html>
See that blank above, we want to place <meta> tags
in there. They have several flavors and basically are what a search engines uses
to identify you and your website. They provide the script for Google to build
a blurb to display when a page match is found. Various search engines create
these little billboards differently, but they all start with the <meta>,
so you want yours to be visible and catchy.
The first one you see normally is very cryptic.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
This gobbligook is for the browser's benefit. It tells
the browser this is a html document represented in text defined by the universal-text-format
using eight bits. There's a sixteen bit jobber for those of you that write in
Arabic, like Al-Quida, for terrorist webpages, you'd use that. Since there are
many writing alphabets in the world, the browser needs to know which one to use.
Next is another one, but much more tuned to our personal
needs.
<meta name="description" content="This site is in three segments. Books, Music,
and a Personal. Beer making to story telling, all harmonized in song." />
Click on this: next column
Wine,wires and women, you can't get better than
that.
It's easy to imagine a search engine's little brain
scanning the universe and seeing a description associated with the search,
and better yet... content to plaster in a billboard to help people decide if
this is the site they were looking for. The next <meta> tag helps more
by letting the search program have something to chew on in the "decide
what to do" section.
<meta name="keywords" content="Infinity author, Author of Fantastic
Tales, John Wolf, John D. Wolf, Sci-Fi, science fiction, Orphan Records, A Dark
and Stormy Knight, ... />
Now you should be seeing the pattern. This one would
be used to match the search entry. If there is a match, place the URL in the
billboard list and add the descriptive blurb. Knowing how the search engines
find your page is critical to ever being visited, except by creditors. They
use other means like house addresses verses URLs.
So that's the quick and dirty of <mega> tags.
There is another little bugger that you can throw in the <header> that
you may enjoy and that is the "favicon." This strange words is short
for favorite-icon, and describes a 16x16 pixal tiny picture your can create to
go up in the URL line of your webpage to run with the big dogs. You see them
on all the professional sites. You're a pro, put one up there. Here's how:
<link rel="shortcut icon" type="image/x-icon" href="http://www.johnwolfbooks.com/favicon.ico" />
Notice first this is a <link> tag. The "rel" tells the browser that this is related to this technology call Shortcut Icon, which is built into the browser to place this little picture up on the URL line. The type callout seems bumb, but browsers are a bit dense. The hypertext reference tells the browser where to go get the picture. Notice that you can only have one picture and it has to have the name "favicom.ico" Don't use any other name or try to add .jpg or .gif to the end. It is best to start with a .gif, which is a simple 16 color picture, then rename it to this spec. You can edit the picture down to the 16x16 size required with varous image editors or find canned ones on the Internet, but they add a lot of class to a website. Give it a try.
The Internet is the gift from the American government. The reason it
exists is the many free citizens in the world that gave their time and
talent to make it work. The business savvy ones even got rich. It's financed
now by ISP providers.
© 2007 John Wolf, all rights reserved
