The HTML META Tag

This document provides instructions on how to use the HTML META tag to help search engines better index your Web documents. It also provides speci ic instructions or using the META tag with the Alta!ista "earch utility. Alta!ista is the search engine used at #enn to manage$ search$ and retrieve in ormation across its Web servers. Web developers who do not want their documents indexed via the Alta!ista "earch utility should consultExcluding %irectories rom Alta!ista "earch. #resently$ Alta!ista does not support the META &'('T" tag. Note: Web developers should be amiliar with the actors that in luence how Alta!ista ran)s documents$ and how to create Web documents that ta)e advantage o this eature. "ee How Alta!ista &an)s "earch &esults or more in ormation.

What Is a META Tag?
The META tag is primarily used to help search engines better index a document by supplying additional in ormation about the document. The types o additional in ormation that META tags can provide include an author*s name$ a description or short abstract o a document$ or a set o )eywords or indexing a document. #roviding this type o additional in ormation should increase the chance that users will ind your documents ++ the in ormation they want ++ on the Web. In addition to providing indexing in ormation$ META tags can also be used to re resh a Web page or to redirect a user rom one Web page to another. ,ot all search engines use the META tag. -or example$ Alta!ista and In o"ee) use META tags or indexing but Excite does not. (ecause #enn uses the Alta!ista search utility$ document developers are encouraged to use META tags to improve the retrieval o their documents by the #enn community.

Formatting the META Tag
The META tag is part o the header in ormation o an HTML document. It has a start tag but does not have a corresponding end tag. The tag is placed a ter the TITLE end tag. and more than one META tag can be used within a document$ depending on the type o in ormation that you want to provide. Example

The META tag is placed in the header section of the HTML document, after the </TITLE> tag:
<HTML> <HEAD> LT!TITLE "T!### for $indo%s &' LT!/TITLE "T! LT!META HTT#(E)*I+,-DE./0I#TI12- /12TE2T,-This document descri3es ho% to configure $indo%s &' for dial(up net%or4ing on 5our personal computer6-> </HEAD> The META tag is ormatted as a name/value pair$ where ,AME or HTT#+E01I! identi ies the name or property and 2',TE,T identi ies the property value. 3ou can use ,AME and HTT#+E01I! interchangeably. 4When using ,AME$ the interpretation o the attribute is le t up to the browser. whereas the HTT# protocol will interpret HTT#+E01I! attributes.5 Example

7ou can use the 2AME and HTT#(E)*I+ attri3utes interchangea3l56 The format of the tag is as follo%s6 2ote that 5ou must replace the 8 %ith an HTML attri3ute 9e6g6, :E7$10D.; and the 88 %ith a <alue or te=t string 9e6g6, -artificial intelligence,artificial language-;6 #lace 3oth the attri3ute and its corresponding <alue in dou3le >uotes6
&LT;META NAME="?" CONTENT="??" &GT;

