Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
What is a Meta Tag?
A Meta Tag is a line of HTML coding that gives a Search Engine information about the contents of the page. Because a Meta Tag sits between the 'head' tags of your page it will not be displayed on your page. However, it will show up in the source code when that is viewed in a browser.
I am as guilty as the next designer when it comes to using HTML Meta Tags correctly. This is why I have decided to pull together a quick reference guide to some of the key Meta Tags available to web designers and how they should be used.
What does a Meta Tag look like?
In most cases, Meta Tags are made up of two parts. The 'Name' and the 'Content'. Taking the 'description' Meta Tag as an example it should be written like this;
<meta name="description" content="A guide to what meta tags mean and how to use them in a web page.">
In this example you can see that the name of the Meta Tag is 'description' and the content gives a brief overview of the page (in this case, the page you are reading now). A Search Engine will typically index between 200 and 250 characters so make every word count and don't go rambling on for half a page trying to cover every search eventuality. It is a waste of time!
Below is a table of the more popular and useful Meta Tags;
Meta Tag list
| Tag Name | Example | Notes |
|---|---|---|
| Content Type | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | It is recommended to always use the Content Type Meta Tag in your web pages. Failing to do so can cause display issues in some browsers. Notive that the Content Type Meta Tag does not use the "name" part like most other tags. |
| Author | <meta name="author" content="Corrosive"> | The 'Author' Meta Tag tells the Search Engine who wrote the content of the page. If you are looking to get recognised for writing articles or tutorials then this can be very important. |
| Designer | <meta name="designer" content="Corrosive"> | The 'Designer' Meta Tag tells the Search Engine who designed the web page. If you design websites for a living then this is worth putting in. |
| Description | <meta name="description" content="A guide to what meta tags mean and how to use them in a web page."> | This description is what shows up in Search Engines below the link to your web page. As this is the case it should make sense to Search Engines AND human visitors. |
| Keywords | <meta name="keywords" content="meta tag tutorial web designers"> | Most Search Engines take no notice of the keywords Meta Tag nowadays but it can't hurt to put one in. Don't forget to optimise for your keywords when writing your website content! |
| Copyright | <meta name="copyright" content="Copyright 2010"> | The copyright tag should contain your page copyright information. |
| Robots | <meta name="ROBOTS" content="NO INDEX, NO FOLLOW"> | If you do not want Search Engines to index a particular page then you can use the 'Robots' Meta Tag. It is difficult to say if Search Engines will take any notice and you should also consider a robot.txt file or using HTAccess to control Search Engine Robots. |
| No Cache | <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> | Search Engines will ignore this Meta Tag but if you update your content daily then this tells a visitor's browser not to cache page information meaning that fresh content is displayed every time. |
Meta Tags Library
It is worth having a short selection of the Meta Tags that you would commonly use in all of your web pages handy to just copy and paste into your code. Here is an example of a Meta Tag library to help you get started;
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Author Name Here">
<meta name="designer" content="Designer Name Here">
<meta name="copyright" content="Copyright 2010">
<meta name="description" content="Describe the content of your page">
<meta name="keywords" content="key words here" >
Conclusion
Remember that Meta Tags help Search Engines and Seach Engines help visitors to find your website. Meta Tags can also help visitors to your site so using them can only benefit your website and business.
