Optimising Frames for
Search Engines
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.
Figure 1 - index.html: the "framing"
page
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset cols="30%,70%">
<frame src="navbar.html" frame="left">
<frame src="page1.html" frame="right">
</frameset>
</html>
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:
Figure 2 - navbar.html
<html>
<head>
<title>Navbar</title>
</head>
<body>
<a href="page1.html" frame="right">Page
1</a>
<a href="page2.html" frame="right">Page
2</a>
<a href="page3.html" frame="right">Page
3</a>
</body>
</html>
Figure 3 - page1.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>
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:
Figure 4 - index.html with added <NOFRAMES>
section
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset cols="30%,70%">
<frame src="navbar.html" frame="left">
<frame src="page1.html" frame="right">
</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>
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:
Figure 5 - search engine listing with
poor <NOFRAMES> text
This web site must be viewed using a frames-capable web browser.
Your web browser, however, is not capable of displaying frames.
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.
Figure 6 - index.html with better <NOFRAMES>
text
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset cols="30%,70%">
<frame src="navbar.html" frame="left">
<frame src="page1.html" frame="right">
</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>
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:
Figure 7 - search engine listing with
better <NOFRAMES> text
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!
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:
Figure 8 - index.html with added hyperlinks
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
</head>
<frameset cols="30%,70%">
<frame src="navbar.html" frame="left">
<frame src="page1.html" frame="right">
</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!
<a href="page1.html" frame="right">Page
1</a>
<a href="page2.html" frame="right">Page
2</a>
<a href="page3.html" frame="right">Page
3</a>
</noframes>
</html>
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:
Figure 9 - JavaScript for individual
pages
<script>
<!--
function frameMe(){
var frameset = "frameset.html"; //name of the frameset
page
var frame = "right"; //name of the frame to load document
into
page = new String(self.document.location);
var pos = page.lastIndexOf("/") + 1;
var file = page.substr(pos);
if(window.name != frame){
var s = frameset + "?" + file + "&" +
frame;
top.location.replace(s);
}
return;
}
frameMe();
//-->
</script>
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.
Figure 10 - individual page with JavaScript
added
<html>
<head>
<title>SuperWidget from XYZ</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(){
var frameset = "frameset.html"; //name of the frameset
page
var frame = "right"; //name of the frame to load document
into
page = new String(self.document.location);
var pos = page.lastIndexOf("/") + 1;
var file = page.substr(pos);
if(window.name != frame){
var s = frameset + "?" + file + "&" +
frame;
top.location.replace(s);
}
return;
}
frameMe();
//-->
</script>
</head>
<body>
<h1>Page 1</h1>
This is Page 1 of the XYZ site, 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>
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:
Figure 11- JavaScript for "framing"
page
<script>
<!--
function loadDoc(){
var a = location.search.split('&');
var page = a[0].substr(1);
var frame = a[1];
if(page && frame){
var s = "top." + frame + ".location.replace('"
+ page + "')";
eval(s);
}
return;
}
//-->
</script>
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:
Figure 12 - onLoad code for "framing"
page
<frameset cols="20%,80%" onLoad="loadDoc()">
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:
Figure 13 - all components placed in
"framing" page
<html>
<head>
<title>SuperWidget XYZ from XYZ</title>
<script>
<!--
function loadDoc(){
var a = location.search.split('&');
var page = a[0].substr(1);
var frame = a[1];
if(page && frame){
var s = "top." + frame + ".location.replace('"
+ page + "')";
eval(s);
}
return;
}
//-->
</script>
</head>
<frameset cols="20%,80%" onLoad="loadDoc()">
<frame src="navbar.html" name="left">
<frame src="page1.html" name="right">
</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">Page 1</a><br>
<a href="page2.html">Page 2</a><br>
<a href="page3.html">Page 3</a>
</noframes>
</html>
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.
« Back to Descriptions |
