HTML Meta Tags -Beginners Guide

HTML Meta Tags Explained- Using and Creating Meta Tags

Meta Tags are contained between the open <head> tags and are not visible to the page visitor i.e. (they are hidden)

There are two main uses for meta tags they are:

Search engines-these include the title, description, keywords and robot tags and are perhaps the most important meta tags These tags should always be used and are discussed in .
Web page information and control- These are the Doctype tag, script include tags, author tags etc and are covered in more meta tags.

Search Engine Related Meta Tags

The following tags are closely associated with search engines are the ones most commonly used for optimising your web pages for the search engines. These tags should always be configured.

Title
Description
Keywords
Robots

Title Tag

Although not strictly speaking a meta tag, the title tag is the most powerful tag for search engine optimisation hence it is considered here. Text you place in the title tag appears in the top bar of the Web browser and is usually the first line displayed by search engines.

Because of its importance to search engines the title tag should contain your keywords and should reflect accurately what the page is about The recommended length is 5-8 words.

Use:

<TITLE> This is the page Title </TITLE>

Description Tag

The page description should accurately describe your Web page and is usually displayed by the search engines along with the title. The description should be less than 200 characters and ideally less than 140 characters.

It should contain one or two of you keyword/keyword phrases with the most important one appearing near the beginning.

Use:

Example:

Keywords Tag

This tag was previously used by search engines to determine page relevancy it is no longer used by the major engines. The tag is a list of keywords and phrases. Each Keyword or keyword phrase is separated by a comma.

Try to limit the length to about 10 words, less is usually better. Don't be tempted to enter 100's of keywords just because you are allowed. Don't repeat your keyword more than 3 times as some search engines and indexes will penalise you for spamming.

Use:

Example:

Robots Tag

The robots tag is not normally used. It is used to tell search engines how to index the Web Page and follow and links contained on the page. Web pages will be indexed by search engines and links will be followed unless explicitly being told not to.

Normally you will want your page to be indexed by the search engines and hence you will not need to include this tag. Include the tag only when you want to stop a Web page being indexed.

Use:

Examples:

This tag will stop your web page being indexed or following any links on the page itself.

This tag will allow your page to be indexed by all search engines:

<META NAME="ROBOTS" CONTENT="ALL"> This is equivalent to not including the tag at all.

Search Engine Meta Tags Example

<head>
<title> Building a Website-A beginners Guide </title>
<meta name ="keywords" content= "building a Website, build a Website" ></meta>
<meta name = "description" content = "Building a Website for beginners. Free step by step guide to building a Website" ></meta>
<meta name="robots" content="ALL"></meta>

</head>

Web page Information and Control Meta tags

META tags have two possible forms:

<META HTTP-EQUIV="name" CONTENT="content">
or
<META NAME="name" CONTENT="content">

All of the search engine tags above use the Meta Name tags.

HTTP-EQUIV tags

META tags with an HTTP-EQUIV attribute are equivalent to HTTP headers (control information sent by the web server to the web browser. They are used to control the action of browsers and may augment/refine the information provided by the actual headers themselves.

Commonly used HTTP-EQUIV tags are:

Content-Language

Species he language used e.g.
<META HTTP-EQUIV="Content-Language" CONTENT="en-GB">

Expires

Used to tell browsers and any caching servers how long to keep the content.

<META http-equiv="Expires" content="mon, Oct 2005 12:12:10 GMT"> Content expires on this date.

<META http-equiv="Expires" content="0"> Causes browser always to read the content and not to cache it.

Note: not such a commonly used tag

Refresh

This is commonly used to atomically redirect a user to another page.

Content = number of seconds and URL= url of new web page ( either relative or absolute) e.g.

<META HTTP-EQUIV="Refresh" CONTENT="3;URL=new.html"> or

Content Type

Specifies the media type and character set of an HTML document and should be included on each page.

The Nvu editor generate this:

FrontPage produces this:

Copyright

Doctype:

This tag provides information ( Usually to html validation programs) about the HTML/XHTML on the web page and is optional in html but is mandatory for xhtml (xhtml). The Doctype is used by validation programs when checking your html for valid code. (see validating web pages).

The doctype should be the very first line of your document and comes even before the HTML Tag. It should be the only thing on that line.

Note: It is case sensitive

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>

This declaration is missing on most of the web pages currently on the Internet. However it is a good idea to start including it now. There are three levels of compliance- strict, loose and frameset this is specified by the document type definition (DTD) in the above example it is loose.

You will often see this specified without the DTD entry simply as-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

See http://www.w3.org/TR/REC-html40/struct/global.html for more details on other DTD types.

Note: If your web pages are currently missing this declaration I would not go back and include it on the old web pages but start including it on the newer ones. This is because it can cause display problems in some browsers.

Closing Meta Tags

The new html standard (xhtml) requires a closing meta tag </meta> and so it should in the future be included and is shown in the example above.

- If you have pages that don't have a closing meta tag then don't worry they will still work. Just try to use a closing tags in the future.

Creating Meta Tags- Generators

Although it is very easy to create your own Meta tags most Web page editors have a built in meta tag generator so that you don't need to enter the HTML yourself. If yours doesn't then there are several free online meta tag generators that you can use.

You simply fill out an on line form and the HTML code is created for you. All you then need to do is to copy and paste the code into your Web page ( while the editor is displaying HTML).

Regardless of which generator you invariably have to edit meta tags manually as they are different for each web page.