Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Meta Tags

Your first experience with a <meta /> tag was the Content-Type meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

These next tags are also <meta /> tags, and they each have a different purpose.

Meta Tag Facts

  • Content in <meta /> tags will not be visible on your Web page.
  • Don’t forget <meta /> tags are empty, so they must have the closing [space] / at the end of tag.
  • The <meta /> tag is nested in between the <head> and </head> tags in your code. It can be placed before or after the other <meta /> tag(s).

Description <meta /> Tag

The description <meta /> tag can be important for Search Engine placement. A lot of Search Engines rely on the description text for keywords on how and where to index (cache) your page. Some will also include the description text when (and if) your site is placed in their databases. The text value of this tag should be a short paragraph describing your web page. It can be helpful to use an important phrase or paragraph from your page content.

If you are utilizing the description meta, each page in your site should have its own unique description text.

<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Italian, Chinese, and Chocolates are my favorite foods." />
</head>
<body>

Keywords <meta /> Tag

The keywords <meta /> tag is similar to the description meta. The experts say it isn’t very important to your Search Engine placement, and there have been many articles written on the pros and cons of this tag.

This tag is not used too often in modern web design, but if you still want to utilize it, you can find the syntax below. Use keywords or key-phrases to describe your web page.

<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Italian, Chinese, and Chocolates are my favorite foods." />
<meta name="keywords" content="food, italian, chinese, chocolate, favorites" />
</head>
<body>

Here is an article on the keywords <meta /> tag, if you are interested in learning more.

http://www.highrankings.com/metakeyword.htm

Refresh <meta /> Tag

Here is the scenario: You have a busy web site on Yahoo or Tripod, and decide that you want to purchase your own domain name now. How do you let your visitors know that your web site has moved? One way is the refresh <meta /> tag.

<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5;URL=http://www.newdomain.com/newpage.html" />
</head>
<body>

Notice the syntax. The http-equiv value is "refresh" - that makes sense, right?

Let’s break down the info in the content "value".

  • The content value starts optionally with a digit, this is the total seconds the browser is instructed to wait before it "refreshes" to the new page. In the above example it’s 5. Take note of the ; (semi-colon) typed after the digit.
  • Next comes the word URL and the = sign. Then the new page’s filename or http address is typed. You can list a relative or absolute url.
  • Specifically, on the old page, you would insert this refresh <meta /> tag and include the new file in the content value. In the allotted time, the old page refreshes to the new page.

Before using this tag on your professional or important pages, please read the warning below.

Warning!

Some Search Engines (like Google) don’t like when web pages are "refreshed" to a new page. Unfortunately the Search Engine cheaters abused this tag, and alas, it is not recommended for use anymore.

If your site moved, it might be better to add a link to your new page, and let the visitor manually click on the link to go to the new page. There is also a more advanced way to permanently redirect your page using an .htaccess file, but that is beyond the scope of this tutorial.

No one says you can’t experiment with this tag; just don’t include it on important web pages that are indexed on google or the other search engines.

Internet Explorer Image Toolbar - Remove

Microsoft (by default) has included an Image Toolbar in Internet Explorer versions 6 and up. This toolbar allows a visitor to easily save, email or print graphics from a web page. Some artists do not want easy access to their photos, illustrations and graphics, so there is a <meta /> tag to easily disable this feature in a visitor’s Internet Explorer browser.

<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv=”imagetoolbar” content=”no” />
</head>
<body>

If you would like to disable the Image Toolbar in your own version of IE, choose Tools>Internet Options>Advanced. Uncheck the box for "Enable Image Toolbar."

turn off image toolbar

There are still a few more meta tags. Let’s keep going!

Window Target <meta /> Tag

Check out the About.com web site. Click on any external links, and once the new site opens, notice how the page has loaded in the About.com frame.

Thankfully about.com gives you the option to "Turn off this frame" by clicking on the little link at the top left of the frame. But what about the web sites that do not offer an option to turn off the frame? If your site is linked from a site using frames, there is a chance that your page will become permanently "stuck" in the frame of that web site.

