devxlogo

HTML Advanced: Meta Tags

HTML Advanced: Meta Tags

eta tags are not magic, not a cure-all for the search engine blues, and not a secret solution for pulling in data. Meta tags are simply place-holders for storing information that may be used by an HTTP server or indexed by a search spider.

Why Should I Use Meta Tags?
Meta tags are simple to use. Just place your cursor within the heading section and type the tag as you’d type any other tag. The difficult part with meta tags is figuring out how to use them in a sensible way.

There are three common uses for metatags.

  • The first is to store information about the document, information that will be used by your server to track or maintain the document. This is most commonly done in an intranet environment. For example, you might have a metatag that identifies the author of the page and another metatag that identifies the expiration date of the content of the page. Because this use of is specific to each environment, we won’t be covering this application of metatags here.

  • A second use is to make something happen to the page automatically. The two most common applications are to automatically refresh a splash screen with another page or to play a sound file automatically.

  • A third use is to help search spiders index the site. Some of the major search engines look for meta tags when they index a site and use the meta tag data to better identify and categorize the site. Using meta tags can help the placement of your site within these search directories, but?and this in an important caveat?using meta tags doesn’t guarantee that your site will be indexed “correctly” either.

One common misconception is that you need to include meta tags in order to have your site indexed. This is not true?the automatic crawlers (another name for search spiders) will index all sites, meta tags or no. Neither Yahoo nor Excite, two of the leading search/directory companies, pay any attention to meta tags when they compile their lists. However, putting certain terms in the meta tags, may better define how your site is indexed with Alta Vista, InfoSeek, and Hot Bot.

Meta Tag Structure


The meta tag is more open-ended than any of the other HTML tags. The tag tells the browser that the contents of the tag are particular type of data, but you have some flexibility in defining exactly what the data is.

Meta tags have two attributes:

  • The first names the meta tag.
  • The second defines the data or content of the tag.

This is what a couple of typical meta tags look like:


Meta Tags for Server Interaction

If you are using the meta tag to store server-specific information (like the author of the page) or to request some action from the server (like opening a new page or playing a sound) the tag will have two attributes, http-equiv and content.

HTTP-EQUIV
The first attribute is http-equiv. It names the meta tag and alerts the browser that the value of this attribute needs to be passed along to the server for processing.

If you are using the metatag for an intranet function, your system administrator may have created a series of name values for this attribute that your own server will understand. Other servers that don’t understand the value will just ignore the tag.

If you are using the meta tag to refresh the page or play a sound, this attribute will have the value “refresh.” Most web servers have agreed to recognize this value in a meta tag and act appropriately.

CONTENT
The second attribute is content. The value of this attribute further defines the value in “http-equiv.” For example, if you are playing a sound or loading a new page, the content attribute contains the URL of the page to load.

This meta tag tells the server to refresh the contents of the browser window. The refresh will happen in 30 seconds and the new page is named “index2.html:

Meta Tags for Storing Data


If you are using the meta tag to store data (like keywords to be used by a search spider) the tag will have two attributes, name and content.

NAME

The first attribute is name. It assigns a name to the meta tag. Several names are commonly recognized. Two of the most common are “description” and “keywords”.

CONTENT

The second attribute is content. The value of this attribute contains the actual data, such as a textual description or a series of keywords.

This meta tag stores a set of keywords for the page:

Automatically Loading Pages
This is a handy application for creating splash pages that automatically disappear to be replaced with home pages, or to build a series of slideshows automatically cycling a series of separate HTML pages, one after the other. It’s easy to do and, if you use it well, it can be a very effective presentation method that works on all levels of browsers.

You create this effect by using a meta tag to force the browser to pull in something else automatically from the server. In this case, that something is an HTML page that overwrites the first page. This is all accomplished by adding the following line of code to your HTML file:

This meta tag tells the browser to refresh the page by waiting the specified number of seconds and then looking to the server for the content file you specified.

There’s one very important item to note when using a meta tag to refresh a page: The tag must be the very first item in the file, even before the opening html or header tags. If it is not the first item, some server/browser combinations will not display the correct page after the refresh.

The first attribute of this use of a meta tag is HTTP-EQUIV. You use this attribute because you are using the meta tag to communicate with the server. The value for the attribute is refresh, an action value most servers have agreed to understand. The word refresh does not need to be in quotes.