<META 2AME,-:E7$10D.- /12TE2T,-ppp,dial(up net%or4ing-> or LT!META HTT#(E)*I+,-8- /12TE2T,-88- "T! <META HTT#(E)*I+,-:E7$10D.- /12TE2T,-ppp,dial(up net%or4ing->
META Tag Attributes
"everal attributes can be used within the META tag. This document provides examples or the %E"2&I#TI', and 6E3W'&%" attributes. -or a list o other META tag attributes and how you can use them$ see A %ictionary o HTML META Tags. DESCRIPTI N This attribute controls what text the search engine will display on the 7"earch &esults7 page as the result o a search. (ecause users will read this in ormation and determine whether they want to visit your page$ describe the content$ sub8ect$ or purpose o your document as succinctly as possible.

"> Will display on the Penn Web "Search Results" page as follows.Author: Lisa Horowitz --> <!-..META HTTP-EQUIV="DESCRIPTION" CONTENT="This document describes how to configure Windows 95 for dial-up networking on your personal computer. Example The code: &LT.11 Sep 97 The actual source code or the document is shown below. Note that "PPP for Windows 95" before the description would be taken from the TITLE tag: PPP for Windows 95 This document descri3es ho% to configure $indo%s &' for dial(up net%or4ing on 5our personal computer6 http://%%%6upenn6edu/computing/help/doc/dialup/%in&'ppp6html ( si?e @@: ( A .edu/museum/museum-disabilities. Thus$ i the opening paragraph o your document consists o names o committee members$ this in ormation would be displayed as the document summary on the 7"earch &esults7 page.upenn.Services for Patrons with Disabilities. <P> !E"W RDS The 6E3W'&%" attribute provides additional )eywords to describe the content or sub8ect o your document. attribute$ the search =uery will display on the 7"earch &esults7 page the title o the document 4i no title is speci ied using the TITLE tag$ the text 7.ource code of document %ithout the META DE.Services for Patrons with Disabilities</TITLE> <!-. The search engine will use these )eywords in addition to the rest o the )eywords that it automatically indexes or your document. It is the mission of the University of Pennsylvania Library to provide equal access to.< characters to be entered as )eywords. .library.size 2K . attribute. http://www. This number includes the the text between the TITLE start and end tags and the text you*ve written or the %E"2&I#TI'.Services for Patrons with Disabilities Museum Library . Example 7ou can define a set of 4e5%ords for 5our document6 *sers can then use these .Services for Patrons with Disabilities</strong></h2> <hr> It is the mission of the University of Pennsylvania Library to provide equal access to information for all Penn students. -or example$ the actual search =uery 7museum7 returns the ollowing results on the #enn Web 7"earch &esults7 page> Example The follo%ing document summar5 does not ha<e a META DE.Last Revision: 11/05/96 --> </HEAD> <BODY bgcolor="#ffffff"> <H1><img src="/img/banner.gif" alt="Penn Library"></H1> <H2><strong>Museum Library .ote that Alta!ista has counted and subse=uently shown on the 7"earch &esults7 page the 7 irst ew lines7 o the document which is comprised o the text or the TITLE tag$ the text or the H.Note: Alta!ista will display up to 9$:. tag$ and the irst line o the paragraph./0I#TI12 attri3ute: Penn Museum Library .. Note: Alta!ista will allow a maximum o 9$:. When ormatting this section$ put your most important )eywords irst$ use a comma to separate each )eyword$ and place the list o )eywords in double =uotes. In selecting )eywords$ be aware o how Alta!ista treats =ueries entered in uppercase and lowercase letters 4see the Alta!ista online help5 and )eep in mind how your users will want to search and retrieve in ormation./0I#TI12 attri3ute: <HTML> <HEAD> <TITLE>Penn Museum Library . faculty and staff..< characters or a %E"2&I#TI'.html . retrieving and using library materials.ep &B Without the META %E"2&I#TI'.o Title7 will display5 and the irst ew text lines o the ile. The Library has made provisions to assist patrons with disabilities in accessing. Example . "ee %etermining 6eywords or Web %ocuments or more in ormation.

The reason why meta tags used to be so important was because they were relied on by search engines to build a profile of a web page. however.ppp windows.4e5%ords to impro<e their chances of finding 5our documents on the $e36 <META HTTP-EQUIV="KEYWORDS" CONTENT="dial-up networking. <meta charset="utf-8"> is the same as <meta http-equiv="content-type" content="text/html. below) but the value can be: • • • content-type. name. an encoding declaration. The charset attribute can be used as a shorthand method to define an HTM document!s character set. The keywords meta data was used (and abused) extensively. The attribute should rarely be used (although see charset note.modem connection. defining what character set is being used. HTTP Equivalents The http-equiv attribute can be used instead of the name attribute and will make an HTTP header. charset=utf-8">. When the name or http-equiv attribute is used. <head> <title>Air conditioners8 7EAH conditionersC</title> <meta charset="utf-8"> <meta http-equiv="refresh" content=" "><!--not recommended for sane people--> <meta name="description" content=""his is my really# really# $%&''( excitin) we* pa)e a*out air conditioners"> 666 .external modem"> Meta tags don’t do anything to the content that is presented in the browser window. which defines how often (in seconds) a page automatically refreshes or if it should automatically redirect to another page. and content. but they are used by the likes of search engines to catalogue information about the web page. Not great for accessibility. or refresh. author is used to explicitly state one of the HTML page’s authors and description is often used by search engines (such as Google) to display a description of a web page in its search results. and keywords. http-equiv. The most commonly used names are author. the preferred stylesheet from a selection of link or style elements.modem configuration. default-style. description. the content attribute is then used in conjunction with them to apply meta data itself. for example. There is one meta tag which can be used as many times as you desire inside a head element and they can contain the attributescharset. most search engines use the actual content of the page itself.windows ppp. Nowadays. which is always a good thing to do. which is information sent to the server where the web page is held.windows 95 modems. Names The name attribute can be anything you like.

% html> <html> .Tags. and Elements "lthough the basics of HTM is plain text. which surround content and apply meaning to it. Attributes. we need a bit more to ma#e it a nice and shiny HTM document.-"(. %hange your document so that it loo#s li#e this& <!+. $ead more about web hosting Tags The basic structure of an HTM document includes tags.

The stuff between <*ody> and </*ody> is the main content of the document that will appear in the browser window.uirement. in this case). loo#s li#e this & <*r> ) a line brea# doesn!t hold any content so the tag merrily sits by its lonely self. <html> is the opening tag that #ic#s things off and tells the browser that everything between that and the</html> closing tag is an HTM document. is a document type declaration and it lets the browser #now which flavor of HTM you!re using (HTM '. a form of HTM based on another mar#up language called 0M . go bac# to the web browser and reload the page. The appearance of the page will not have changed at all.-"(. Closing tags The </*ody> and </html> put a close to their respective elements (more on elements in a moment). which are extra bits of information.uotation mar#s aren!t always essential but it is a good)practice convention HTM 3og uses for consistency and clarity. *e suggest you do the same. not presentation. They loo# something li#e <ta) attri*ute="value">/ar)arine</ta)>. . some prefer the other. -ou might come across . (t isn!t. 1ome developers prefer one way. Attributes Tags can also have attributes. .% html>. browsers will assume you don!t really #now what you!re doing and act in a very peculiar way. This is a remnant of 0HTM . *e will come across tags with attributes later. and this example has now defined some fundamental elements of a web page. which do not wrap around content will close themselves. but it!s a convention we!re using in these tutorials because it!s good practice that results in cleaner.<*r>/.<*r />/ instead of simply .uotation mar#s.self)closing/ tags. in the format of opening tag + content + closing tag. (t!s very important to stic# this in ) (f you don!t. *e tossed a coin and decided to stic# with the simpler version. To get bac# to the point. HTM ' is much more chilled out than 0HTM and will be happy with either format. easier to understand code. Not all tags have closing tags li#e this (<html></html>) some tags.<*ody> This is m5 first %e3 page </*ody> </html> Now save the document again. will loo# li#e . 2nce again. The line)brea# tag for example. always a re. <!+. strictly spea#ing. "ttributes appear inside the opening tag and their values sit inside . "ll you need to remember is that all tags with content between them should be closed. whereby a *r tag. for example. The first line on the top. but the purpose of HTM is to apply meaning. *e will come across these examples later.

. 4lements are the bits that ma#e up web pages.Elements Tags tend not to do much more than mar# the beginning and end of an element. -ou would say. .</title>/ are tags.<title>$umple 0tiltskin</title>/ is a title element.<title>/ and . whereas . for example. "s another example. that everything that is in between (and includes) the <*ody> and </*ody> tags is the body element.