Working Smart with meta Tags

[ LiB ]

Meta means "about." The purpose of the meta tag is to store information about the current document for possible processing by browsers, servers, search engines, or even lowly humans viewing the source code. For each different kind of information you want to store, you use a different meta tag. HTML documents can have as many meta tags as needed, all stored in the head.

How meta Tags Store Information

Information is generally stored in the meta tag as a name /value pair, using the name and content attributes:

 <meta name="generator" content="Dreamweaver">

Over time, certain name/value pairssuch as keywords , description , and refresh have become standard in HTML use and are collected and processed by browsers and search engines. However, web authors also are free to create any desired name/value pairs to store other document- related information. Many popular HTML editing programs, for instance, use a generator meta tag when generating code, to sneak some free advertising into user documents. Some web authors let potential code-borrowers know whom they're borrowing from with an author tag, as follows :

 <meta name="author" content="Julius Marx">

The various meta tags are useful enough that Dreamweaver supplies several objects representing different kinds of meta information. The following paragraphs examine these.

The Character-Encoding meta Tag

This kind of meta tag isn't in the Insert bar. Dreamweaver inserts it automatically into every HTML document it generates. The code looks like this:

 <meta http-equiv="Content-Type" content="text/html;  charset=iso-8859-1">

(See the following section for more on http-equiv , which is used here in place of name .)

This standard meta tag tells the browser what character set to use in representing the text portions of the page. ISO-8859-1 refers to Latin-1 encoding, used for most western European languages. Examples of other encodings include ISO-8859-5 (Cyrillic) and SHIFT_JIS (Japanese). Unless you know what you're doing, don't mess with this tag.

meta Tags and the Generic Meta Object

Ultimately, every meta tag consists of a name and some content, so the Dreamweaver generic Meta object is the perfect bare-bones tool for inserting custom meta information. Figure 7.3 shows the generic meta tag being inserted.

Figure 7.3. Inserting meta content with the generic Meta object.

To insert a meta tag, follow these steps:

In the Insert bar, go to the HTML category and, from the Head objects, choose the Meta object.
In the dialog box that appears, use the pop-up menu to choose either the name or http-equiv attributes to include. (The http-equiv attribute maps the attribute and its respective name to the HTTP response header for processing. Unless you know specifically what you want and are sure that http-equiv is appropriate, use the name attribute.)
In the dialog box's Value text field, enter the value you want the name (or http-equiv ) attribute to have.
In the dialog box's Contents text area, enter the value you want the content attribute to have.

Figure 7.3 shows how the dialog box insertion areas translate into the finished meta tag code. Why not use this generic object to insert all meta content? The meta tags that use standard keywords, those that a browser or other agent will be processing, also require standardized syntax for their content. Dreamweaver's specialized Meta objects take care of those syntax requirements for you. Dreamweaver does not include all the meta tags that you might want to use. Table 7.2 lists some of those meta tags not included with Dreamweaver.

Table 7.2. Some Useful meta Tags Not Included in the Dreamweaver Insert Bar

Syntax	Description/Purpose
<meta http- equiv="expires" content="15 Apr 2001 23:59:59 GMT">	Specifies a date after which the browser cache for the current page will expire. This guarantees that visitors ' browsers won't show an out-of-date version of the page. The date and time should be formatted as shown. The time information is optional.
<meta http-equiv= "Set-Cookie" content=cookie_name =cookie_value; expires=1 Jan 2002 23:59:59 GMT">	Sets a cookie with whatever name and value are specified in place of `cookie_` `name` and `cookie_` `value` (for example, `favorite_color=green` ). The expiration information is optional; if it's not present, the cookie expires when the browser is shut down.
<meta http- equiv="pragma" content="no-_cache">	Prevents the browser from caching the page. Note that Internet Explorer versions 4 and later ignore this tag.
<meta http-equiv= "Content-Script- Type" content= "text/language_name">	Specifies the language to be used in all `<script>` tags within the document. The content string might read `text/javascript` or `text/vbscript` , for instance.

Meta Keywords and Descriptions

Undoubtedly the most commonly used and most generally practical of the meta tags are those that help search engines locate and retrieve information about documents. The most common of these are keywords and description . They're used like this:

 <meta name="keywords" content="Marx Brothers, humor,  vaudeville, movies, Groucho, Harpo, Chico, Zeppo, Gummo">  <meta name="description" content="An unofficial look at  America's kings of slapstick and wisecracking. With links  and freebies.">

