Metadata in HTML ... EXAM OBJEGIVES. .. Metadata and document identification.. Adding metadata to Web pages.. Metadata and indexing

Transcription

1 Metadata in HTML EXAM OBJEGIVES Metadata and document identification.. Adding metadata to Web pages.. Metadata and indexing

2 Chapter 10.. Metadata in HTML 255 M etadata, also known as data about your data, is a concept worth mastering if you're looking to join the Web designers of the world. This chapter is dedicated to metadata and covers topics such as: how you can use metadata to enhance the searchability of your Web sites and how to redirect your Web sites. Overview of Metadata Metadata and document identification Metadata is an interesting concept to grasp. Many people will tell you that metadata is data about data. But, just what does that mean? The easiest way to understand what that means is to look at an example. If you were to create a document describing all the surrealist artists, you could define some metadata that would be used to describe your content. In other words, the following keywords would be metadata: surreal, surrealists, artists, max ernst, and salvador dali. Each of these keywords is descriptive of the Web page's contents. Metadata is used in both XML and HTML. In HTML, you can add metadata to your document with the <me t a> tag. Although most metadata is added with the <meta> tag, there are other tags and markup that also supply metadata, such as the document type (DOCTYPE) declaration and the <t it1 e> tag. You take a look at all of these tags in the following sections. Metadata serves specific functions within HTML, such as:.. The DOCTYPE declaration identifies to which version of HTML your document conforms. +- The <tit1e> tag defines a descriptive title for your document. +- The <me t a> tag defines keywords, document descriptions, author information, and document expiration data information. Including a DOCTYPE declaration In Chapter 7, you found out about the Document Type Definitions (DTDs) that are defined for HTML 4. If you need a reminder, there are three DTDs that can be used to define an HTML 4 document: Transitional, Strict, and Frameset. HTML 3.2 also has its own DTD. Most designers leave this information out of their documents. If you don't believe us, just take a second to cruise the Web and try to locate a document that actually includes a DOCTYPE declaration pointing to the appropriate DTD.

3 256 Part II + Understanding Web Site Design Technology With that said, you might be wondering why you should care. There are a few reasons you should care: If you reference a DTD, you can use a validator to check your document for mistakes. DTDs provide information about to which version of HTML the document conforms. The HTML 3.2, 4.0, and XHTML l.0 specifications require the DOCTYPE declaration if you want your document to be a strictly conforming (X)HTML document. For this chapter, you're only concerned with the second point, because in essence, the DOCTYPE declaration provides metadata information. Take a look at an example: <!D OCTVPE html PUBL IC "- II W3C II DTD HTML 4.0 Tr an si t i on al li EN" > You might notice that this is an abbreviated version of the DOCTYPE declaration that only includes a reference to the uniform resource name (URN), and leaves the URL of the DTD out. From this markup, you know three things right off the bat: The document is an HTML document. The document conforms to HTML 4.0 specification. The document uses the tags defined by the Transitional DTD. Exam Tip The exam and most designers refer to the DOCTYPE declaration «! DO CTY PE» as a tag. Do not let this terminology confuse you. Technically, it's a declaration. The title tag The <tit 1e> tag is a required tag that must be included as a child of the < h e ad> tag. What you probably already know is that the <tit1e> tag defines a title for your document that is displayed in the title bar of the browser window. What you may not know is that the content of the <tit 1e> tag is metadata that is used by search engines. The lesson here is to always include descriptive titles, and include a keyword or two in the <tit1e> tag. For example, the following title is not recommended: <head> <title>my <l head> doc ument </ title> However, if you change your title to "Surrealist Artists," you would have descriptive title that would help search engines locate your document; for example: <he ad> <title>s ur rea li st Arti sts< / title> <I he ad >

4 Chapter 10.. Metadata in HTML 257. Exam Tip The < tit1 e > tag is required and is a great way to add keywords that search engines can use to index your documents. Using the meta tag Adding metadata to Web pages Now you're ready to get to the meat of this chapter, the <meta > tag. The <meta> tag is an empty tag that requires the con tent attribute and either the name or httpequi v attribute. The <meta> tag can be used to:.. Define a document's expiration data.. Define author information.. Define keywords, which are used by search engines.. Define a description that is used by search engines This list is not exhaustive, however, by the end of this chapter, you need to know how to use the <meta > tag to define each item in the previous list. Exam Tip You need to know the main reasons why designers use the <meta > tag: to define author information, document expiration data, keywords, and descriptions. There are two different types of <meta > tags: name and http-equi v. A <me t a> tag that uses the ht t P -eq u i v attribute defines information that needs to be attached to the HTTP header. For example, it might define cookie information that needs to be passed to the HTTP client. This relationship is discussed in the following sections. The http-equiv attribute The http- equ i v attribute binds meta information to the HTTP header. As the browser reads a Web page with an h t t P - eq u i v attribute, it grabs the content attribute value and attaches it to the document header, which is then sent prior to the rest of the page content. When processing the document, the browser or HTTP server may use the information defined by the content attribute, which is then attached to the header: <meta http- eq uiv="expires" content="tue, 01 Jan :00 :00 GMT" > The previous markup produces the following HTTP header: expires: Tue, 01 J an : 00:00 GMT

