Optimizing Frames for Search Engines
Optimizing Frames for Search Engines
Dale Goetsch
Search Innovation
November 13, 2002
revised May 12, 2003
Background
Because of the way framed web pages are created,
search engine robots have a difficult time spidering
sites built in frames. As a general rule, search
engine robots are not very good at executing client-side
code, and framed pages are "built" on
the client side. The best way to make a website
accessible to the robots is to take it out of frames,
but what can be done if the site absolutely must
remain in frames?
How frames are built
Typically the "framing" page--the page
that includes the <FRAMESET> tags--does not
contain any links to the rest of the website; rather,
it contains only information necessary for the browser
to construct the framed pages.
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset rows="20%,80%">
<frame name="frameTop" src="header.html">
<frameset cols="30%,70%">
<frame name="frameLeft" src="navbar.html">
<frame name="frameMain" src="page1.html">
</frameset>
</frameset>
</html>
Figure 1—index.html: the "framing"
page
The framing page loads the files named in the <FRAME>
tags into the frames defined in the framing page.
In our example, they look like this:
<html>
<head>
<title>Navbar</title>
</head>
<body>
<a href="page1.html" target="frameMain">Page
1</a><br>
<a href="page2.html" target="frameMain">Page
2</a><br>
<a href="page3.html" target="frameMain">Page
3</a><br>
</body>
</html>
Figure 2—navbar.html
<html>
<head>
<title>Page 1</title>
</head>
<body>
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We
have the best widgets available anywhere today,
and at half the price
of most leading widgets!
</body>
</html>
Figure 3—page1.html
What if you can't do frames?
Unfortunately, most robots cannot navigate through
this page. They do not understand the <FRAME>
tags, and are unable to move through this page to
the pages "navbar.html" or "page1.html".
Without being able to move through here, there is
literally nothing of interest for the robot to index,
so there will really be no information in a search
engine listing, if the site is listed at all.
The <NOFRAMES> section
One of the tricks that was incorporated into HTML
with the advent of frames was the recognition that
a page may be accessed by older browsers that are
incapable of rendering framed pages: they literally
cannot understand the <FRAMESET> tag. This
is why there also exists the <NOFRAMES> tag.
This then allows users on browsers that are not
frames-enabled to at least see something on a website.
Typically, the <NOFRAMES> section is wasted
on a message telling the user to get a newer browser,
thus:
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset rows="20%,80%">
<frame name="frameTop" src="header.html">
<frameset cols="30%,70%">
<frame name="frameLeft" src="navbar.html">
<frame name="frameMain" src="page1.html">
</frameset>
</frameset>
<noframes>
This web site must be viewed using a frames-capable
web browser. Your
web browser, however, is not capable of displaying
frames.
</noframes>
</html>
Figure 4—index.html with added <NOFRAMES>
section
This page now has information that the robot can
spider and include in the search engine database.
Unfortunately, you will now be known as the website
with the content:
This web site must be viewed using a frames-capable
web browser. Your web browser, however, is not capable
of displaying frames.
Figure 5—search engine listing with poor
<NOFRAMES> text
Text in <NOFRAMES> section
This is probably not what you want your potential
visitors to see when they look in the search engine
listings. Since the robot can spider at least this
page, it only makes sense to put your best foot
forward and put some real content into the <NOFRAMES>
section. That way, your search engine listing will
actually tell something about your site, rather
than just annoy people because they choose to use
a browser that doesn't do frames.
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset rows="20%,80%">
<frame name="frameTop" src="header.html">
<frameset cols="30%,70%">
<frame name="frameLeft" src="navbar.html">
<frame name="frameMain" src="page1.html">
</frameset>
</frameset>
<noframes>
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We
have the best widgets available anywhere today,
and at half the price
of most leading widgets!
</noframes>
</html>
Figure 6—index.html with better
<NOFRAMES> text
This is a dramatic improvement, because we
now have real content on the page that the robot
can read and include in the search engine database.
You have now upgraded your search engine listing
to this:
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We have the best widgets available anywhere
today, and at half the price of most leading widgets!
Figure 7—search engine listing with better
<NOFRAMES> text
Unfortunately, this is still not enough. Navigation
in <NOFRAMES> section Most websites comprise
multiple pages. Even though you may have a lot of
navigation links in your navbar.html file, the robot
will never see it. That means that if you want the
robot to crawl the rest of your site, you will need
to give it some links in the <NOFRAMES> section
of the page. To duplicate the navbar functionality,
you will need to add those links to the <NOFRAMES>
text, like this:
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset rows="20%,80%">
<frame name="frameTop" src="header.html">
<frameset cols="30%,70%">
<frame name="frameLeft" src="navbar.html">
<frame name="frameMain" src="page1.html">
</frameset>
</frameset>
<noframes>
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We
have the best widgets available anywhere today,
and at half the price
of most leading widgets!<br>
<a href="page1.html" target="frameMain">Page
1</a><br>
<a href="page2.html" target="frameMain">Page
2</a><br>
<a href="page3.html" target="frameMain">Page
3</a><br>
</noframes>
</html>
Figure 8—index.html with added hyperlinks
Now you have the best of both worlds: you have text
that the robot can grab, and you also have links
that the robot can follow to access the rest of
your site. As long as you have links to all of the
pages on your website that you want the robot to
access, you are home free now, search engine-wise.
The robot follows the link to the file "page2.html",
for example, and indexes the text on that page.
How useful this newly-indexed content is to your
visitor is now up to you.
Why is site framed?
People use framed sites for a number of reasons:
ease in navigation, uniform appearance throughout
a site, keeping your company name front-and-center,
and so on. In other words, there is probably a reason
why you wanted to display the pages on your site
(file1.html, file2.html, file3.html) within the
frames designated in the "framing" page.
Your search engine entries, however, will not keep
the pages in this configuration--remember that the
robot didn't do frames, so the search engine database
knows nothing of frames now either. That means the
hyperlink created in the search engine listing will
load only the individual page (file2.html), and
not put it in its overall context. That's not what
you wanted, or you would have designed the site
that way!
Loading page into frames
In order to force the user's browser to load a given
page into the framed environment that you wanted,
you must employ some JavaScript sleight-of-hand.
Specifically, you need to make each page aware that
it wants to load only within the frames that you
have designed. This is a two-step process that involves
placing some JavaScript code in each page on the
site.
Individual pages
For each of the individual pages, you need
to add an awareness whether they are loaded into
a frame, or sitting by themselves as an individual
document in the browser window. This is accomplished
by adding the following JavaScript to the page,
typically within the HEAD section:
<script>
<!--
function frameMe(){
//name of the frameset page (be sure to add path
info)
var frameset = "index.html";
//name of the frame to load document into
var frame = "frameMain";
page = new String(self.document.location.pathname);
if(window.name != frame){
var contents = frameset + "?" + page +
"&" + frame;
top.location.replace(contents);
}
return;
}
frameMe();
//-->
</script>
Figure 9—JavaScript for individual
pages
You will replace some of the parameters here with
names more appropriate to your situation:
replace "frameset.html" with the name
of the page on your site that has the <FRAMESET>
tags in it replace "right" with the name
of the frame on the frameset page into which you
want to load the current page. Let's implement this
for the page "page1.html", which we want
loaded into the frame named "right" that
is defined in the framing page "index.html".
Remember to add your meta tags and give the page
a meaningful title. Note the substitutions referenced
above.
<html>
<head>
<title>Page 1</title>
<meta content="description" value="SuperWidget
and all other widgets at half price from XYZ">
<meta content="keywords" value="SuperWidget
XYZ best widgets half price widgets">
<script>
<!--
function frameMe(){
//name of the frameset page (be sure to add path
info)
var frameset = "index.html";
//name of the frame to load document into
var frame = "frameMain";
page = new String(self.document.location.pathname);
if(window.name != frame){
var contents = frameset + "?" + page +
"&" + frame;
top.location.replace(contents);
}
return;
}
frameMe();
//-->
</script>
</head>
<body>
<h1>Page 1</h1>
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We
have the best widgets available anywhere today,
and at half the price
of most leading widgets!
</body>
</html>
Figure 10—individual page with JavaScript
added
The "framing" page
For the "framing" page, there are two
additional pieces of JavaScript that must be added.
The first is a JavaScript function that is placed
in the <HEAD> section of the page:
<script>
<!--
function loadDoc(){
//an array containing the querystring portion of
the URL
// of the page being loaded into this frame
var query = window.location.search.split('&');
//the first member of that array (without the "?"):
the page name
var page = query[0].substr(1);
//the second member of that array: the frame name
var frame = query[1];
if(page && frame){
//only do the replacement if there was a querystring
to parse
var contents = "top." + frame + ".location.replace('"
+ page + "')";
eval(contents);
}
return;
}
//-->
</script>
Figure 11—JavaScript for "framing"
page
There are no substitutions in this code. Place it
exactly as shown.
The other piece of code that must be placed is an
"onLoad" event handler, that is placed
in the <FRAMESET> tag, like this:
<frameset cols="30%,70%"
onLoad="loadDoc()">
Figure 12—onLoad code for "framing"
page
Remember that your frameset may have "cols"
or "rows" attributes, and the numbers
may vary. When we have
it all together, the completed "framing"
page will now look like this:
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
<script>
<!--
function loadDoc(){
//an array containing the querystring portion of
the URL
// of the page being loaded into this frame
var query = window.location.search.split('&');
//the first member of that array (without the "?"):
the page name
var page = query[0].substr(1);
//the second member of that array: the frame name
var frame = query[1];
if(page && frame){
//only do the replacement if there was a querystring
to parse
var contents = "top." + frame + ".location.replace('"
+ page + "')";
eval(contents);
}
return;
}
//-->
</script>
</head>
<frameset rows="20%,80%">
<frame name="frameTop" src="header.html">
<frameset cols="30%,70%" onLoad="loadDoc()">
<frame name="frameLeft" src="navbar.html">
<frame name="frameMain" src="page1.html">
</frameset>
</frameset>
<noframes>
Welcome to XYZ, home of the new and improved SuperWidget
XYZ. We
have the best widgets available anywhere today,
and at half the price
of most leading widgets!<br>
<a href="page1.html" target="frameMain">Page
1</a><br>
<a href="page2.html" target="frameMain">Page
2</a><br>
<a href="page3.html" target="frameMain">Page
3</a><br>
</noframes>
</html>
Figure 13—all components placed
in "framing" page
Completion
Once you have made these changes for the "framing"
page and all of the individual pages, you are now
ready for the search engine robots to visit your
site. They will be able to access all of the pages
in your site, and when your visitors click on your
listing in the search engines, your individual pages
will load in the way you designed them to work.
About the Author:
Dale Goetsch Technical Consultant for Search
Innovation Marketing , a Search Engine Promotion
company serving small businesses and non-profits.
He has over twelve years experience in software
development. Along with programming in Perl, JavaScript,
ASP and VB, he is a technical writer and editor,
with an emphasis on making technical subjects accessible
to non-technical readers.
Copyright © 2003 Search Innovation Marketing.
All Rights Reserved.
Return
to FREE articles index |
Visit Our Sponsor! WebPosition Gold