The meta keywords tag contains a comma-separated list of words that web visitors might type into a search field; these should lead them to the current document. The meta description tag contains a few sentences that can be used in a search results page to represent the current document. A Dreamweaver object represents each of these (see Figure 7.2). To insert either into your head section, choose the object from the Insert bar or menu and enter the appropriate information in the dialog box. Figure 7.4 and 7.5 show these tags being inserted (in Design and Code views).

Figure 7.4. The meta keywords tag being inserted and later inspected using the Keywords object.

Figure 7.5. The meta description tag being inserted and later inspected using the Description object.

Maximizing Searchability

Using keywords and descriptions, and using them well are two different things. The more you know about how search engines work and how to take full advantage of their offerings, the better your standings in the search results will be.

There is much more to this subject than will fit in this chapter. Luckily, the Web is full of wonderful resources. A great place to start is World of Design (www.global-serve.net/~iwb/search_engine/killer.html). This site includes articles, tutorials, and a host of useful links related to meta tags and search engines in general.

Search engines work by sending out automated programs, called robots (or web crawlers , spiders , or bots ) to index web pages. Indexing consists of retrieving documents and recursively retrieving all documents referenced (that is, linked) from those documents. Robots determine which pages to start indexing by various means, including when a web page author or webmaster registers the page with the search engine. When a visitor accesses the search engine and enters one or more search words, the engine returns results based on its analysis of the documents it has retrieved. Results are based on matched keywords; matched words in the description, the page title, visible document content, links, and alt text are commonly searched as well.

Here's the code for how a sample head section is set up for maximum searchability:

 <head> <title> The Web Widgets Construction Materials Home Page</title> <meta name="keywords" content="web, widgets, construction  materials, building tools, web tools, snarflators,  crambangers, diffusion devices, child, children, diffuse,  diffusion, ....."> <meta name="description" content="The Web Widgets Construction  Materials Company, home to a vast selection of snarflators,  crambangers and other web tools. Visit us for daily specials  and our unique how-to section."> <!--The Web Widgets Construction Materials Company, home to a  vast selection of snarflators, crambangers and other web  tools. Visit us for daily specials and our unique how-to  section.--> </head>

What elements make this code so searchable?

Page title The information in the title tag is descriptive and readable (it can be searched, and it might show up on some search results pages) and uses several words present in the keywords list.
Keywords Keywords are case-sensitive and are in the plural where appropriate. (If the keyword is singular and the user searches using a plural, no match will be found.) No words are repeated except where necessary. (Unnecessary repetitions either are ignored or are considered " spamming " and might get the entire site banned from the search engine.) The keywords list is approximately 900 characters long, which is the maximum length accepted by some search engines (some engines accept as many as 1,024).
Description The description uses words from the keywords list. It is slightly less than 200 characters long, which is the maximum acceptable length for most search engines (some accept fewer). Note that if your description or keywords are too long, they won't be considered in the search; it doesn't necessarily mean that the robot will reject the page.
Comment A comment is inserted, repeating the contents of the description. This is to address those few robots (most notably Excite and Magellan) that do not search meta tags.

Limiting Searchability

Wait a minute: Why would you want to stop robots from indexing your documents? Quite simply, you might have a number of reasons. Certain areas of a website might contain private or secure data. If your site uses frames , you might not want framed pages to be indexed outside their framesets. Certain areas, such as ASP and CGI folders, might contain scripts that will run when accessed, with undesirable results. On a large site, the increased traffic of robots indexing every single page might be a drain on the web server.

You can limit robot traffic in two ways, one of which Dreamweaver can help with.

The robots.txt file This file, which resides on the server, can specify certain folders within a site that robots should not index. Using robots.txt, you can isolate these site areas from all robots or from specific robots. The contents of the file might look something like this:
```
 USER-AGENT: * DISALLOW: /asp/ DISALLOW: /cgi-bin/ DISALLOW: /private_folder/ 
```
The disadvantage of using robots.txt is that each web server must have only one such file, located in a folder at the root level of the server. Customizing it is, therefore, the province of the server administrator, not the individual web authors.
The meta robots tag Less reliable than robots.txt, but more easily accessible, is adding a meta tag to your document with a name of "robots" and one or more of the following values, in a comma-separated list, for content : all , none , index , noindex , follow , and nofollow . To explicitly allow access to all links within a page, use the following code:
```
 <meta name="robots" content="all, follow, index"> 
```
To deny access to a page and its links, use this:
```
 <meta name="robots" content="none,noindex,nofollow"> 
```
To allow access to the current document but not its links, use this:
```
 <meta name="robots" content="index,nofollow"> 
```

