How to Optimize Your Frames-based
Web Pages for META Tags
Don't be afraid to design with frames
by Christopher Simmons
Afraid of Frames
Many Web-designers are afraid to use frames for Web design because somebody "who knows" told them that they wouldn't be visible to search engines.
The reason for this thinking is because the index page which loads first, containing <FRAMESET> </FRAMESET> tags, does not have any BODY content which normally contains things like headlines, body text describing what the site is all about, IMG ALT tags, links to other site pages, and the like.
Many designers who do choose to use frames because of design considerations likely will miss an important step for ensuring the site will be "indexable" by the top search engines.
In fact, if you are already familiar with using META tags, it's actually fairly simply to optimize your frames-based Website for the search engines.
The HEAD and the BODY
First, you need to realize that you can (and need to) use META tags as you would normally, by placing them between <HEAD> </HEAD> tags of any HTML document where you set-up framesets.
What you may not know is that some of the top search engines don't even look at the KEYWORD and DESCRIPTION tags normally prepared for a META tag set. For example, FAST, Lycos, Northern Light, Excite, and Google (which now powers parts of Yahoo!) actually get most of their keyword and ranking information from the "content" of your Web page(s), which are normally found between the <BODY> </BODY> tags of your HTML. But, of course, index pages for frames don't have a body!
So, the tag you need to know and love when building frame-based sites is the <NOFRAMES> </NOFRAMES> tag set. On a frameset index page (or any page where you choose to set-up frames) you simply put the BODY content in between these two tags, and the search engines that need to can find your Website info — just as if it were a non-frames Web page. It's really that simple.
The quick method is to grab a couple of paragraphs from the "about" page for the Website and place it in the body area, with the advanced method being to build an entire no-frames page specifically for this purpose, complete with links, descriptions, images, copyrights, etcetera.
This is the RIGHT way to build frames-based layouts, and not rely on a simple "You need a frames-capable browser to view this site" statement with a link to Microsoft and/or Netscape. The fact is, the majority of Web browsers CAN view frames. Netscape has supported frames since 1995, Internet Explorer since 1996, and AOL since 1997/98.
Basic Example of META tags and NOFRAMES Content
<HTML>
<HEAD>
<TITLE> Bob's Pet Shop with dogs and puppies </TITLE>
<HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="keywords" CONTENT="pets,dogs,puppies,animals,dogs and cats,pet adoption,german shepards,petshop">
<META NAME="description" CONTENT="Bob's Pets, the online pet adoption place, with mixed-breed and pure bred puppies, and dogs of all kinds. Online directory with photos and video. Located in Santa Monica, California.">
<META NAME="author" CONTENT="Bobbo McFiz">
<META NAME="copyright" CONTENT="1999-2000 Bob's Pets Store">
<META NAME="rating" CONTENT="safe for kids">
<META NAME="distribution" CONTENT="local">
<META NAME="robots" CONTENT="INDEX">
<META NAME="language" CONTENT="English">
</HEAD>
<FRAMESET rows="115,*" border=0 framespacing=0>
<FRAME src="top.html" name="head" frameborder="NO" scrolling="NO" noresize marginwidth="0" marginheight="0">
<FRAME src="welcome.htm" name="main" frameborder="NO" noresize marginwidth="0" marginheight="0" scrolling="NO">
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#ffffff">
<A HREF="pages/adopt_puppies.html"><IMG SRC="pix/puppies.gif" border="0" alt="puppies and dogs adoption" height=50 width=350></A>
<P>
Bob's Pets, the online pet adoption place, with mixed-breed and pure bred puppies, and dogs of all kinds. Online directory with photos and video. Located in Santa Monica, California.
<P>
<A HREF="pages/about.html">Click here for more information</A>
<P>
This website requires a browser that supports "frames".
</BODY>
</NOFRAMES>
</HTML>
As you can see in this example, everything you put in between the BODY tags is exactly the same as you would build in a normal HTML page. Think of it as an extra page you build that is only seen by people without a frames-capable browser — and, of course, those ever-important search engines!
If you want your sub-sections to be spidered, create unique frame sets for each topic section of your site (i.e., section topic menu), and put text-links to those section menu frame-set index pages in the body of your primary frameset index document.
If you follow the above example, you will be happy to find you CAN build search engine compliant sites while still benefiting from the usefulness of frame-sets.
• • •
Article Copr. © 1999-2003 Christopher Simmons — All Rights Reserved.
Christopher Simmons is president of Torrance, CA-based Neotrope®, a company established in 1983 and specializing in marketing, E-commerce, content development, audio/video conversion, and Web design for small to medium companies. He is a professional author who has written for numerous national magazines including Digital Imaging, Print on Demand Business, Digital Printer, Micro Publishing News, CrossMedia, Polyphony, ComputerPlayer, and Spazz. He is also a member of the Public Relations Society of America (PRSA). A slightly different version of this article originally appeared in Digital Author magazine.
