Metadata

Metadata is data about data (i.e) data that describes other data). Metadata is information you can insert into an HTML file to supplement information about the content of a specific page or website.

Note

Metadata is not rendered by the browser. Metadata can transfer useful information to browsers, servers and users. Metadata can be read and organised by internet robots and search engines.

<meta> tag

To insert metadata into an HTML file, insert <meta> tags inside the <head>..</head> element.

Note

Notes: - <meta> tag doesn't have an ending tag. (i.e it is an empty element) - There can be as many tags inside the <head>..</head> element as you like.

The meta tag has attributes that allow you to store the metadata.

* content - Used to store the actual metadata content. * name - Values of name attribute are ~ description ~ keywords ~ author * http - The values are ~ creation-date ~ expires ~ from ~ replay-to ~ content-type ~ refresh ~ pragma * scheme - Used to refine the information given by the other attributes. * lang - This attribute is used to specify the language. (e.g. en, uk, ca, ro, etc.,) Note:

Note

- The metadata consists of the a pair of attributes. - name=value, content=value - http-equiv=value, content=value

web page description

To insert a description of a web page or a web site, use a tag with these attributes:

name="description" content="a descriptive inside a double quoted string"

snippet

<html> 
<head> 
<meta name="description" content="Get  Famous Quotes, Inspirational Quotes, Movie Quotes, Love Quotes, Life Quotes, Funny quotes, Last Saying Quotes."> 
</head> 
<body> 
<p>An example of using metadata to define the description of a webpage</p> 
</body> 
</html>

web page keywords

Keywords are frequently used by internet search engines like Google, Yahoo, Bing etc. The keywords must be carefully defined to exactly describe the website.

name="keywords" content="List of keywords separated by comma"

snippet

 
<html> 
<head> 
<meta name="keywords" content="life quotes, famous quotes,quotes and sayings,inspirational quotations,motivational quotes"> 
</head> 
<body> 
<p>An example of using metadata to define the keywords of a webpage</p> 
</body> 
</html>

Author and Copyright

To insert information about the author and copyright, insert two elements with their name attributes set to "author" and "copyright". These details are not visible to the users.

To make visible to the users add the author and the copyright details inside the <body>..</body> tag.

snippet

<html> 
<head> 
<meta name="author" content="Cruise Warner"> 
<meta name="copyright" content="QuoteFellas.com. All Rights Reserved"> 
</head> 
<body> 
Copyright &copy; QuoteFellas.com All Rights Reserved. 
</body> 
</html>

Output

Creation and Updating Date

The Creation date and the Updation date of a webpage can be notified to the search engines with the help of <meta> tags and their http-equiv attributes set to "creation-date" and expires".

The value of each content attribute should be a date with the below format.

ddd - Represnts first three letters of the day name (Mon, Tue, etc.) dd - Represents the day number (01, 02... 31) mmm - Represents the first three letters of the month name (Jan, Feb,.. Dec) yyyy - Represent the year (e.g. 2013) hh:mm:ss - Represents the hour, minute and second (e.g. 11:48:53) ttt - Represents the standard time (e.g - GMT)

snippet

<html> 
<head> 
<meta http-equiv="creation-date" content="Fri, 12, Jul 2013 12:00:00 GMT"> 
<meta http-equiv="expires" content="Sun, 21, Jul 2013 12:00:00 GMT"> 
</head> 
<body> 
Welcome to Rookie Nerd 
</body> 
</html>

Note

To use the different date format, use the scheme attribute as below

snippet

<html> 
<head> 
<meta http-equiv="creation-date" content="12-25-2013" scheme="Month-Day-Year"> 
</head> 
<body> 
Welcome to Rookie Nerd 
</body> 
</html>

Contact Details

To add the name and email address of the person responsible for the design of the webpage, insert two elements with the http-equiv values set to "from" and "reply-to"

snippet

<html> 
<head> 
<meta http-equiv="from" content="alex@gmail.com"> 
<meta http-equiv="reply-to" content="pandi@yahoo.com"> 
</head> 
<body> 
Welcome to Rookie Nerd 
</body> 
</html>

The File Details

snippet

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-5"> 
</head> 
<body> 
Welcome to Rookie Nerd 
</body> 
</html>

lang attribute

snippet

<html> 
<head> 
<meta name="keywords" content="aplicatie" lang="ro"> 
<meta name="keywords" content="aplication" lang="en-us"> 
</head> 
<body> 
<p>An example of using metadata to define the keywords of a webpage in different language</p> 
</body> 
</html>

Refreshing a web page

snippet

<head> 
<meta http-equiv="refresh" content="5"> 
</head> 
<body> 
This page will be automatically refreshed in 5 seconds. 
</body> 
</html>

Forwarding a web page

snippet

<html> 
<head> 
<meta http-equiv="refresh" content="10; url=http://www.quotefellas.com"> 
</head> 
<body> 
This page will be automatically redirected to the Quote Fellas website in 10 seconds. 
</body> 
</html>

Pragma directive

snippet

<html> 
<head> 
<meta http-equiv="pragma" content="no-cache"> 
</head> 
<body> 
This page will be downloaded every time the page is accessed. 
Welcome to Rookie Nerd 
</body> 
</html>

comment block

snippet

 
<html> 
<head></head> 
<body> 
<!-- This is a comment block and it will not be rendered by the browser --> 
Welcome to Rookie Nerd 
</body> 
</html>

Output

Welcome to Rookie Nerd