Frames and Search Engine Visibility

Whether web site designers should use frames in web site design has been hotly debated. Usability experts do not recommend the use of frames because people are not able to properly bookmark a framed page and because the URL appearing in the browser does not match the content. End user opinions are divided as well. They either love them or hate them. Newbie web users often get confused with the navigation scheme. Savvy web users opt to view pages without the frameset. Overall, most people prefer not to navigate a framed site when given the choice.

If you are creating a new web site or modifying an existing design, I highly recommend not designing with frames. In terms of search engine visibility, the search engine spiders might not be able to find keyword-rich web pages on a site if the pages are not coded properly. In addition, search engine results can send visitors to web pages with no navigation schemes. However, with proper planning, framed sites can be search engine friendly. This section addresses design workarounds that can help a framed site.

Understanding Frames and the Search Engines

Because search engine spiders index text and follow links, the main problem with the initial frameset code is that it does not present search engine spiders with keyword-rich text to index and set links to follow. Listing 3.6 shows some standard HTML code for a basic frameset page for the fictional TranquiliTeas site.

Listing 3.6 HTML Code for a Basic Frameset Page

 <html>  <head>  <title>Organic green, oolong, and herbal tea from TranquiliTeas Organic  Teas</title>  <meta name="description" content="Get gourmet herbal, green, and  oolong teas at wholesale prices from TranquiliTeas.  Organic tea  importer offers decaffeinated herbal teas and other herbal blends.  Black, oolong, green, and iced teas available as loose tea or in tea  bags.">  <meta name="keywords" content="organic teas green oolong tea herbal  blends TranquiliTeas decaffeinated loose tea bags">  </head>  <frameset cols="120,*" border="0" framespacing="0"  frameborder="no" marginheight="0" marginwidth="0">  <frame src="buttons.html" name="navigation" noresize scrolling="no"  border="0" marginheight="0" marginwidth="0">  <frame src="content.html" name="content" noresize scrolling="auto"  border="0" marginheight="0" marginwidth="0">  </frameset>  <body>  </body>  </html>

If you analyze this code, you can see why many framed sites do not rank well in the search engines. There is virtually no content on this web page except for the title-tag and meta-tag content. If a search engine, such as Google, does not use meta-tag content for relevancy, the only content on this web page is the title-tag text. A single keyword phrase hardly communicates quality content to your target audience.

The <noframes> Tag

Conceptually, with a framed site, the browser displays one of two types of pages. If a browser can read frames, it is served the frameset content. If a browser cannot read frames, it displays the content between the <noframes></noframes> tags.

If your site uses a frames design, always include keyword-rich content and links to the most important pages within your site within these tags. That way, the search engine spiders record your most important text.

Listing 3.7 shows a short example of how to properly code an initial frameset page. If I were to create actual content inside the <noframes> tags, I would write at least 200 “300 words of quality information to indicate to both the search engines and site visitors that this text is quality content. Also note that in the following code, I added the style sheet inside the <head> tags so that the <noframes> content matches the site design.

Listing 3.7 Sample HTML Code Illustrating the <noframes> Tag

 <html>  <head>  <title>Organic green, oolong, and herbal tea from TranquiliTeas Organic  Teas</title>  <meta name="description" content="Get gourmet herbal, green, and  oolong teas at wholesale prices from TranquiliTeas.  Organic tea  importer offers decaffeinated herbal teas and other herbal blends.  Black, oolong, green, and iced teas available as loose tea or in tea  bags.">  <meta name="keywords" content="organic teas green oolong tea herbal  blends TranquiliTeas decaffeinated loose tea bags">    <link rel="STYLESHEET" type="text/css" href="css/style1.css"><style  type="text/css"></style>  </head>  <frameset cols="120,*" border="0" framespacing="0"  frameborder="no" marginheight="0" marginwidth="0">  <frame src="buttons.html" name="navigation" noresize scrolling="no"  border="0" marginheight="0" marginwidth="0">  <frame src="content.html" name="content" noresize scrolling="auto"  border="0" marginheight="0" marginwidth="0">  </frameset>  <body>  <noframes>  <h1>Organic green, oolong, and herbal tea</h1>  TranquiliTeas Organic Teas offers a wide range of gourmet organic teas  at wholesale prices.  To view our selection of choice organic teas, please select one of the  links below:  <ul>  <li><a href="herbalteas.html>Herbal teas</a></li>  <li><a href="greenteas.html>Green teas</a></li>  <li><a href="oolongteas.html>Oolong teas</a></li>  <li><a href="blackteas.html>Black teas</a></li>  <li><a href="teasets.html>Tea sets and accessories</a></li>  <li><a href="teas.html>teas</a></li>  </ul>  If you would like more information about our organic teas or would like  to order one of our catalogs, please fill out our <a  href="contact.html">contact</a> form or call us at 1-800-XXX-XXXX.  </noframes>  </body>   </html>