The second attribute is CONTENT. It tells the browser how to go about performing the refresh action. Content can contains several value items.

  • First is the number of seconds to wait before beginning the refresh action. If you have only this number as the content value, then the current page will keep refreshing itself.
  • A second item within the content attribute value is the URL of the next file to call from the server. You type URL=, followed by the file’s url. You must include the phrase URL= in order for the server to understand the information it it receiving.

The entire value of the content attribute must be surrounded by quotation marks, because this information is getting passed along to the server. Separate items within the value by semicolons.

For example, this code will refresh the current page after 15 seconds, and it will replace the current page with the file named index2.html:

Slide Shows
The most typical use of the automatic page refresh application is to create a splash page. But you can also use this effect to create a slide show. The replaced content can be within a frame, not necessarily the entire page. This opens up some interesting possibilities:

  • Picture a small frame along the edge of the screen that displays a series of images about a social problem on a non-profit page designed to help solve that problem.
  • Or what about a series of sketches of an architectural project, showing the project from various angles in various stages of creation on a page about the building. The replaced pages can loop or can have a beginning to end path, stopping when a final image, page, or text appears.

The applications for using automatic page refresh go on and on…and let you add a sense of motion and interactivity with one simple meta tag?and without any complicated coding, animated GIFs, or animation plug-ins. For simple uses, the meta tag might be all the technology you need.

Automatic Sounds
This meta tag approach is not the only way to add automatic-playing sound to your page, but it is one that most browsers of any flavor and any level support and it is very easy to learn and use.

A Few Words of Background
To create automatic playing sound files you need a sound-recording tool for your particular type of computer. To hear the sound on the web you need to have a sound-playing tool working with your browser; the newer browsers have built-in support for the standard audio file formats.

If you’ve never worked with sound, you might want to check out the Project Cool Audio Zone. In this zone, there are sections about creating and editing sound files for use on the web, as well well as information about incorporating audio into a site in different ways.

A note of caution if your target audience is primarily working on older computers using older browsers?a few people with older PCs and no sound cards have told us that when they encounter embedded sounds their systems may lock up.

Creating the Effect
You create the effect of automatically playing sound by using a metatag to force the browser to pull in something from the server. In this case, that something is a sound file. This is all accomplished by adding the following line of code to your HTML file:

This meta tag tells the browser to refresh the page by waiting the specified number of seconds and then looking to the server for the sound file you specified.

There’s one very important item to note when using a meta tag to refresh a page: The tag must be within the header portion of the HTML file. If it is not within the header, some server/browser combinations will not play the sound.

The first attribute of this use of a meta tag is HTTP-EQUIV. You use this attribute because you are using the meta tag to communicate with the server. The value for the attribute is refresh, an action value most servers have agreed to understand. The word refresh does not need to be in quotes.

The second attribute is CONTENT. It tells the browser how to go about performing the refresh action. Content contains several value items.

  • First is the number of seconds to wait before beginning to play the sound.
  • Second is the URL of the sound file you want to play. You type URL= followed by the file’s url. You must include the phrase URL= in order for the server to understand the information it it receiving.

The entire value of the content attribute must be surrounded by quotation marks, because this information is getting passed along to the server. Separate items within the value by semicolons.

For example, this code tells the server to wait 10 seconds, and then play a sound filed called greetings.au:

And, there you have it. An easy way to include automatic sound within your website and a fun way to dazzle your audience, all with one simple meta tag.

Meta Tags and Search Engines
You can use meta tags to help the search spiders index your site more accurately. This means that, in theory at least, your site will show up in search service results when someone searches for the topic that your site covers.

There are a couple of common misconceptions about meta tags, and both revolve around using meta tags to help the search spiders index a site. First, is that your page must have meta tags in order for the spiders to find and index it. Not true! Spiders find your page whether or not it has meta tags. The tags do, however, help some spiders index it in the way you want it indexed.

Second, is that you can control the exact way your site is indexed by using some magic formula of meta tags. Wrong again. For some spiders the meta tags provide guidelines, but the content of meta tags is weighed with other factors, and each spider uses meta tag information a little differently.

The bottom line for meta tags and site searches? If you don’t care how your site is indexed, if your audience already knows where to find you, and you don’t plan on indexing your own site, don’t worry about adding meta tags for search spiders.

