WEB ENGINEERING AND APPLICATIONS ITC 311 REEM ALMOTIRI Information Technology Department Majmaah University Lecture 7 The HTML meta Element • Metadata is information about data. Metadata will not be displayed on the page. • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. The <meta> tag provides metadata about the HTML document. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. Search services Originally there were two kinds of search services on the Web: "Search engine" and “Search directory" Search engine Google and AltaVista are all forms of search engines. These search engines write programs known as robots, crawlers and/or spiders that have the following functions: (1) to locate Web pages, (2) to read the contents of the Web pages (3) report its findings back to the search engine's indices or databases. Many search engines update their index either on a bimonthly or monthly basis. Search Directory Yahoo!, Open Directory Project (dmoz.org), Gipsy are forms of Web directories. These directories use human editors to review sites that are submitted for submission to the directory. Directories, unlike search engines, use a hierarchical tree structure to organize their database. Another common distinction is that a directory tends to list Web sites (root directory of a site or homepage) whereas a search engine will list Web pages (individual pages of a Web site). The HTML meta attributes Some search engines will use the name and content attributes of the meta element to index your pages. Example 1 - Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> Example 2 - Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS" /> Example 3 - Define the last revision of your page: <meta name="revised" content="Hege Refsnes, 23/10/2011" /> Example 4 - Refresh document every 30 seconds: <meta http-equiv="refresh" content="30" /> Example Describe metadata within an HTML document: <head> <meta name="description" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Hege Refsnes" /> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> profile attribute The URL in the profile attribute points to a document containing information regarding metadata. <head profile=http://www.yoursite.com/myprofile.txt > Attribute Value Description http-equiv content-type content-style-type expires set-cookie others Provides an HTTP header for the information/value of the content attribute name author description keywords generator revised others Provides a name for the information in the content attribute Value Description author Defines the author of the document. Example: <meta name="author" content="Hege Refsnes" /> copyright Defines copyright information of the document. Example: <meta name="copyright" content="2011© W3Schools.com" /> description Search engines can pick up this description to show with the results of searches. Example: <meta name="description" content="Free web tutorials" /> distribution Declares whether the document is available to the web or on an intranet. Example: <meta name="distribution" content="web" /> expires Specifies the date and time when the page expires. Example: <meta name="expires" content="Fri, 10 Jun 2011 12:00:00 GMT" /> keywords Informs search engines what your site is about. Example: <meta name="keywords" content="HTML, HTML DOM, JavaScript" /> owner Defines the owner of the page or site refresh The document will display for a specified amount of time before refreshing or switch to a new URL. Example: <meta name="refresh" content="10" /> <meta name="refresh" content="10;URL=http://www.w3schools.com" /> Value Description contentlanguage Specifies the natural language(s) of the document (used by search engines to categorize pages by language). Example: <meta http-equiv="content-language" content="en-US" /> content-type Specifies the character set for the contents of the document. Example: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> date Specifies the date and time when the page was created. Example: <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT" /> last-modified Specifies the last modification date. Example: <meta http-equiv="last-modified" content="Mon, 03 Jan 2011 17:45:57 GMT" /> location Redirects the visitor to another location. Example: <meta http-equiv="location" content="URL=http://www.w3schools.com" />