Optimizing Frames

Optimizing Frames

There are two opinions among web masters when it comes to the question of whether or not to use frames in the design of a web site. Some say, if optimized properly, there should not be any problem with the search engines. Some other web masters say that search engine spiders will never read the content of your pages if frames have been used, as they simply cannot navigate through the frames, and therefore your site will not get indexed properly.

This is true if frames have been used improperly and false if used correctly. I advise that if you are creating a new web site do not use frames. But if you already have a web site which has used frames in its design, do not panic. The world is not lost. In this article, I have explained how to optimize your site if you have already used frames.

What is a frames tag?

A frame is an html tag that can make a website appear in multiple windows within one browser. With frames, it is possible to create a window, which contains links static, in such a way that clicks on those links will cause a different frame to be updated.

It is advisable to stay away from the usage of frames due to browser compatibility problems and search engine indexing problems.

Search engines cannot read the frames – the problem

A frames page is a page which is capable of dividing itself into more than one window. It itself contains no visible content. It contains instructions telling on which web pages to call in which window and how they will be displayed within the browser window.

If yours is a framed site, it either prevents the search engine spiders from locating the web pages within your web site, or often results in a visitor accessing one of the individual pages without the framed page that it is supposed to be viewed from. As most net surfers are not familiar with this search engine characteristic, this often means that a visitor will access a page without any navigation or visa versa. These problems can be properly handled if the frames are optimized.

A frames page can be designed in many ways, but it usually they consists of references to pages that are to be used as the header, the content, a left-hand menu bar and perhaps a footer bar. Let us now analyze the structure of the framed web page:

HEADER
Menu Item 1 Item 2 Item 3	CONTENT
FOOTER

This has four frames: one for the site’s title, one for navigation, one as the main content window and one as the footer of the web page. When a hyperlink is clicked in the navigation window(left-hand frame), it will open a page in the main content window.

The use of frames can save a lot of time and hard work when it is required to make site-wide changes. With frames, you can change the items such as the menu bar and logo for your site in one page, and these changes will be updated in all the pages of the web site. Moreover, if you are using the left or the top frame as a navigation bar for your web site, then making it static (fixed) will help visitors easily access the navigation bar, instead of scrolling up again and again.

I will discuss why many framed sites fail in getting listed in the search engines. Have a look at how the html code of the above framed page called master.html will be like:

<html><head><title>This is the title</title>
<meta content=”Here you can write the description”>

</head>
<frameset rows=”20*,60*,20*”>
<frame src=”top.html”>
<frameset cols=”20*,80*”>
<frame src=”left.html”>
<frame src=”content.html”>
</frameset>
<frame src=”bottom.html”>
</frameset>
<body>
<noframes></noframes>
</body>
</html>

Here I am working with five files: 1. master.html, 2. top.html(which contains the header), 3. left.html (which contains the navigation bar), 4. content.html (which contains the real content of this entire framed structure), and 5.bottom.html (which contains the footer of the web page).

As you can see in the above html code, there is just a title tag, the meta description tag and the frameset tag. The search engine robots are designed to focus on the content of the main body of a web page. In this html code, the spiders cannot find any real content and this is the reason they are not able to index a web page that uses frames.

Most search engine crawlers act much like the old browsers. They will only see the master page. They don’t understand the instructions on how to generate the framed layout. These instructions are ignored, and only the text within the noframes tag is read. A frame capable browser ignores this noframes tag.

They are similar to the hybrid version 1.0 or 2.0 browsers, and gather information about the site that they are visiting. They also make a copy of that information in the index of the search engine. When they come across a web page that uses frames, they cannot find any content, and therefore do not understand the HTML tags that are used to create the framed page.

Problems of bookmarking, emailing and linking to individual pages

Apart from the above mentioned problems, inexperienced surfers will have difficulty in bookmarking an individual page, emailing a reference to a page or linking to a page. When they attempt to bookmark, email or link to a specific page, they will find themselves unknowingly bookmarking, emailing or linking to the front page of a site. Within a typical framed site, it is difficult for a novice surfer to trace the real url of the individual pages of a web site, once they have navigated inside the site, as all the pages have the same URL.