But, if you are trying to reach people who don’t know you are out there, take a little time and think about the meta tags that will help describe your site and its content the best. It is worth the effort.

Whatever you do, don’t include words like “hot babes” and “big bazookas” in your meta tags (unless, of course, your site is about overheated infants in the summer or large guns!) just because people search for those phrases sometimes. It’s tacky. And besides, do you think someone looking for “hot babes” is really going to be interested in your site about real estate deals in the swamp-lands?

Use meta tags intelligently, to increase your odds of having readers who are truly interested in your content, find your site.

Search Spiders, Engines, and Directories
Before detailing the meta tags that can improve the search process, it is helpful to understand a little more about how searches on the web work. There are five components that you’re dealing with when you are thinking about making your site “findable.”

  • First, is the search spiders. Some of the search/directory services employ spiders; others don’t. The spider is an automatic agent that goes out and searches the web for anything new. It turns its results into an index.
  • The index is a listing of all the content the search service knows about. Some services, like Alta Vista and Web Crawler, use primarily spider-generated indices. Others, like Yahoo, are primarily directories and the index is based upon a human-selected set of data.
  • Directories are compiled, organized sets of sites. There is typically some human intervention which says “swamp-lands real estate is a type of business that belongs in the regional/business category.” Directories don’t include every single page on the web but, by limiting themselves, they can often be more useful, if less comprehensive. Directories too, generate indices but these indices are guides to the contents of the directories rather than maps of the entire web.
  • A search engine is the tool that translates a reader’s search request into a query that searches through the indices and returns a search response. Search engines use all sorts of technologies including items like keywords, weighting, proximity, and full text search. Don’t drive yourself crazy trying to understand how each works&151;just know that none work exactly the same and there is no silver bullet for making your site hop to the top of every list.
  • Finally, the search interface is the layout and tools through which a reader enters his or her question. Don’t underestimate the human factor in searches&151;if you know people refer to your content area by a particular name or description, use that in a meta tag and in the description of any directory submissions you make for your site. The more you think like your readers, the more likely potential readers are to find you.

Search Sites
There are seven major search services; this alphabetical list is subject to change at any time, but at the moment they are:
  • Alta Vista
  • Excite
  • Hot Bot
  • InfoSeek
  • Lycos
  • Open Text
  • WebCrawler
  • Yahoo

And, naturally, none of them index pages or use meta tags in precisely the same way.

Adding Meta Tags for Search
Adding meta tags for search spiders to find is quite simple. You’ll place them in the header area, one after another.

The basic meta tag for search looks like this:

The first attribute is NAME. You use this attribute because you are using the meta tag to define a set of information. The two most common values for this switch are “description” and “keywords.” Most search spider recognize these two values.

The second attribute is CONTENT. It tells the browser what data is stored in the meta tag. For example, the content value for a description meta tag would be a brief description of the page. The content value for a keywords meta tag would be a list of possible search words or phrases, each separated by a comma.

The result of adding these tags is, ideally, that the search spiders will describe your page the way you want it described, and display it as a search result high on its hit list.

Note that using meta tags is a particularly important consideration if you use frames on your site, since there may be nothing on a frameset page except for a frameset — from which a spider can’t find a description or keywords, and therefore has no idea how to index it.

Description

Normally, a search spider will use the first few words on your page as a sample of what the searcher will find there. However, if you insert a description meta tag the spider will use the value in the content switch as the page’s description instead. For example, a description meta tag for a Paso Fino horse ranch might look like this:

Now, the description that appears after your site’s name in a search result will be much more meaningful to potential readers.

Keyword

The keywords meta tag lists words or phrases that a searcher might use in looking for your topic. The more words that match, the better the odds are that your site will be in the top 10 matches. For example a keywords meta tag for a Paso Fino horse ranch might look like this:

Now, the odds are improved that someone looking for “horses good for trail riding” will find your site.

Abstract

Sometimes a spider will also record an abstract, along with a description. The abstract is simply a longer description that summarizes the page. For example an abstract meta tag for a Paso Fino horse ranch might look like this:

Now readers who use a service that supports the abstract meta tag will see a full and complete summary of your page. Please note, however, that abstract is not widely supported at this time.

Author

