10 Stellar Web Resources for HTML5 and CSS3
How to Create Cascading Style Sheets (CSS) Simply and Easily
How to Register a Domain Name for Your HTML5 and CSS3 Site

Considering META Tags

One of the most interesting, and controversial, tags in HTML is the META tag. That's because META tags affect how your Web page appears in search engines, and some people go to great lengths to have their pages rank high in search engine lists. The META tag is used for meta-information — information about your Web page, rather than information that displays in your Web page.

The META tag has one main purpose: To better describe your Web page to the spider programs that gather Web information for search engines. Some search engines depend heavily on the contents of META tags to decide how to index pages for use in search results, and to find a description of the page to use in the search results themselves.

META tags consist of three pieces: The word META, a field that describes the content of the META tag, and the information that goes in the field. Here's the META tag that SeaMonkey Composer puts in all your Web pages:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

This tag is simply three fields of data. The first tells a Web spider that this is a META tag. The second says that it's the "content-type" version of a META tag. The third says that the content of this Web page is text, in HTML format; it uses the character set ISO-8859-1, or standard English-language ASCII characters. You can add this META tag to any document you create.

For additional information about META tags, check out Search Engine Watch. This Web site has the latest and greatest information about Web search engines.

Adding META tags with HTML

You can easily add META tags to your HTML document:

1. Open your Web page in your text-editing program (such as Notepad).

2. Add the author, description, and keyword META tags to your document in the header area, between the <head> and </head> tags:

<meta name="author" content="xxx">

<meta name="description" content="yyy">

<meta name="keyword" content="z1", "z2","z3"...>

Replace xxx with your name; yyy with the description of your Web page that you want to have appear in a search engine's results; and z1, z2, z3, and so on, with the keywords related to the content of your page. For a personal Web page, good keywords are your first name, last name, your full name, and keywords relating to the interests described on your page.

3. Save your document and then exit your text-editing program.

You can't preview this change in a Web browser because META tags aren't visible when you view your Web page in a browser. So simply save your document and exit.

Adding META tags with Composer

Most changes to your Web page are easier with Composer than with HTML in a text editor. However, because adding META tags involves adding HTML code directly to your document, it's actually a bit complex to do this in Composer:

1. Open your Web page in Composer.

Choose Start --> Programs --> SeaMonkey --> SeaMonkey to start SeaMonkey Navigator. Then choose Window --> Composer to start Composer. Finally, choose File --> Open to open your Web page file. Your Web page opens in Composer.

2. Within Composer, choose Format --> Page Title and Properties.

The Page Properties dialog box opens.

3. Enter or modify the contents of the Author and Description fields. Don't be afraid to write a long description, even though the dialog box doesn't have much space for it. (You can also take this opportunity to modify the title of your Web page if you want.) Click OK when you finish.

Composer automatically generates the author and description META tags for you and places them in the Header area of the HTML document you're creating.

The description you enter may show up as the description of your Web page in the results page of a search engine.

Next, you need to enter the keywords for search engines to associate with your Web page. You have to work directly in HTML to do that.

4. In Composer, click the HTML Source tab, or choose View --> HTML Source.

The HTML source for your Web page appears. Note that the META tags for author and description are there, just as you entered them.

5. Copy and paste the META tag for your Web page's description into the HTML source. (You should now have two identical DESCRIPTION lines.) In the second line, change "description" to "keyword". Then change the words after "content=" to the keywords you want to associate with your Web page for search engines.

Editing a copy of existing HTML is often much easier than creating new HTML code yourself. Even the most minor typo in HTML code can cause big problems, so re-using existing code is often a very good starting point.

6. Go back to the normal viewing mode by clicking the Normal tab, or by choosing View --> Normal Edit Mode.

The content of your Web page appears, with HTML tags hidden.

7. Save your document and exit Composer.

Your Web page now has appropriate META tags.

  • Add a Comment
  • Print
  • Share


Promoted Stories From Around The Web

blog comments powered by Disqus
How to Create a New JavaScript File in Komodo Edit
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming
How to Build a Banner Graphic for Your HTML5 and CSS3 Site
Use the <img> Element to Place Images
The Benefits of HTML Headings