Home -> Net Tips -> Search Engines - Part II: Search Engines and Frames

Search Engines - Part II: Search Engines and Frames

When frames were first introduced everybody thought they were a great idea. Since then various problems involving search engines and printing have caused many sites to fall back to single page designs. With server-side scripting these are easy to implement so are a logical choice. BUT - what do you do if you don't have server-side scripting or need to use frames?

This is the problem I was faced with whilst working on two projects - Hayes Manor Online and ONsupport. The first of these has such a large navigation area that a static page isn't appropriate and server-side scripting isn't available either. On the second site pages are sourced from various different locations, so I could only use frames.

Background Information

I was redesigning Hayes Manor Online in November 1998 following a US Exchange trip which had lots of pictures and decided that I needed a way to remove the navigation bar so that there was more room to view the pictures. What does this have to do with search engines I hear you ask?

The solution to the problem involved using JavaScript to decide if the page was in the frameset and display a message "Hide Navbar" if it was. If it wasn't in the frameset, the pages would display "Show Navbar". This is the key to the search engine problem.

The Search Engine Problem

Whenever you submit a site to a search engine it "crawls" your pages, indexing each one in turn. When it displays search results it links to each page individually - each individual page without the frames that go with it. Normally it is the navigation frames which provide the main way of navigating the site (and possibly the branding of the site), however your visitor can't see them. It's like being dumped in the middle of the desert without a map, compass or GPS. Sure, you can use the stars to find your way home, but GPS would be much faster and easier.

The Solution

What you really need is for the page to either load the frameset itself, or provide the user with the option of loading it. That is what happens on the aforementioned sites, using JavaScript.

The most elegant thing about this solution is that it doesn't require anything special on the server, so works on free webspace as well.

Implementing The Solution

Your pages need a bit of work done on them - but not much! The first thing that you need to do is open your main frameset page (typically index.html or similar). You will typically have 2 or 3 frames - top and/or left navigation and the main body. Make sure that one of the navigation frames has a name - in this example it is called "leftnav". The code below shows what a frameset with a left navigation pane and main window would look like:

 
      <html>

 <head> <title>Demo Frameset</title>

 </head>
 
      <frameset cols="150,*">

 <frame name="leftnav" target="main" src="leftnav.html">

 <frame name="main"  src="home.html">
 
      <noframes>

 <body>

 

 <p>This page uses frames, but your browser doesn't support them.</p>

 

 </body>

 </noframes>

 </frameset>

 </html>

It's the bold bits that we're really interested in. The name of the frame can be used in JavaScript code later on.

Finishing the Frameset

Normally, as in the example above, your main frame would display your front page (home.html for this one). But, you need it to display other pages as well. If you replace the bold code from above with the code below, whenver you call the page with the query "?<url>", the url will display instead of the home page.

Using this example, linking to index.html?http://www.ashleybrown.co.uk/ would load the home page of this site into the main frame.

 
      
      
 <script>

      <!---

function loadFrame()

{

  var search = document.location.search;  
// get the ?<url> bit 

  if(search != "")   // if a
page was specified...

  {

          search = search.substring(1); 
// ...get rid of the ?...

     window.main.location.href = search; 
// ...then load that page

  }

      }

//---->

</script>

      

      <frameset cols="150,*" onload="loadFrame()">

 <frame name="leftnav" target="main" src="leftnav.html">

       <frame name="main" src="about:blank">

That's the hard bit done. Now, put the code below at the top of each of your pages, replacing index.html with the name of your main frames page and page.html with the name of the page you want inside the frameset:

 
      <script>

 <!----

 // see if the frame called "leftnav" is there. If it isn't, we know that
we're not in the frameset.

 if(!parent.leftnav)  // if it isn't there...

 {

     document.location.replace("index.html?page.html");  
      // ... replace the current page with the
main frameset

 }    

 

 //---->

 </script>

That's it - whenever someone clicks on a link to one of your pages from a search engine, the frames will load themselves automatically. You can use the same technique to write a "Show Navbar" button if you want. But that is an exercise for the reader! (of course, you could follow the link to Hayes Manor Online and find out how to do it)

Next Time

That's it for search engines for the time being. I might return to them later. Next time I'll cover the little ways in which you can make your site a little bit more user-friendly.