Because Dreamweaver does not offer a specific Meta Robots object, use the generic Meta object to insert this tag. From the Head tab of the Insert bar, click the Meta object. Figure 7.6 shows a meta robots tag being added to a document, with typical settings in the dialog box.

Figure 7.6. Using the generic Meta object to insert a meta robots tag into a document.

Exercise 7.1. Making a Document Searchable

In this exercise, you set up the Walt's Web Widgets home page to take maximum advantage of search engines. The files for this exercise (and the following exercises) are on the book's website at www.peachpit.com in the chapter_07 folder. If you haven't done so already, download those files to your hard drive so that you can work and save changes. Figure 7.7 shows Walt's home page.

Figure 7.7. Walt's Web Widgets home page (main.html) as it appears in a browser.

Walt's Web Widgets sells widgetsalso known as doodads, gewgaws, thingamajigs, and whatsits. His stock consists of, among other things, bent nails , rusty screws , anonymous keys, rubber bandsyou name it, Walt's has it. When people need just the perfect little piece of junk for a very particular job, Walt wants them to find him. Keep that in mind as you're filling out the keywords and description for this page.

From the chapter_07 folder, open main.html . You will be setting up searchability for Walt's home page. In the Document window, show the head content (View > Head Content, or use the View Options icon in the toolbar). In the Insert bar, choose the HTML category and find the drop-down menu of Head objects.

Start with keywords. Remember, you want to end up with 900 characters, if possible, to take full advantage of your allotted space in the search engine's index. From the Insert bar, click the Keywords icon to insert a meta keywords tag. In the dialog box, enter as many words related to widgetsand Walt's stock in generalas you can think of, separated by commas (spaces are optional). Use the following to help you get started:

 widgets, doodads, thingies, thingy, thingummies,  thingummy, thingamajigs, thingimajigs, whatsits, geegaws,  gewgaws, odds and ends, junk, stuff, paper clips, bent  screws, rusty nails, wire pieces, rubber bands, string,  washers, nuts, bolts, screws, pushpins, tacks, thumbtacks

Remember to use the plural rather than the singular, and not to repeat words unnecessarily. Note that in the sample words shown here, some plurals and singulars appear ( thingies , thingy ). That's because the plural and singular are spelled differently; in this case, users searching for the singular won't find it from the plural. Also note that alternative spellings ( geegaws , gewgaws ) are included. If you can think of a common way that people tend to misspell (or mistype) words, those variants also are good items to add to the list. That 900-character limit is higher than you might think!

How fun is it to keep counting characters as you go? Not much. Unfortunately, Dreamweaver, unlike some text editors, has no tool for automatically counting words or characters. If you have a text editor that can count characters, you could use it as an external code editor. Or, you could create the keyword list in a word processor that can count. Alternatively, if your JavaScripting skills are up to it, you might decide that this is a dandy opportunity to create a custom Dreamweaver extensiona keyword counter! See Chapter 29, "Creating Your Own Extensions," for more on writing extensions.

Check the page title. Hmm, "Welcome to Walt's" might look nice in the Bookmarks list, but it doesn't contain any real information, andmore important for the search enginesit contains no keywords. Change the page title to something more suitable: "Walt's Web Widgets: Widgets, Doodads, and Thingies."
Add the meta description tag. From the Insert bar or menu, choose the Description object. In the dialog box, enter a 100-200 character description of Walt'smaybe something like this:
```
 Visit Walt's Web Widgets for the world's largest supply of  doodads, thingummies, and whatsits, all at unbelievable  prices. We can find hard-to-get items. 
```
Repeat the description in a comment. No, you don't have to type it in again! Just do this:
- From the head content display bar in the Document window, select the Description icon.
- In the Description Property Inspector, select the text you entered and copy it.
- Go to Code view and place the insertion point just before the closing </head> tag.
- In the Insert bar, go to the Common category and choose the Comment object, which inserts the opening and closing comment tags. (Or, you can just type .)
- Put the insertion point between the two double dashes, and paste.
The new comment appears in your head section, immediately following the description. You'll see the little comment icon in the head content display bar.
Finally, give the robots some instructions letting them know that they can search Walt's entire site. (Walt has no secrets!) In the Insert bar, click the generic Meta object. Set the dialog box entries to match those shown in Figure 7.6.

Walt's Web Widgets is now ready to go public!

