|[ 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.
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.
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.
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.
To insert a meta tag, follow these steps:
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.
<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">
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).
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.
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.
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.
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.
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
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.
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.
Walt's Web Widgets is now ready to go public!
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.
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.
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.
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.
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.
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 ]|