Fortunately, there is a <meta /> tag that handles this problem.

<head>
<title>Debbie’s Favorite Foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv=”window-target” content=”_top” />
</head>
<body>

If the above <meta /> tag is used, your page will automatically break free of any frames!

The <meta /> Tag for Robots and Crawlers

The robots <meta /> tag leaves a special message for web robots, crawlers and spiders. Some robot crawlers are good (like Search Engines) and some are bad (email harvesters). Some robots are courteous and will respect the rules, and some are not so genuine and will crawl over your site whether you want them to or not.

<head>
<title>Debbie’s Favorite foods</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
</head>
<body>

The variations of robot meta values:

  1. <meta name="robots" content="index,follow" /> will instruct the robot to include the current page in its index (cache) and follow all links to include them as well.
  2. <meta name="robots" content="noindex,follow" /> will instruct the robot to not include the current page in its index (cache) but follow all links.
  3. <meta name="robots" content="index,nofollow" /> instructs the robot to include the current page in its cache, but do not follow any links.
  4. <meta name="robots" content="noindex,nofollow" /> instructs the robot to not include current page or any of the linked pages in its cache.

Creating a robot.txt file is also an efficient way to control all the pages in your site. For more information on the robot.txt file, please take a look at these web sites:

Other Miscellaneous <meta /> Tags

While these <meta /> tags are not really used too often anymore, I figured I would still list some so you would at least have a reference. You can decide if you will use them in your own designs.

  • <meta name="author" content="debbie T" /> will declare the author of the page.
  • <meta name="generator" content="notepad" /> will declare the generator (text editor) of the page.
  • <meta name="copyright" content="debbie T 2006" /> declares the copyright information of the page.

Try a <meta /> Tag Generator

There are a lot of meta tag generators on the web, but unfortunately, some do not generate xhtml code. They use upper case letters where lower case should be used.

The good news is that I did find a couple xhtml Meta Generators:

Another handy tool:

Check the Web!

While you are roaming the web some afternoon, view the source code on some pages, to view their <meta /> tags. You can learn a lot from viewing other designers’ code, but just remember to create your own code; do not steal someone else’s.

Search Engine Optimization

To learn more about the latest developments in optimizing your pages for the best Search Engine placement, here are some great links:

What do you want to learn next? « Special CharactersCode & Pre Tags »

7 Comments

  1. Comment by Susan on November 28th, 2006

    Dear Debbie,

    Thank you for your wonderful tutorials. I am slowly progressing and delighted each time I open the next lesson.

    It’s like learning to cook… you have a sink, a stove, cupboards full of ingredients, measuring tools and a recipe card. It’s Greek to a beginner. But the results are so worthwhile!

    Thanks again,
    Susan

  2. Comment by debbie T on November 28th, 2006

    Hey Susan, I see you are progressing nicely! Thank you so much for your lovely comments! Keep on cookin’ girl!

  3. Comment by divya on December 11th, 2006

    this is wonderfull lession.Easy to uderstand all.

  4. Comment by Amir on August 18th, 2007

    Small mistake:
    In “Check the Web!”

    “…just remember not create your own code…”
    the ‘not’ should probably be ‘to’

    but anyway, copying others’ code has been a major way of creating code since coding days ever begun :)

  5. Comment by debbie T on August 18th, 2007

    Thanks Amir, I corrected that mistake!

    Yes, it is easy to copy any designer’s code, but it isn’t polite or ethical unless the author gives permission to copy. Html code is copyright protected. It is always best to ask before taking.

  6. Comment by Dennis on May 27th, 2008

    Why not just add all these mega tags and be overly safe (so to speak)? The one I’m most confused on is the robot mega tags…should I use them or not and which ones?

    Thanks for all the help…this is amazing information! I’m so very glad I found your site!!!
    Dennis

  7. Comment by debbie T on May 27th, 2008

    You would probably want to refrain from using too many meta tags, any extra code could possibly make it harder for the search engine robots to flow through your page.

    if it isn’t needed, then why add it and waste space?

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.