5 258 Part II.. Understanding Web Site Design Technology How HTTP Works HTTP stands for the Hypertext Transfer Protocol and defines rules for exchanging resource.s identjfied by a URL on the Web. Each file can contain references to other files (think hyperlinks). A browser (HTTP client) opens a connection with the Web server (HlTP server) by sending a request message. The server then sends a response message that normally contains the document that was requested. After the document is sent, the server closes the connection. Headers provide information pertaining to the request by the client or a response by the server. Notice that the value of the http -eq ui v is not random; it's predefined. You should also notice that the content attribute provides the information that is passed onto the HTTP header. The value expi res is one of five values that you'll look at in the following sections: + expi res + pragma + refresh + set-cookie + windovl-target http-equiv="expires" In many cases, when visiting a Web page, the browser will save a version of that page in its cache. The reason for this is because browsers use the cached version of a page if you decide to return to that page. If you use a <me t a > tag with h t t p- equ i v = " ex p i res ", you can control when the browser uses a cached version, and when it visits the server for a fresh version. Tip A browser's cache is a temporary storage directory for Web pages. If you go back to a page that you've recently visited, the browser is likely to grab the page from ~ the cache, rather than making another visit to the server. The purpose of this is to save you time, and save the server effort. For example, to create a document that expires on August 8, 2000, you include the following <meta > tag in your document: <meta http-equi v="ex pires " content=" Tue, 08 Aug :21 : 57 gmt ">

6 Chapter 10.. Metadata in HTML 259 Take a look at just where it fits into an HTML document: <!DOCTYPE HTML PUBLIC "- // W3c// DTD HTML 4.01 Tran sitional // EN" ''http: // 3.org / TR / htm14 / loos e.d t d'' > <html > <head > <title>documen t t i t le</t i t le> <me t a ht tp-equi v="expires " c on t en t ="Tue, 08 Aug : 21:57 gm t " > </ head > <body>... document content goes here... </ body > </ html > http-equiv="pragma" This simple value prevents some browsers (namely Netscape Navigator) from caching the document. Similar to using the expi r es value, this is another way to control browser caching. The associated content attribute must be set equal to no-cache. When this is included in a document, some browsers are prevented from caching a page locally. You include it in a document as follows: <!DOCTYPE HTML PUBLIC "-//W3c//DTD HTML TransitionalllEN" '' > <html> <head> <title>document title</ title> <meta http-equiv="pragma" content="n o - ca che" > </head > <body >... do cument content goe s here... </ body> </ html > http-equiv="refresh" As a designer, the odds are that your boss or client will ask that you redirect a Web page. For example, you've designed a new page for the contacts portion of your site. You know that there are a lot of outside sources that link to your contacts page. Therefore, you redirect the existing URL to a new URL so even people with the old link get to the new content. Redirecting a Web page is not magic; it's achieved by adding a <meta > tag. The http-equi v attribute must be set equal to re f resh and the content attribute should be set equal to seconds and the new URL. The seconds should be defined first, followed by a semicolon. Next you type URL= followed by the URL of the new location. The contents of the entire string are in quotation marks - note that the value of the URL itself is not contained by quotation marks. Intbe Real World Internet Explorer and Netscape support this method of redirecting users, but not all browsers do. Therefore, be sure to always include a hyperlink to the new URL.

