Search engines have a tough time with frames. Using frames can prevent them from finding pages within a Web site or cause them to send visitors into a site without the proper frame "context" being established. Both problems can be corrected, with a little foresight by Webmasters.

Say More Than Sorry To Search Engines

Many sites use frames for navigation, and the fictional "Wonderful World of Stamp Collecting" site in this tutorial is a typical example of this. It has three frames: one for navigation, one for the site's title and one as the main content window.

View the example, then return to this page (use your back button or click on the big, ugly link that says "BACK TO THE TUTORIAL."

Example 1

You saw a single page with three frames appear. The content for these frames actually came from three different pages and was blended together according to the instructions of a fourth "master" page, also called the "frameset" page.

In contrast, most search engine spiders will only see the master page. Just like an old browser, they don't understand the instructions on how to produce the frame layout. These are ignored, and only information within the noframes tags is read (information which a frames-capable browser will ignore).

So what do frame-challenged search engines see in our example? This is pretty typical of some frames-based sites:

Sorry! You need a frames-browser to view this site.

Obviously, we need to provide search engines with a much better description of the site than this. There is also another problem. There are no links within the noframes area to pages within the site. That means the search engines won't crawl past our master page. We could have hundreds of information-packed pages inside the site, but this simple mistake essentially makes them invisible to many search engines.

Your Friend, The NOFRAMES Tag

One solution to the description problem is to add meta tags to the master page (read more about these on the Meta Tags page). However, meta tags are only a partial solution, because not all the search engines support them. Meta tags also don't help human beings that want to view your site but lack frames capability.

We can help both search engines and humans with some smart design. Take a look at the next example, and then come back:

Example 2

The example looks just like our original page, unless you are a search engine or are using an old browser. For them, we have added this additional information in the noframes area:

The Wonderful World of Stamp Collecting

Many people consider stamp collection to be a hobby, but it can be more than that. Stamp collecting can be a business, an art form or even a topic of conversation. Stamp history is absolutely fascinating. It's just one of the many topics you'll find in this site.

If you are viewing this text, your browser lacks the ability to read frames. Don't worry, you can still enjoy our site. All the pages can be viewed from the contents page. Please come inside!

Contents

Excellent. Now we have some descriptive text that any search engine can read, not just those that support meta tags. Furthermore, we've created a way for them (and humans) to get inside the site. That's via the contents link at the bottom of the description. Go ahead and click on it.

What appears is the information normally placed in the navigation window. From here, search engines can crawl through the rest of the site.

When I originally wrote this article in 2000, the noframes information could go immediately after the first frameset tag, if you wanted the text to be as high as possible on the page. Placing it above above the first frameset tag disabled the frame information in Netscape, although Internet Explorer was unaffected and displayed the frames correctly.

Also, at that time, including body tags within the noframes tags worked with either browser. It helped ensure that the body tags existed for any browser or search engine that might require them.

Remember to give your frame pages a title, even though it won't appear when the pages are viewed in their proper context. Titles are the most important element that a search engine indexes, so you want all your pages to have them.

Reestablishing The Frame Context

We're almost finished. There's only one downside to the work we've done so far. Now that search engines can index the individual pages within the site, visitors will come to them without the proper "context" being established. In other words, they won't see the page within one of the three normal frames. Instead, the page will stand alone.

This can be a big problem. Some Webmasters never anticipate that pages may be viewed outside the frames context. These pages may lack links back into the site, essentially "trapping" inexperienced Web surfers on the page.

This situation will happen even if you ignore all the advice above about making the site more accessible to search engines. That's because some are frames-capable. They will crawl your site and index each individual page, and thus visitors will enter the site out of context.

Fortunately, an easy answer is to include a "home" link at the bottom of all your pages. View the example, then click on the "home" link at the bottom. Then return here.

Example 3

If all went well, you got an unframed page just as someone might who found it via a search engine. By following the only link present, they are brought back to the home page, where the frames can be drawn.

If you do this, make sure the link is created using the target _top command, such as:

Home

Without the command, those entering your site the "normal" way and then clicking on the home link will get a new set of three frames drawn within the main content frame.

Another method is to use JavaScript. Here's one such JavaScript solution (there are many). Add this to your frame pages (anywhere between either the head or the body tags will work):

You need to replace the section that says FRAMESET PAGE NAME HERE with the name of the master page that has the appropriate frameset information. In our example, that's the index.html page, so the script reads as follows:

To see it in action, view the example below. It's the same as the out-of-context page as in Example 3, but the script forces the frames to be redrawn.

Example 4

Be aware that if you use this JavaScript tag, some people may be unable to use their browser's "Back" button to return to the preceding page unless they hit it quickly twice in succession. However, once they navigate to another page within your site, the Back button will work normally.

Don't like that idea? Well, I noticed it wasn't a problem with Firefox 1.6, so it may be that modern browsers are OK with the script. But here's another one a reader contributed that does the same frame resetting but which is not supposed to cause the back button problem:

The portion in bold is where you put the file name of the frameset page, the master page that assembles all your frames.

Naturally, the tips above may not be for everyone. However, with a little trial and error, you can make your frame sites accessible to both search engines and non-frame visitors. Moreover, the above examples require a bare minimum of work and no additional pages to essentially create a frames and non-frames site.

Frames Resources

Framing the Web
An excellent introduction and tutorial on using frames

W3C Frames in HTML documents
The official HTML 4.0 specs on frames, though they fail to use the body tags within noframes examples, which is incorrect, in my opinion. It doesn't hurt to have them and probably helps, so use them.

About HTML Guide - Help With Frames

A cornucopia of links with advice on dealing with frames.

NCSA Mosaic
Want to see the Web the way a search engine does? Download an old version of NCSA Mosaic -- the older the better. Any version listed via this link is incapable of displaying frames. Pick one and use it to see what you're saying in your noframes area.