Meta tags, also called meta elements, are used to provide search engines with the correct information regarding a specific page on a website. A meta tag is placed in the head of an HTML document, such as in the following piece of code:
<!DOCTYPE html>
<html>
<head>
<meta name=”description” content=”Personal homepage of Thomas Vanhoutte, a student Applied Computer Science. Find more personal information about him on this site.” />
<meta name=”keywords” content=”Thomas Vanhoutte, computer science, student” />
<meta name=”author” content=”Thomas Vanhoutte” />
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />
</head>
Meta tags are used by search engines, such as Google and Bing, to be able to categorize a webpage correctly. Note that these meta elements are, although they are part of a document, not visible to users visiting the website with a web browser. There are many types of meta tags, here are the most important ones you should definitely consider using:
Commonly used Meta Tags
For most web masters and web designers, Google will be the search engine were the focus lays. If your site is found and indexed correctly by this leading search engine, you can be more than happy. Google mainly understands the following meta tags to index web pages.
description
<meta name=”description” content=”Replace this text with a fitting description, related to your site’s content.” />
The description tag provides a short description of the page’s content. Ask yourself: what can be found on this page? This description is often used in the search results of Google, Bing and other search engines. Be honest when you make up a description, your description should match the content of the page. If this is not the case, you can be penalized. By the way, you should not make your description longer than 160 characters.
title
<title>I am an attractive title – Yes I am looking good</title>
I hate lying, so no this is not a meta tag, but it is used to show the title of your page in the search results and in the user’s browser. Use it, it’s it important to include this tag in your <head>. Try to limit the number of characters to 70.
keywords
<meta name=”keywords” content=”Thomas, Vanhoutte, student, Brussels” />
This tag should contain a list of keywords relevant to the document. Use 5 to 15 keywords, depending on the amount of content on that certain page. There is no need to use this meta tag, since Google does not use this information.
robots
<meta name=”robots” content=”noindex, nofollow” />
<meta name=”googlebot” content=”nosnippet, noimageindex” />
You can use this meta tag to control the behaviour of search engine crawling and indexing. Above are two example of the robots meta tag: the first one applies to all search engines, while the meta tag with the name ‘googlebot’ will be specifically read by Google. Here is a list of possible values for this meta tag:
- noarchive: prevents Google from showing the Cached link for a page.
- nofollow: prevents the Googlebot from following links from this page
- noimageindex: lets you specify that you do not want your page to appear as the referring page for an image that appears in Google search results.
- noodp: prevents the alternative description from the ODP/DMOZ from being used
- nosnippet: prevents a snippet from being shown in the search results
- unavailable_after:[date]: lets you specify the exact time and date you want to stop crawling and indexing of this page
content-type
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
You can use this meta tag to define the page’s content character set and type. For most web pages, the content type is text/html and the charset UTF-8. Tip: if you are using HTML5, you might want to replace the above, long, code this one (shorter):
<meta charset='UTF-8'>
It will do exactly the same, but it’s shorter to write and to remember.
Other meta tags
author
<meta name="author" content="Thomas Vanhoutte" />
You can be proud of the work you put in a certain web page, so why don’t you include the author tag? Show the world you were the creator of a page by inserting this tag.
language
<meta http-equiv=”Content-Language” content=”en”>
<meta http-equiv=”Content-Language” content=”en-GB, fr”>
Most search engines will most likely discover what language a page is written in, but it’s not a bad idea to include the language meta tag anyway. In the case you have multiple languages on one page, simply add multiple languages. Specifying the language in (X)HTML content is not necessary as I said before, but it’s best practice to do so. It’s useful for language specific searches for example and some translation tools are using these tags to determine the language.
Here is the complete list of languages supported to include into your language meta tag:
| Language | Language |
| bg | Bulgarian |
| cs | Czech |
| da | Danish |
| de | German |
| el | Greek |
| en | English |
| en-GB | English-Great Britain |
| en-US | English-United States |
| es | Spanish |
| es-ES | Spanish-Spain |
| fi | Finnish |
| fr | French |
| fr-CA | French-Quebec |
| fr-FR | French-France |
| hr | Croatian |
| it | Italian |
| ja | Japanese |
| ko | Korean |
| nl | Dutch |
| no | Norwegian |
| pl | Polish |
| pt | Portuguese |
| ru | Russian |
| sv | Swedish |
| zh | Chinese |
You are a very capable person!
Thanks for this useful post Although HTML is not the hardest language to learn, there are always things you haven’t seen before and this post really opened my eyes regarding meta tags. So thanks again!
The Destription tag is dead! If you run Rich Snippets testing tool, it gives you “The excerpt from the page will show up here. The reason we can’t show text from your webpage is because the text depends on the query the user types.” where the description usually is. If you want it clearer than that I guess google can get a loudhailer from somewhere! 🙂
ATB
Simon
The description text does indeed depend on the search query the user searched for. But that doesn’t mean it isn’t useful anymore. For example a webpage that uses Flash. Or a webpage with lots of data (a lot of numbers, with only a few words).
Here is an example that I just triggered: https://thomas.vanhoutte.be/uploads/2012/08/html_description_necessity.png
It’s a nice thing to have, a description tag in your HTML head.
Hi Thomas,
Thanks for the post. I had some confusion for ‘nofollow’ tags. After reading your article, it got cleared. Thanks..