HTML Code Tutorial

Tutor Ebook Download

Frames and Search Engines

The decision of whether or not to use frames when building a website has been a matter of debate for many years.

In the past, search engines had problems indexing web pages that used a frames structure.

Not Today!!

You will need a basic understanding of frames and how they work before you venture on the course of action proposed in this document.

frameset diagram 2 column structure We'll use the diagram in Figure 1 for explaining the task. In Figure 1 our main frameset is a 2 column structure. The left column (A) will contain our links page, which will target our source pages into frame C. Frame B contains our document or site heading.

Code for frameset - index.html:
<frameset cols="20/,80/">
<!--column 1-->
<!--Frame A-->
<frame src="links.html">
<!--column 2-->
<frameset rows="30/,70/">
<!--Frame B-->
<frame src="heading.html">
<!--Frame C-->
<frame src="home_page.html" name="frame_c">
</frameset>
</frameset>

The documents that appear in frame windows A,B and C are just plain ole HTML pages. The problem is not getting them indexed on a search engine, but what happens if they are indexed and someone accesses the page by clicking the link.

What if the heading page was indexed and a surfer accessed the page. All that he would see is the heading of our document. What if the links page was indexed and a searcher accessed it. All he would see is a list of links.

The same question arises for every source page that will exist on our website.

One solution would be to place a hyperlink on each page with the caption Restore Frames. The hyperlink would be used to send the surfer to the main frameset page.

A more complete solution would be to redirect our surfer to a frameset specially designed to properly display the document.

This can be done with the simple addition of a block of Javascript. Of course this only works with web browsers that have Javascript capability enabled. Most do, but we'll add an extra step later for those that don't.

The Task

Our task is going to be to create several different frameset pages, with the same structure as our main frameset page.

The Main Frameset Page

Our main frameset page will be our index.html page which will display when our URL is accessed. It will contain more information than our other frameset pages. We want it to be indexed so we must provide information for the search engines.

Our main frameset page will be our index.html page which will display when our URL is accessed. It will contain more information than our other frameset pages. We want it to be indexed so we must provide information for the search engines.

To place the information for indexing purposes on the page we'll use the noframes tag. The code:
<noframes><body></body></noframes>
The noframes tag will be placed directly below the end of the main frameset tag. Between the body tags of the noframes structure we'll place pertinent information taken from our home page. We'll also include all of the links from the links page displayed in frame window A. This will serve a dual purpose. We'll provide a page for that .01% of web browsers that don't display frames and we'll give the search engines something to use for indexing. The links will give spiders access to your other pages.

Redirecting to the Main Frameset (index.html)

In our example there are only 3 pages we want to redirect to index.html. They will be the links page, the heading page and mostly likely the home page which we specify as the default page for frame window C.

The Javascript

<SCRIPT TYPE="text/javascript">
<!--
if (parent.location.href == self.location.href) {
if (window.location.href.replace)
window.location.replace('index.html');
else
// causes problems with back button, but works
window.location.href = 'index.html';
}
// -->
</SCRIPT>

This code is placed between the head section and the body section of the links, heading and home page. When either of the pages is directly accessed it will redirect to index.html with all pages in their respective windows. Now for browsers that don't have Javascript enabled (and they are few) , place a footer on the page containing a hyperlink that points to index.html.

Additional Framesets

Now suppose our links page contains a link to target a source page named aboutus.html into frame window C. We could just place the same redirection code on the page and send it to index.html. But the surfer would then have to find his way to the page he had originally clicked on. A more efficient means would be to create a second frameset page where the default URL for frame window C is aboutus.html. So we create a new page with the identical frame structure of index.html (exclude the noframes section), and name it frameset_2.html. The only difference in structure is that the default source page for frame c is aboutus.html.

Code modified for frameset_2.html:
<frameset cols="20/,80/">
<!--column 1-->
<!--Frame A-->
<frame src="links.html">
<!--column 2-->
<frameset rows="30/,70/">
<!--Frame B-->
<frame src="heading.html">
<!--Frame C-->
<frame src="aboutus.html" name="frame_c">
</frameset>
</frameset>

The Javascript for aboutus.html

<SCRIPT TYPE="text/javascript">
<!--
if (parent.location.href == self.location.href) {
if (window.location.href.replace)
window.location.replace('frameset_2.html');
else
// causes problems with back button, but works
window.location.href = 'frameset_2.html';
}
// -->
</SCRIPT>

Once again we'll also add a hyperlink to the aboutus.html page that sends the non Java browser to frameset_2.html

Create a separate frameset page for each additional HTML page that you think might have a chance of being indexed by a search engine.

Naming Web Pages and Frameset Pages

Don't name your pages like we did for our demo. Use keyword phrases in your page names. For example, we probably should have named our main content page, frames-redirection.html and the matching frameset page something like frames-redirection-rd.html for better results on Google.

Does It Work?

To find out, go to search.msn.com and search.yahoo.com. Search the phrase frames and redirection. Our little demo website has a #1 ranking on both SEs. Use quotes on Ask and Google and it's still on the first page of results.


Check out our Free Frames Template Kit or try our Free Frames Kit Demo





CGI Online
How to Create a Website -Tutorial
Create a Web Site


This Free HTML Tutorial
is provided by Net Success 2000 Plus Inc.
PO Box 1508
Somerset, KY 42502
Last Modified: September 26, 2007

HTML Codes Tutor Ebook