Hence, I have to equip our site in such a way that the search engine spiders are able to find a proper description and content of the site. (Visitors too should not have any difficulty in working frames.)

Optimizing frames for search engines – the solution

There are hundreds of little things that you might do in order to handle this situation. I have mentioned only a few solutions that would generally work in most situations.

Optimized title and meta tags

If you include your important keywords to the title and meta tags of the frameset, you will not only rank higher in the search engines, but the people seeing your site’s listing will have a better idea of your web site. Our suggestion is to optimize the title and meta tags of all the pages which are involved in the entire frameset.

<Noframes> tag

The purpose of this tag is to give the older browsers, which were incapable of displaying frames, a proper description of the web page. It also contains the text that search engine spiders will read when confronted with a frameset tag. This implies that if the browser can read frames, it will serve the frameset tag. Else, it will serve the <noframes> tag. It is advisable to include the entire real content into this <noframes> tag.

Fine tuning the <noframes> tag

Include links

You have put the entire content into the <noframes> tag, but if there are no links within the noframes area to pages within the site, the frames-incapable browsers will not be able to crawl through all the pages of the site. For this reason, you should place text links to all the inner pages of the web site inside this tag.

Position of the <noframes>

Place the <noframes> tag just after the first frameset tag, so that spiders find the text within the <noframes> tag earlier.

Optimising the <noframes> tag

As a very little percentage (nearly 1%) of the net surfers use the older browsers, which can not read frames, there will hardly be any real human visitor who will be able read the text within the <noframes> tag. So, you can use the text within the <noframes> tag to optimize for spiders, without fearing that some visitor might read it.

Opening pages outside the frame page

Whatever optimization work I have done with the framed structure has still got one major drawback. The search engine spiders have found all the individual pages and are able to index them. There are still some chances that the surfer might pull out individial pages from the browser. The page will be then be displayed along, without being inside the frameset. This can be a big problem.

Inexperienced net surfers will neither be able to visit other pages of the web site (as the navigation bar is not visible), nor will they be able to get back to the homepage. The result is that the surfer will use the browser’s back button and go to some other site.

Most web masters are usually unaware of this possibility while designing the web pages. Chance are that they may not have kept a link to the homepage at the bottom of all the pages.

However, this problem can be solved. The easy solution is to keep a text navigation bar at the bottom of every page.

[Home] [Page1] [Page 2] [Page 3]

The sophisticated solution is to include a simple javascript within each individual web page. This will take care of the problem.

Insert this javascript code just after the <noframes> tag. This script loads the frameset you specify. However, it has to be mentioned, this script disables the browser’s back button. Every time the back button is hit, this javascript is called again and again. (The solution to enable the back button is to hit it twice very quickly.) But when the visitors move to some other page within your site, the back button again starts working.

Bookmarking, emailing and linking to individual pages

In a framed site, only one thing has a definitive url, the original frameset, that is the homepage. It’s easy for users to bookmark, email or link to that url.

Now, assume that there is a link in the content frame to another file products.html. If you click on this link, the content frame will show the new file. But your browser will still be displaying the same frameset, so the overall url will not change.

It is a very difficult situation as there is no way to provide a url for this situation. If you give the url for the frameset, it always starts with content.html in the main frame, not products.html. If you give the url for products.html, that page will come out separately without the frameset. I need a url that will go to the homepage and then load products.html in the main frame.

But with a little command, you can have a different frameset for each possible combination of frames. Within the site, you could change all links to point to the appropriate frameset at the top level, by using the target_top command.

<a href=”products.html” TARGET = “_top”>Products</a>

In the content.html file, when you create a link for the products page, instead of writing <a href=products.html”>products</a>, write the above code. When you click on this link, you go to the products.html file. Here, there is a unique url for each page on the site. Surfers can now bookmark, email, or link to each page individually.