How to use basic Meta Tags

November 17th, 2007

Meta Tags, what are they? They are lines of code placed in your html file between the files head tags. But what do they do? These are tags in html which tell a search engine information about your web page. This is useful in many ways. It allows a search engine to find your site based on your site name, its domain name, the content within the site, description about the site, author of the site and more. A well designed set of meta-tags can improve your site's chances of being hit by several hundred percent. So what meta tags can I use, and how do I use them?

<meta name="Author" content="author" />
<meta name="Copyright" content="copyright" />
<meta name="Description" content="description" />
<meta name="Keywords" content="keywords" />

What do each of the above do?
Well first off, they should be self explanatory. The "author" meta is used to display the author of the website; one who built the html or integrated files. The "copyright" meta is used for copyright and trademarking, say for businesses or web designers. The most important metas are "keywords" and "description". Keywords tells the search engines which keywords will index to your site. You can specify up to 1024 characters of keywords. Be sure not to duplicate words too much, most modern search engines will discard these excess words. The description is used to summarize your website into a few sentences, and explain what the sites for and what it offers. Here is an example of my meta tags in action:

<meta name="Author" content="Miles Wayne Johnson" />
<meta name="Copyright" content="Copyright 2006 - 2007 www.mileswjohnson.com" />
<meta name="Description" content="Online portfolio of Miles Johnson in the areas of web and graphic design with an online portfolio. Full length amazing tutorials, scripts and plugins!" />
<meta name="Keywords" content="miles, wayne, johnson, portfolio, client, web, graphic, design, art, concept, services, quotes, tutorials, resources, illustration, logo, links, tutorials, xhtml, php, css, dreamweaver, photoshop" />

What is http-equiv?
This is a more broader way off telling the browser how to read and display your website. What http-equiv meta tags do is define additional information to be sent to the browser in the http header. This gives the web site creator additional control over this data. The code below will show how an http-equiv is used. It states that my content is an html file, using the character set utf-8, it uses css as its stylesheets, it uses javascript as its scripting language, and its primary speaking/reading language is english.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en-us" />

Thats a basic roundup of how meta tags work, how they should be used and how to incorporate them into a website. There is a lot more to learn about SEO (search engine optimization) and how search indexing sites work (like Google and Yahoo). There are many factors involved in creating and keeping traffic to your site, but meta tags are the first step to creating a successful website!

You can leave a comment, or trackback from your own site.

Leave a Reply

Comment