What meta tags are available?

Meta tags provide a means of adding extra information about your HTML document. This is information that either your browser might be able to make use of or typically to provide additional information to search engines.

There are two types of meta tags:

<meta name="tag" content="data">

and

<meta http-equiv="tag" content="data">

Information provided by http-equiv is passed to the browser before it receives the rest of the document. It provides information that could therefore affect how the browser handles the document. Both styles of meta tags must be positioned within the head of the document (i.e. between the <head> and </head> tags).

META NAME tags

Meta name tag Description

Author The name of the author of the page.

Description A short description of the page. Used by search engines as a summary description of the page.

It is generally recommended to keep the meta-description to no more than 150 characters, anything longer risks it being truncated by a search engine. However the exact length limit will vary between search engines.

If you need to include double quotes in the description then escape them, for example:

<meta name="description" content="A "cool" tip">

gives the description: A "cool" tip

Generator The name of the tool used to create the page. (Unsure how useful this is to web-authors.)

Keywords Used by search engines to index the page. Use to specify keywords of relevance to the page.

Robots

Gives instructions to web-robots (also called web-bots). Be aware that the web-bot is free to ignore it! The CONTENT portion should be a comma separated list of one or more of the following:

noindex: Do not index the page. Unless "NOFOLLOW" is also specified then any links on the page may still be followed.
nofollow: Do not follow any links that are on the page.
noimageindex: Do not index any of the images on the page.
noimageclick: Do not index links to images on the page, instead use a link to the page.
noodp: Do not use titles or descriptions from the Open Directory Project (DMOZ). Otherwise where the page is listed in DMOZ the search engine, if DMOZ aware (such as google), might choose to use the description in DMOZ rather than what it gleans from the page.
nosnippet: Do not show the description (or extract) of the page in search engine results.
noarchive: Do not take a cached copy of the page. This does not stop the page from being listed, but should stop the search engine from taking a copy of the page.

For example to prevent a page from being indexed:

<meta name="robots" content="noindex">

these tags can be combined so, for example, to prevent a page from being indexed and any links followed:

<meta name="robots" content="noindex, nofollow">

In addition there are some robots options which are recognised only by specific search engines. The following (by its nature) may not be complete:

noydir Do not use descriptions from the Yahoo! Directory.
Recognised only by Yahoo.

In addition to the above set of "standard" meta name tags, there are some which are recognised only by specific search engine bots. The following list may is not complete but does include the most significant bots:

Meta name tag	Used by	Description
googlebot	Google	Use the same settings as for name="robots", but applied only to the google-bot.
slurp	Yahoo!	Use the same settings as for name="robots", but applied only to the Yahoo bot - which is called "Slurp"..
msnbot	MSN, Live Search, Bing	Use the same settings as for name="robots", but applied only to the Microsoft Msn-Bot, which in turn feeds into MSN, Live Search and Bing.

There are also some meta tags which are recognised by many mobile devices:

Meta name tag Description

viewport

Meta name tag	Description
viewport	Specifies the intended size when viewing on a mobile device. Orignally created by Apple for the mobile Safari browser, it has now been widely adopted as the de-facto standard. The `CONTENT` portion should be a comma separated list of one or more of the following: width=320 Specify the logical width of the viewport, in pixels. In this case 320 pixels wide. width=device-width Logical width should be the physical number of pixels across the display. height=480 Logical height of the viewport in pixels. In thise case 480 pixels. height=device-height Logical height of the display should be the physical number of pixels vertically across the display. user-scalable=yes\|no Whether the user can zoom in and out. Supports yes or no, default is yes. initial-scale=1.0 Set the initial zoom. In this case 1. maximum-scale=2.5 Maximum limit for zooming/scaling. Must be in the range 0.25 to 10. minimum-scale=0.5 Minimum limit for zooming/scaling. Must be in the range 0.25 to 10.
MobileOptimized	Supported by some Windows mobile browsers. The content specifies the width of the browser window. For example: <meta name="MobileOptimized" content="320">
HandheldFriendly	Supported by BlackBerry browser. <meta name="HandHeldFriendly" content="true"> Specifies that the content is optimised for mobile devices. For those devices that support viewport, this is similar in effect to: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Default is "false".