meta refresh

Another standardized and popular kind of meta tag is the meta refresh tag. This tag, when present, is processed by the browser, causing the page to either reload itself or load a new page after a set amount of time has elapsed. To reload the current page after 10 seconds, the syntax looks like this:

 <meta http-equiv="refresh" content="10">

To load a new page after 5 seconds, the syntax looks like this:

 <meta http-equiv="refresh" content="5;URL=pagetwo.html">

refresh tags that reload the current page are often used with pages that contain dynamic data, such as breaking news, stock quotes, or the time and temperature. They're also used with web cam pagesevery few seconds, the page reloads and a new web cam picture is automatically loaded into place. refresh tags that load new pages are often used with redirection pages: "Our site has moved!" They're also used with splash screens that show a brief welcome message or graphic for several seconds and then whisk viewers away to the true home page.

The Meta Refresh Object

In Dreamweaver, you insert refresh tags using the Refresh object, as shown in Figure 7.8. Choose the object from the Insert bar or menu, and enter the number of seconds that should elapse before the refresh and whether to load a new page or reload the current page.

Figure 7.8. A meta refresh tag being inserted and later inspected, using the Refresh object.

Tips for Refreshing

Although using the tag is nice and straightforward, as with all things there are issues to consider:

Unfortunately, refresh tags are not used only by the good guys. They also are used for much more sleazy purposes by disreputable sites (porn sites, for instance), allowing visitors to bookmark seemingly innocuous pages, such as "Aunt Bee's Quilting Zone," that are actually automatic links to "Hot Babes R Us" or "How to Construct a Nuclear Bomb." For this reason, some search engines will not index pages that contain refresh tags.
Deciding how long to pause before refreshing ( especially if the refresh will load a new page) requires some thought. How long is too long? If there is content on the current page (an animation, text to read), how long is long enough?
If the refresh will be going to a new page, you might consider including a clickable link to that new page so impatient users don't have to wait the required number of seconds.

Exercise 7.2. Create a Refreshing Splash Page

To get some experience with the refresh tag, you can use the Web Widgets files from the preceding exercise. In the chapter_07 folder, along with main.html , is splash.html , shown in Figure 7.9. Open that file now. It contains an animated logo and welcome message, and Walt wants his customers to see it for a few seconds before going on to visit the rest of the site.

Figure 7.9. The Walt's Web Widgets splash page (splash.html), as it appears in the browser.

No matter what size the browser window is, the page content of splash.html will be vertically and horizontally centered onscreen. The effect is created by placing the content in a table with a width and height of 100% and cell alignment of center (horizontal) and middle (vertical). The height attribute for tables isn't official HTML, but currently all browsers support it, and it's an easy way to create a swell effect.

To begin, add the refresh tag. In the Insert bar, go to the HTML category and, from the Head objects, choose Refresh. When the dialog box appears, choose main.html as the file to load. How long should you have visitors wait? Start by entering 10 seconds in the Delay field.
Before proceeding any further, try it out in a browser. Choose File > Preview in Browser and then sit and wait until the refresh occurs. (If it doesn't occur, go back to Dreamweaver and double-check your steps!) Is 10 seconds too long? Try 5 secondsor find your own best delay time.
What about the viewers who don't want to wait at all? For them, you will add a regular link to main.html . You can add the link to the animated logo itself, or you can add a line of text, click to enter , beneath the logo. Alternatively, you can do both, just to cover all your bases. After you've done that, try it out to make sure it works before proceeding.
Finally, change the scenario. What if the splash page has something on it that people might want to read? Perhaps it's a joke, an introductory sentence or two, or an interesting news tidbit. Add some lines of text to the page so that it looks like the page shown in Figure 7.10.

Figure 7.10. The final Web Widgets splash page, with its added content, ready to entertain and divert visitors.
Now preview the page in a browser and imagine you're a first-time visitor. Maybe you want a few more seconds to read the text. Or maybe you think the delay time you've chosen still works fine. Just remember, the more there is to absorb on the page, the longer you might want to delay.

Why do websites have splash pages? First, there's a psychological reason. You're "framing the picture," mentally putting visitors in the mood for the website to come. Obviously, this goal is more appropriate for some websites (entertainment sites, online brochures ) than others (informational sites). Second, there's a technical reason. While the viewer is seeing the splash page, you can be performing a browser check, starting the download of large graphics or media files that will be needed later, checking cookies, and so forth.

[ LiB ]

Working Smart with meta Tags