The <noframes> Tag and Spam

Unfortunately, a long time ago, unethical search engine marketers discovered that they could hide text on a web page by using the <noframes> tag, even though the actual web page did not contain a frameset.

Warning

Do not place a second grouping of meta-tag or title-tag content inside the <noframes> tag. Why? Meta-tag or title-tag content belongs between the <head></head> tags, not between the <body></body> tags.

Placing extra titles and meta tags on your web pages can result in a spam penalty because this technique is clearly used to artificially inflate keyword density, not to benefit your site visitors.

Because of the widespread, blatant abuse of this tag, most of the search engines either ignore or decrease the relevancy of the text inside the <noframes> tag.

Navigation and Frames

As stated in Part 2, "How to Build Better Web Pages," a search engine design and user-friendly design have at least two forms of navigation: one that site visitors can follow and one that search engines can follow. A framed design is no exception, especially when it comes to search engine visibility.

The simplest way to make the main content of a framed site search engine friendly is to add a set of text links at the bottom of every web page.

For example, one Dee Concrete sample design was formatted in a frameset with two frames: The left frame contains navigation buttons, and the right frame contains the main content. Site visitors can access the Products & Accessories page from the home page, and the page appears in a browser, as shown in Figure 3.9.

Figure 3.9. The Dee Concrete Products & Accessories page as it would appear in a framed site design.

graphics/03fig09.gif

However, if the page appeared in search engine results, and if visitors clicked the link from the search engine results directly to the Products & Accessories page, the page would not appear in the frameset. It would appear as shown in Figure 3.10.

Figure 3.10. The Dee Concrete Products & Accessories page as it might appear after clicking a link from the search engines.

graphics/03fig10.gif

Even though this page does not appear within a frameset, the search engines can still spider this page and the other important pages in the Dee Concrete web site because of the following facts:

The text links at the bottom of the page
The breadcrumb links at the top of the page
The text links embedded in the main body text

Therefore, whenever creating a web site with frames, always be sure the main content frame has a set of links the search engines can follow. The search engine spiders also have to, somehow, find the interior pages. If (a) there are no links to the internal pages from the frameset, (b) the actual interior pages are not submitted to the search engines, and (c) there are no links from other sites to the interior pages, the search engines cannot index the interior pages.

Frames and JavaScript

If you prefer that the web pages on your site always remain within the frames design, you can insert JavaScript on all your pages so that browsers automatically load the frames design. Place the JavaScript between the <head></head> tags, as shown in Listing 3.8 for the fictional TranquiliTeas site.

Listing 3.8 JavaScript <head></head> Tags

 <html>  <head>  <title>Organic green, oolong, and herbal tea from TranquiliTeas Organic  Teas</title>  <meta name="description" content="Get gourmet herbal, green, and  oolong teas at wholesale prices from TranquiliTeas.  Organic tea  importer offers decaffeinated herbal teas and other herbal blends.  Black, oolong, green, and iced teas available as loose tea or in tea  bags.">  <meta name="keywords" content="organic teas green oolong tea herbal  blends TranquiliTeas decaffeinated loose tea bags">    <script language="JavaScript">  <!-- if (top == self) self.location.href="framesetname.html";  // -->  </script>  </head>

This script does not load the most appropriate content page in the frameset. The script loads only the frameset you specify, which is generally the home page. Additionally, site visitors cannot use the Back button because each page on your site automatically loads the frameset page.

Important

Although other scripts exist to enable framed pages to be bookmarked and to load specific pages within the frameset, it is best to let your site visitors select their preference. Many people just do not like frames designs, and they greatly appreciate the option to turn the frames off.

The best solution is to create a home page that gives site visitors the option to view a site both with and without a frames design. After analyzing your site's traffic logs for a period of at least three months, determine which design your visitors prefer. You might find that your site visitors greatly prefer the unframed version of your site because unframed sites are generally easier to navigate. If your visitors prefer the unframed version of your site, use that site design template for all future web site designs. Extra bonus? Qualified search engine traffic tends to increase after frames are no longer a part of a site design.