The Problem with Frames
What are Frames?
A generic framed page looks like this.
Frames allow a webmaster to load pages into windows or "frames" of a main "frameset page" while leaving other windows or "frames" in the pages unchanged. One of the biggest advantages of frames was the fact that a navigation bar or a header could exist in just one file. Therefore, to do changes on the navigation bar, a webmaster could change just the navigation bar file. (In non-frame pages the navigation bar is often coded into every web page, making changes more time-consuming because each navigation bar on each page of the website must be modified to change just one navigation link.)
We say this was the advantage of frames because server side includes (SSIs) now solve this problem without some of the optimization problems associated with frames. Almost anything that can be done in frames can be done in other ways. In our opinion, frames are now obsolete.
However, if you really must have a website in frames, there are ways to optimize the site.
The Problem with Frames
There are several problems associated with frames. To understand these problems, lets take a look at what a search engine sees when it looks at a framed web page.
For our generic framed page, the search engine sees the following code:
Main Code For A Generic Framed Page
<html>
<head>
<title>Framed Page</title>
</head>
<FRAMESET COLS="15%, 85%">
<FRAME SRC="navbar.html" name="navigation">
<FRAME SRC="homepage.html" name="main">
</FRAMESET>
</html>
Although the website viewer sees the pages’ text, the search engine sees only this code. Worse, search engines don’t understand the frame tags and can’t follow the links in the frames. So it can’t get to any of your web pages.
No text. No links. No rankings.
Adding a good title and some META tags couldn’t hurt, but it can’t be the end of your solution.
The NOFRAMES Tag
The first step to optimizing with frames is to include a useful NOFRAMES tag. This tag was originally introduced because older browsers couldn’t view frames. Therefore, most NOFRAMES tags read something like:
"You have a browser older than dirt. Get a new one!"
Together with the old code, this looks like this to search engines:
Main Code For A Generic Framed Page with NOFRAMES Tag
<html>
<head>
<title>Framed Page</title>
</head>
<FRAMESET COLS="15%, 85%">
<FRAME SRC="navbar.html" name="navigation">
<FRAME SRC="homepage.html" name="main">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>You have a browser older than dirt. Get a new one!</P>
</BODY>
</NOFRAMES>
</html>
This is all fine and dandy if you want to rank under a browser older than dirt. But that was probably not what you had in mind. Plus, the search engines still can’t follow any of your links. So they can’t get to any of your other web pages.
You can solve both these problems in one deft sweep. Add good spider-content and actual links to your NOFRAMES tag. Like this:
Main Code For A Generic Framed Page with SEO-friendly NOFRAMES Tag |
|
<html> <head> <title>Framed Page</title> </head> <FRAMESET COLS=" 15%, 85%"><FRAME SRC="navbar.html" name="navigation"> <FRAME SRC="homepage.html" name="main"> </FRAMESET> <NOFRAMES> <BODY> <P>We are the best widget makers ever! We make red, green and blue widgets like you wouldn’t believe!</P> <a HREF="homepage.html">Home</a><br> </html> |
That’s better, but there is still one problem…
Loading Web Pages in Frames
Now we have another problem. To understand this, lets follow the link that the spider has followed to our first link: homepage.html.
Click Here To See How Google Sees Our First Linked Page
So what’s the problem?
Since the spider sees the page without the frames, it doesn’t see the left navigation bar. Since you already included all the links from the navigation bar in the NOFRAMES tag, this may seem unimportant. However, the problem is, it will also list your page without the navigation bar.
That is, now, when a viewer clicks on your site in your search engine listing, it will load without the frames. Since your navigation bar (and possibly your header and other important information) is located in your frames, this is bad.
How to fix this?
There is a quick fix and a long fix. The quick fix is to include this code in all pages that you want to load inside your main frame-set page:
if (top == self)
self.location.href = "framedpage.html";
</script>
This code checks to see if a browser has loaded your page without the frames, and, if so, redirects the browser to the starting main frameset page of your site.
The code goes between the </head> and <body> tags. We have used this code on our About Us page of our generic site. The code for the About Us page looks like:
Main Code For A Generic Framed Page with NOFRAMES Tag |
|
<html> <head> <title>About Us</title> </head> <script language="JavaScript"> if (top == self) self.location.href = "framedpage.html"; </script> <body> About us page. </body> </html> |
Remember that if you use this code for your own pages, you should substitute the name of your main frameset page for "framedpage.html."
Now, our About Us page loads like this from a search engine listing.
But…wait….
That isn’t our About Us page. That loads the homepage.
Like we said, there is a quick fix and a long fix. This quick fix always redirects the viewer to the homepage if the page is loaded from a direct link and not from a regular link within your framed site.
There is a way to ensure that the correct page is loaded from search engine listings and other direct links.
The following article explains this more involved process. Finding Parents for Orphaned Pages.