7 260 Part II Understanding Web Site Design Technology The syntax is important, so take a look at this example: <! OOCTVPE HTML PUBLIC "-//W3C// OTO HT ML 4.01 Transiti onal /l EN" " / TR/htm14 / l oose.dtd" > <html> <hea d> <title>oocument titl e</ title> <meta http- equiv="refresh" content="5;url= </head> <bo dy>... document content goes he re... </body> </html > Caution One word of warning, do not set the seconds to O. Doing so prevents users from being able to use their browser's back button. There's nothing more frustrating than having a Web page disable a function that you rely on. The exam does not cover this; however, you should be aware of this warning found in the HTML 4 Specification: "Some user agents support the use of meta to refresh the current page after a specified number of seconds, with the option of replacing it by a different URL. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects:' http-equiv="set-cookie" A Web site can place information on a user's hard drive using a cookie. The information is normally for future use and is stored by the server on the client side. There are many instances of cookies. For example, it's becoming common to find sites that provide personalized portals to their site. For example, you can set your own preferences at e8ay.com. In these cases, a cookie is used to record the users' preferences. Some of the features provided by cookies won't work and may cause problems if you don't have cookies enabled on your browser. As the user, you have access to information about the cookies stored on your hard drive. This is not to say that you'll understand what each cookie means, but you do have access to them. If you're using Netscape, you can locate a list of all cookies in a file named coo k i es. txt. Internet Explorer stores them each as a separate file in a subdirectory. As the designer, you can use the se t - co o k i e value to create a cookie to collect information. A cookie is created on the client side by including a set-cookie header as part of an HTTP response (typicauy generated by a CGl script). As with all other http-equ i v attributes, you must have an associated content attribute. In this case, the content attr i bute can contain several different values, one of which is an optional expiration date. If an expiration date is included,

8 Chapter 10.. Metadata in HTML 261 the cookie is saved on the user's hard drive until the expiration date, at which time, it's deleted. If an expiration date is not included, the cookie is discarded when the user exits his or her browser. Take a look at an example: <!DOCTVPE HTML PUBLIC "-IIW3CIIDTD HTML 4.01 TransitionalllEN" " <html> <head> <title>document title</title> <meta http-equiv="set-cookie" content="cookievalue=xxx;expires=friday, 31-dec-99 23:59:59 GMT; path=i"> </head> <body>... document content goes here... <I body> </html> http-equiv="window-target" The last htt p -equ i v value covered in this chapter is wi ndow- target. Think back to frames for a second and you might remember the ta rget attribute. Similar to the ta rget attribute, defining a wi ndow-ta rget http-equi v value can control the document window. For example, if you define content="_top", the <meta> tag forces the window to open in the top window, allowing it to escape frames. The con ten t attribute can accept most values that the HTML t a rg et attribute can. For example, it can accept _b 1an k or _pa ren t. Take a look at an example: <!DOCTVPE HTML PUBLIC "-IIW3CIIDTD HTML 4.01 TransitionalllEN" " <html> <head> <title>document title</title> <meta http-equiv="window-target" content="_top"> </head> <body>... document content goes here... </body> </html> The name attribute Unlike the http -eq u i v attribute, the n a me attribute identifies information that does not correspond with HTTP headers. This is not to say that this information is not useful. You can define keywords, descriptions, and other information that is passed to search engines and directories, spiders, and other entities.

9 262 Part II.. Understanding Web Site Design Technology As with the http-equiv attribute, you must use a co ntent attribute for every name attribute. The content attribute defines information that is relevant to the name value. The following are a few of the possible n ame values:.. Author. Specifies the name of the author of the document: <meta name-"auth or " content-"your Name" ).. Copyright. Defines copyright information: <meta name- "co pyri gh t" co ntent-"copyr i ght 2002, You r Co mp any ").. Description. Defines a description sometimes used by search engines to show with the results of searches: <meta n ame-" des c r i pt ion" con t en t "A description of yo ur compa ny goes here.").. Expires. Defines an expiration date of the document: <met a name - " exp ire s " content-"tue, 08 Aug :21:57 GM T" ).. Generator. Specifies the name of the program that created the document: <meta name-"gene ra tor " content-"microsoft FrontPa ge 4.0").. Keywords. Defines keyw'ords that are used by search engines: <me t a name-"keyword s " content-"xhtml, XML, C55" ).. Owner. Specifies the owner of the page or site: <meta name-"owner" content-"your Name").. Reply-to. Provides an address of contact for document: <met a name-"reply -to" co ntent-"name@d omain. co m" ).. Robots. Used to define pages to be excluded from robot indexing: <meta name-"robots" co ntent-"n ofo ll ow ") If you add a few of these attributes and values to an HTML document, it should resemble the following: <! DOC TYPE HTML PUBLI C "-IIW 3CIID TD HT ML 4.01 Tran siti on all len" "http: // www. w3.or g/ TR/ htm14/loose.dtd'' ) <html) <head ) <title) Document title </t itle) <meta name-"autho r " co ntent- "Jane Doe") <meta name-"copyright" co ntent-"copyr i ght (cl Jane Doe" ) <meta name-"description" con tent-"html and XHTML Tutori al ") <me ta name -"gene ra tor" co ntent-"mi cro soft FrontPa ge 4.0") <meta name-"keywords" co ntent-"html, XHTML, Web pages" ) <meta name-"r obo ts" content-"all") </ he ad) <body >... do cument content goes here... </b ody> </ html >