The author meta tag lets you identify the author of the page. Sometimes this gets used; most often you’ll be including it for your own benefit or for the benefit of anyone looking at your code. An author meta tag might look like this:

Generator

Like a little advertisement, some HTML page editors automatically include a generator meta tag in every page they create. A typical generator meta tag might look like this:

Expiration

The expiration meta tag lets you identify the expiration date of the page. Sometimes this gets used; most often you’ll be including it for your own benefit or for the benefit of anyone looking at your code. An expiration meta tag might look like this:

Avoiding Indexing
You can also use meta tags to avoid having your page indexed. If your page is created for a small group of people, if you’d rather not have random browsers hitting your site, or if your site is live but still under construction or otherwise not ready for *prime time* viewing, you might not want it to be indexed.

You avoid indexing by using a meta tag named robots. Not all spiders honor this meta tag, but several do and more are planning to support it. Robots looks like this:

Using a robots meta tag and setting its content value to “noindex” tells the search spider to skip this page when it builds its index.

Meta Tags and Site Ratings
Meta tags can be used with ratings services to identify the sex and violence level of your content and screen out young or otherwise inappropriate viewers. To add ratings to your site all you need is a web browser to access the rating sites and a text editor to add a simple meta tag to your HTML files.

Site rating is hardly a magic cure. The rating meta tags only have an effect in certain situations, with certain browsers and certain users. Look to your audience for guidance on meta tags to embed ratings data. If you want to reach families and children, meta tags for site rating might be an good idea for your site. Or, if your site contains potentially controversial material, incorporating a ratings screening might offer you some degree of protection against critics.

What Is PICS?
Platform for Internet Content Selection, or PICS, is a World Wide Web Consortium-backed technical standard that lets a site self-rate its content. The initial driving force behind PICS was the fervor over Internet censorship and the need to offer a voluntary rating systems to satisfy governmental and other groups. The application of PICS is through a meta tag embedded in the HTML file’s header.

The PICS project was begun in mid-1995 and adopted as a standard in May 1996. If you’re interested in its ongoing technical development, you might also want to visit the W3 area about PICS.

PICS wasn’t designed as a self-censoring tool. The PICS project intentionally did not define rating criteria, voting instead to create a judgement-free technology for supporting whatever ratings criteria individuals or groups want to use. This approach gives the PICS meta tags a hook for ranking site content in a variety of ways and there is talk that the PICS meta tags could become an additional tool for building search indices and directories.

Judgmental ratings which conform to the PICS technical specs are currently offered by the non-profit Recreational Software Advisory Council (RSAC) and by the for-profit company Safe Surf. It is likely that others will also offer ratings codes in the near future.

Companies like IBM are also lining up behind the PICS standard. IBM recently announced its reasoning for embracing PICS?if you want to read about it directly from the Big Blue, visit IBM’s magazine articles archives and search for PICS.

Each group devises its own rating scale and generates a meta tag for your site that ranks your content based on its criteria. At RSAC, you’ll answer detailed questions about the scope of sex, nudity, language and violence in your site. At the end of the questionnaire, the ratings system will assign you scores in each of the four categories. At Safe Surf, the rating scheme uses 10 categories, including profanity, heterosexual themes, homosexual themes, nudity, violence, sex/violence/profanity, intolerance, glorification of drug use, other adult themes, and gambling. Likewise, it will assign ratings data based on your responses.

No one comes in and rates your site for you; you simply answer the questions and the service translates those responses into a set of ratings.

How It All Works
Three things need to happen for this security/ratings feature to work.

  1. First, the reader needs to turn on security in his or her browser. Security is an option in IE’s View menu/Option selection. If readers don’t have Security turned on in the browser, all the meta tags in the world won’t make a bit of difference.
  2. Second, you need to register your site with the RSAC, Safe Surf or any other group which creates ratings data. After you register your site and answer a series of questions about it, these services will email you an appropriate code snippet based on your answers.
  3. Third, you need to include the PICS meta tags in the header section of your HTML files. You’ll receive your site’s custom PICS meta tag directly from RSAC and/or Safe Surf via email. You simply paste the code fragment into the header sections of your HTML files and your site is PICs-compliant.

The tag you’ll receive resembles this one:

It’s that easy to “rate” your site. Whether you want to or not is an entirely different matter, and one that lies only in your hands.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist