|
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 is the Technical Consultant for Search Innovation Marketing
(http://www.searchinnovation.com),
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 © 2002-2004 Search Innovation Marketing. http://www.searchinnovation.com
All Rights Reserved.
|
| » Change
your mind about an eBay bid?
We have all made choices in life that two seconds later
we know we should take back. Especially when there is money involved
this can become a problem.
» A
simple way to create 7 effective autoresponder messages
Email is the Net's most powerful marketing tool. And autoresponders
are the best idea yet for marketing with email.
» 7
ways to drive laser-targeted traffic to your website
Getting people who matter to see one’s website
is a difficult undertaking if he tries to consider the fact that
there are rivals everywhere waiting to pin him down.
» Website
valuation: Why standard website pricing methods will emerge
The market of buying and selling developed websites is
becoming more and more liquid each day.
» One
way links are better than reciprocal links
You probably know by now that where your website ranks in
the search engine rankings dramatically affects how many visitors you
have to your site. Did you also know that you can change where your
site is ranked by being proactive and getting as many one way links
to your site as possible?
» How
to make visitors stay at your website
The very first thing which you should provide the visitors
with is some free interesting reading material.
» How
to make your visitors click your ads
Here is a simple solution; Convert your banner advertisement
to look like a text advertisement!
» Offline
advertising should be a part of your online strategy
Day by day, online business has become more & more
complicated and competitive.
» How
to sell traffic
Selling the traffic arriving at your site is a good method
to increase profits from your portal.
» Make
money from online auctions
Online auctions have the best benefit of a vast platform.
Your product is viewed by loads of people & hence there is
more possibility of finding a suitable bidder.
» Groupware
explained in easy terms
Groupware is a term used frequently to describe collaborative
software. Groupware is application software that integrates work
on a single project by several concurrent users at separated random
workstations.
» Timely
back up can save you from disasters
Few things which people often back up are e-mail addresses,
bank records, photographs, personal records, software’s,
music etc.
» Why
should one go for autoresponders
Autoresponders are programs which get automatically
executed in particular situations.
» Become
your own boss - Start your own online business today
A survey conducted by SBA states that two third of new
business survives at least two year and about forty four percent
survives at least four year.
» Express
your thoughts - Creating your own blog!
What exactly is a blog? Technically speaking it is a
journal or a newsletter which is regularly updated and can be used
by any one.
» Pop-up
ads - To be or not to be?
According to a study conducted by the Bunnyfoot University, “The
Efficacy of Pop-ups and the Resulting Effect on Brands” Internet
users feel harangues and harassed by pop-up ads.
» Why
content is king on the Internet
The advantages that Internet holds over the rest of
the other communication mediums should not wasted because of
the inability to find a comprehensive plan that will bind all
these faculties together.
» 10
niche marketing tips
In our increasingly driven consumer economies, the average
customer is bombarded by choices. With increased saturation of the
market, companies look towards niche marketing to search new, ever-evolving
and sophisticated consumers.
» Using
free traffic exchange
These days internet has emerged as both, a market and
hub for marketing. Unlike the ‘brick and mortar’ world
where large manufacturers manage to squeeze out the market bases
of smaller companies, the internet provides haven like the free
traffic exchange.
» Ten
ways to drive traffic to your website
Developing a web site and then letting it grow is
like planting a tree and then nurturing it.
» Marketing
through keyword articles
One of the most effective tools of Internet marketing
is the use of keyword articles.
» Want
to make money online? Market a service to businesses
Don walked across the street from his house to mine to
announce he had finally retired. "But I'm not ready for the
golf course," he said. "I want to make a living on the
Internet. What can I sell?"
» Web
site design mistakes - Database parameters in URLs
Creating a web site takes thought, planning and execution.
Unfortunately, many designs are dead in the water before they are
even published as far as search engine optimization is concerned.
Whatever you do, avoid these critical mistakes.
» Alexa
Toolbar - The ultimate internet tool
There are numerous tools available on the Internet to
assist online businesses. A valuable tool that you should use is
the Alexa Toolbar. Even better, this tool is free.
» Web
site design mistakes
Some wise human once said "Learn from the mistakes
of others. There isn't nearly enough time to make them all yourself."
Hence this article. Here are five of the most annoying and common
web design mistakes.
» Abandonment
- Why visitors don't turn into customers
Every good Internet business understands the value of
conversions versus hits received. Far too often, businesses become
fixated on the hits they are receiving instead of monitoring their
hit to sale conversion rate.
» Creative
search engine optimization - A case study
Search engine optimization this and search engine optimization
that. You read and hear about it all day, but what about your site?
|
|
| Tools & services to enhance your online
business |
|
» Site
Build It!
Over 100,000 small businesses of all kinds outperform
larger, well-financed competitors. Read about this all-in-one site-building-hosting-marketing
system of tools that delivers results.
» Secrets
To Their Success
Take a private tour of two "Mom & Pop"
web sites every month that earn $100,000+ a year... and discover
the exact step-by-step strategies they have personally used to generate
these massive profits. |
|
|
