Hello all. In this tutorial, I'm going to show you how to create <meta> elements and show how to use them.
Before you start
Before we begin, create a file called "index.html". This is where you'll create any tests with <meta> tags. Also, you should have some basic HTML knowlege.
<html> <head> <!-- Meta Tags Here --!> <title>Meta Tutorial by kewlkreator</title> </head> <body> <p>Hello World</p> </body> </html>
This is our template, call it index.html.
The <meta> Tag
All meta tags are "single" meaning they end with /> and dont have a </meta> tag to close it. An example is the <img> tag which is similar in structure. Most meta tags look like:
<meta name="content-type" content="my-content" />
However, some meta tags can look like this:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
Notice that it still has a content="" atribute.
Description
Descriptions are used by some search engines to grab the description of a page. To define a description:
<meta name="description" content="kewlkreator is awesome" />
Note: not all search engines use meta tags in their content. Google, for example, refused to use meta tags in their searches. It is still good practice to place them anyway.
Keywords
Keywords are also used in some search engines to aid in the process of finding the right page. A keyword meta tag:
<meta name="keywords" content="kewlkreator, meta, tag, tutorial" />
Again, this tag is not used by some major search engines due to the use being abused. People who wanted their site promoted would enter a dictionary full of words. This is not encouraged by me or anyone else by ANY means.
Unknown
Sometimes, a meta tag can be found like this:
<meta name="security" content="low" />
Tags like these show something unique to the site or a specific search engine. These tags are not always correct and are not encouraged for use by the W3C or any other major WWW community.
Content-type
This meta tag is used to define the character set for a site. Example:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
Copyright
This tag will NOT protect you from illegal copyright. Consult an attorney if you would like to secure the content on your site.
<meta name="copyright" content="Copyright 3003" />
Designer
This tag will show the designer of a site.
<meta name="designer" content="Kewl Kreator" />
Alternatives for this is:
<meta name="generator" content="Dreamweaver CS4" /> <meta name="author" content="Kewl Kreator" />
Abstract
This tag is usualy used in academic papers, terms of use, etc.
<meta name="Abstract" content="Short description of page" />
This tag is also similar to the description tag stated previoulsy.
Some tags that Google does support are like so:
<meta name="googlebot" content="noarchive" />
This will ask Google not to archive your site. Alternatives to this content are:
- nosnippet || This attribute will not allow Google to display excerpt text in the SERPs or cached content.
- noindex || Will stop indexing on Google.
- nofollow || With the use of this attribute it will instruct Google not to pass any PageRank or link popularity to the link served, however, Googlebot may follow the web page link and index the page referenced.
Yay!
I hope that the use of this tutorial you have learned how to utilize and use <meta> tags in HTML documents.
~kewlkreator
MultiQuote
| 