You may have heard talk of HTML meta tags on the Web, most likely in connection with search engines. This is because one of the common uses of meta tags is to give search engines additional information about your web page when they index it. In fact there are over 200 different types of “meta-information” that you can place in your Web page with the aid of the HTML meta tag.
What does a meta tag look like?
Meta tags go inside the <head></head> element of your Web page, and take the following format:
Either: <meta name="name" content="content">
Or: <meta http-equiv="name" content="content">
So, which should you use? Well, it depends on what type of meta tag you’re using. The reason is a little boring, but basically http-equiv is designed for meta tags that emulate the equivalent HTTP header (e.g. "refresh" and "pragma"), whereas name is for all the rest (e.g. "author" and "description"). A rule of thumb is as follows: If the meta-information is designed to be interpreted by a Web server or proxy, use http-equiv; if it’s designed for a page editor or search engine, use name.
Don’t worry about this too much, as most tutorials on meta tags (including this one) tell you which format to use!
An HTML meta tag example
This snippet of HTML is from an imaginary page about dog training, and shows how you can use the description and keywords meta tags to improve your ranking with the search engines:
<head>
<title>Marcia's Dog Training Page</title>
<meta name="description" content="This Web page
contains information on dog training, including modern
training techniques, training news, info on training
centres and links to other dog-training sites.">
<meta name="keywords" content="Dog,
training, puppy, techniques, centres, links, leash,
teaching, commands, sit, stay, fetch, beg">
</head>
Notice that we used two meta tags here, both within the <head></head> element of our Web page. The description tag is often used by search engines such as Google to display a short summary of your web page in their search results pages. The keywords are used to help index your page, so that when people type in the word “fetch” into their favourite search engine, your page will be one of the pages returned.
Common meta tags
OK, you get the basic idea. Here are some more really useful meta tags that you can use to improve your website. Don’t forget that all meta tags should go inside the head element in your page.
Example #1 – Author
<meta name="author" content="author's name">
This lets you tell search engines and browsers that you wrote this page!
Example:
<meta name="author" content="Marcia Westley">
Example #2 – Refresh
<meta http-equiv="refresh" content="delay;url=new-url">
This meta tag is great if you move your Web page to a different directory or server, or have to rename it for some reason. You can use this tag to redirect the browser to to the new page! delay is the delay in seconds to wait before refreshing. new-url is the URL of the page to jump to (it can be the same page, in which case the same page will continually refresh.) If you specify a delay of zero, then the browser will jump immediately to the new page.
Example:
<meta http-equiv="refresh" content="0;url=newpage.html">
Example #3 – Robots
<meta http-equiv="robots" content="[noindex|nofollow]">
This is another one for the search engines (also known as robots!). You can use this meta tag to tell search engines whether they should add your page to the index or not, and whether they should follow links from your page to look for other pages to index.
Normally the search engines will index your page if they find it, and follow all the links on the page to look for other stuff to index. The following example will tell robots not to add your page to the index (they can still follow links on your page):
Example:
<meta http-equiv="robots" content="noindex">
Example #4 – Caching
<meta http-equiv="pragma" content="no-cache">
This meta tag tells browsers not to store a copy of your page in the cache on your hard drive. The cache is normally used to store recent pages that you have visited, so that the browser doesn’t have to go off to the server to download commonly-visited pages all the time. However, if you are updating the page frequently and want users to see the newest version at all times, then use this meta tag.
Example #5 – Expiry date
<meta http-equiv="expires" content="date">
This tag is similar to the pragma meta tag above, except that with this one you can tell the browser when to consider the page out of date (in other words, when it should retrieve a new copy from the server). For example, if you update a page every month, you would want to set the page to expire a bit less than month after you last updated it.
Example:
<meta http-equiv="expires" content="Sun, 4 Oct 1998 15:00:00 GMT">
That’s enough meta tags!
That should be enough to keep you busy for now! These are the more common meta tags, but there are hundreds more. Don’t be daunted though — you’ll probably never use more than ten of them, and you’ve just learned the most useful ones! Find out more about meta tags at Wikipedia.
HI,
Good Post. Only one thing.
<meta http-equiv=”Pragma” content=”nocache”>
is not correct
The correct is
<meta http-equiv=”Pragma” content=”no-cache”>
@capecape: Good catch – I’ve fixed up the article. Thanks for the feedback!
Matt