Specifies the intended size when viewing on a mobile device. Orignally created by Apple for the mobile Safari browser, it has now been widely adopted as the de-facto standard.

The CONTENT portion should be a comma separated list of one or more of the following:

width=320: Specify the logical width of the viewport, in pixels. In this case 320 pixels wide.
width=device-width: Logical width should be the physical number of pixels across the display.
height=480: Logical height of the viewport in pixels. In thise case 480 pixels.
height=device-height: Logical height of the display should be the physical number of pixels vertically across the display.
user-scalable=yes|no: Whether the user can zoom in and out. Supports yes or no, default is yes.
initial-scale=1.0: Set the initial zoom. In this case 1.
maximum-scale=2.5: Maximum limit for zooming/scaling. Must be in the range 0.25 to 10.
minimum-scale=0.5: Minimum limit for zooming/scaling. Must be in the range 0.25 to 10.

MobileOptimized

Supported by some Windows mobile browsers. The content specifies the width of the browser window. For example:

<meta name="MobileOptimized" content="320">

HandheldFriendly

Supported by BlackBerry browser.

<meta name="HandHeldFriendly" 
		content="true">

Specifies that the content is optimised for mobile devices. For those devices that support viewport, this is similar in effect to:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Default is "false".

HTTP-EQUIV tags

HTTP-EQUIV tags that are not recognised (i.e. supported) by the browser will be silently ignored (i.e. the viewer will not see an error). So you can use HTTP-EQUIV tags safely without worrying too much whether a given browser will support them.

Meta name tag	Description
Content-Type	Specifies the character encoding scheme used for the document. A semicolon (;) can be used to combine values. Typical values: content="text/html" Standard HTML. content="text/html; charset=ISO-8859-1" Standard HTML, character set is ISO-8859-1, which is the standard for Western Europe and is also the normal browser default. For lists of possible character sets see: http://www.w3.org/International/O-charset-lang.html
Expires	For caching purposes this states when the document expires. Web robots may delete expired documents from their indexes or may schedule a revisit. The format is: content="Weekday, DD MMM YYYY HH:MM:SS TIMEZONE" For example: "Thu, 7 Feb 2002 13:00:00 GMT" An invalid value (such as 0) denotes 'now', forcing a check on each visit.
Page-Enter	Microsoft Internet Explorer 5.5 and later only. Specifies how the page should appear to replace the previous page in the browser. For a summary of the transitions available see: http://www.jansfreeware.com/articles/ie-page-transitions.html. The Microsoft documentation on page transitions can be viewed at: http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx, but be aware that this concentrates on applying transitions to styles.
Page-Exit	Microsoft Internet Explorer 5.5 and later only. Specifies how the page should appear to disappear when the browser moves on to another page. Otherwise the options are the same as for Page-Enter.
Pragma	There is only one pragma directive: <meta http-equiv="pragma" content="no-cache"> This requests that the page not be cached locally by the browser.
Refresh	Tells the browser to wait a specified number of seconds before loading a new page. For example to reload the current page after five minutes: content="600" To load a different page after 5 seconds: content="5; url=http://www.cryer.co.uk/index.htm"

Related Bits

Case

The meta and http-equiv tags are case insensitive, so it does not matter whether these tags are written in upper or lower case, so:

<meta name="robots" content="noindex">

could equally be written as:

<META NAME="ROBOTS" CONTENT="NOINDEX">

The exception is when using XHTML rather than HTML. With XHTML all tags should be in lower case - see below.

XHTML

When using XHTML rather than HTML the meta and http-equiv tags should be self closing and must be lower case.

So whilst in HTML you might use:

<meta name="robots" content="noindex">

<META NAME="ROBOTS" CONTENT="NOINDEX">

The equivalent in XHTML would be:

<meta name="robots" content="noindex"/>

note the "/>" at the end of the tag instead of HTML's ">".