HTML <meta> tag

So webpages have data, but how do we describe that data? A description of the data on a webpage may often be important for search engines as well as for users.

This tutorial focuses on:

The <meta> tag

The <meta> tag

The <meta> tag is one of the most important tags in HTML. The <meta> tag is used to describe the page in some way as well as other things such as refreshing a page automatically after a certain amount of time, and preventing webpages from being displayed in another websites frames page. Some of the things that can be described using the <meta> tag include the pages author, the software used to create the page, and a description of the content on the page.

NOTE: The <meta> tag goes in the head section of an HTML document and has no end tag.

The <meta> tag is a little confusing since the values you assign to its attributes depend on each other to work together. Hopefully, the explanations about its attributes that follow will clarify things and will explain how the different attributes of the <meta> tag work together.

Attributes of the <meta> tag

name - This attribute is used to connect the content attribute to a name.
http-equiv - This attribute is used to connect the content attribute to HTTP headers. The http-equiv attribute is used to tell the browser certain things about webpages such as how often a webpage should be refreshed.
content - This attribute defines data to be associated with the name or http-equiv attributes. When associating data with the name attribute, this attribute stores data about webpages that will be passed to search engines, such as the author of a webpage or the description of a webpage. When associating data with the http-equiv attribute, this attribute stores data about webpages that will be passed to the web browser such as how often to refresh a webpage or when a webpage expires.

Examples of the <meta> tag utilizing the name and content attributes:

Offering keywords to search engines that can be used in their searches:

Setting the name attribute to "keywords", you can then specify a set of keywords for a webpage with the content attribute. The set of keywords should be keywords that are directly related to the content and subject matter of a webpage.

Offering a description of a webpage to search engines:

Setting the name attribute to "description", you can then specify a description for a webpage with the content attribute. The description of a webpage will be shown to a search engine, so it should be kept short, simple, and straight to the point (one or two sentences).

Telling search engines what software was used to create a webpage:

Setting the name attribute to "generator", you can then specify what software was used to create a webpage with the content attribute.

Telling search engines who created a webpage:

Setting the name attribute to "author", you can then specify the name of the author who created the webpage with the content attribute.

Telling search engines when to expire a webpage in their databases:

Setting the name attribute to "expires", you can then specify when to expire the webpage in a search engines database with the content attribute.

Examples of the <meta> tag utilizing the http-equiv and content attributes

Reloading the current page every five seconds:

Setting the http-equiv attribute to "refresh", you can then specify when to reload the webpage (in seconds) with the content attribute.

Page refreshing is common for time sensitive information such as currency pricing (as seen on the website www.xe.com which refreshes the homepage once every 60 seconds), news, and stocks.

Alternatively, you can use this mechanism to redirect the user to another page:

In the above example, we add the data ";url=http://www.site.com/newpage.html" to the content attribute. Once the user loads the page, after 10 seconds pass, they will be redirected to http://www.site.com/newpage.html. If you want to redirect the user to another page, within the content attribute, right after the amount of seconds you specify, add a semicolon ( ; ), the text url=, followed by the absolute location of the page that you are redirecting to, just like in the above example.

Preventing a webpage from being viewed inside some other websites frames page:

Setting the http-equiv attribute to "window-target", you can then specify that if someone tries to view one of your webpages in a frames page, it will break out of the frames page and will fill the entire browser window with the content attribute.

This is an important measure that can be used to prevent someone from trying to load one of your pages in their own site.

A full webpage with meta tags:

<html> <head> <title>Meta tags</title> <meta name="keywords" content="hardware, electronics, computers, phones" /> <meta name="description" content="All type of technology for all purposes. We have computers, phones, printers, fax machines, and much more." /> <meta name="generator" content="Notepad++" /> <meta http-equiv="window-target" content="_top" /> </head> <body> Welcome to the technology store! </body> </html>