Look at this tutorial below:
Meta tags are important tags that should be included in the <head> of your web page **** (that is, between the opening and closing head tags). They generally contain information for the browser - how to render the page, who made it, a description of it, etc. This information is also collected or used by bots when indexing your pages for search engines.
Meta tags are usually written with "pairs" of attributes one part telling the browser what the meta tag is about, and the other explaining the content of the meta tag. Types of meta tag are usually defined by the name or http-equiv attributes, depending on whether the meta tag has a name, or is connected with an HTTP header. These are the most common meta tags and how to use them...
Content-Type
The most common and most frequently discussed meta tag is content-type. Content-type controls how your pages are delivered and is often used in conjunction with the right DOCTYPE. The most common content-type is text/html delivered with the HTML 4.01 DOCTYPEs. Only because of flaky browser support XHTML pages with the XHTML DOCTYPE also get delivered as text/html instead of application/xhtml+xml which makes the browser parse the code as HTML making any XHTML pretty redundant (not to mention forgiving: allowing errors that serving a page as XML would not allow). Which content-type you should use to be "right" is a long and often boring road which I really can't be bothered to travel down I always use text/html irrelevant of the doctype. So, techno-babble aside your content-type meta tag should look a little like:
For HTML users:
Code: Select all
<meta http-equiv="content-type" content="text/html; charset=utf-8">For XHTML users:
Code: Select all
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Description
The meta description tag is quite important in identifying your web page. Admittedly, it doesn't carry the same weight with search engines as it used to, but descriptions ARE searchable. By using a unique and identifying description accurate for each page, you are more likely to rank higher for keywords found in the description/page than if you used a generic description on every page of your website. Search engines often use the listed description underneath a page's title in the results of a search too, so don't forget to make the page sound good!
For HTML users:
Code: Select all
<meta name="description" content="a descriptive tutorial on basic meta tags">For XHTML users:
Code: Select all
<meta name="description" content="a descriptive tutorial on basic meta tags" /> Keywords
Keywords are also dying when it comes to ranking in search engines, but are important in the identification of pages within a website. It hasn't been proven whether all search engines have ditched them in favour of more complex algorithms so add them anyway. You can specify as many keywords as you like (although, apparently, Google blacklists people for "keyword stuffing") and these must be separated by commas:
For HTML users:
Code: Select all
<meta name="keywords" content="html, xhtml, meta tags, content-type, keywords">For XHTML users:
Code: Select all
<meta name="keywords" content="html, xhtml, meta tags, content-type, keywords" />Controlling Bots/Robots
If you're one of those strange people that doesn't like the idea of search engine robots spidering your web site, or want to block certain pages from being spidered, you need the robots meta tag. Using this meta tag you can control whether or not a page is indexed, and whether or not links on a page are followed. The default behaviour is "all" all pages are indexed and all links followed but you don't need to specify a robots meta tag just to tell it this. Let's see the possible combinations:
For HTML users:
Code: Select all
<meta name="robots" content="all,none,index,noindex,follow,nofollow">For XHTML users:
Code: Select all
<meta name="robots" content="all,none,index,noindex,follow,nofollow" />
Done...
