Optimizing Your Frames Site for Search Engines

In the last two articles, “Optimizing Your Flash Site for Search Engines,” and “Optimizing Your JavaScript Site for Search Engines,” we covered two specific types of web languages that make it difficult, if not impossible, for search engines to effectively crawl and index these types of websites. In this article, I’m going to cover another type of search engine unfriendly site: frames.

Because of the way frames pages are designed, search engine spiders have a very difficult time crawling these sites.  Frames use client-side code, or code that is executed by the browser on a visitor’s computer, instead of executed at the server.  While some search engines do okay with client-side code, for the most part, search engine spiders have a difficult time with it.  Most search engine spiders completely disregard client-side coding.  So if this code is required to view the proper format and layout of a page, then you can see why spiders may get “confused” with understanding a page that relies solely upon client-side code.  Frames are a good example of this.

Frames sites were huge in the late ‘90’s.  Frames made it easier for a webmaster to create a website from a template, or to change content of a website without having to alter navigation panes, while keeping every page within the exact design and layout of the site he or she intended.  Even with the popularity of frames, it took web browsers some time to be able to render frames sites.  Now, frames sites are being replaced by sites utilizing external style sheets with divisions to replace frames.  However, you will still encounter frames-based websites, even if they’ve lost popularity with the web design community as a whole.  CSS is still relatively a new idea to some, and others don’t want anything to do with it.  It’s these webmasters who may find the learning curve of CSS too steep to tackle, or simply like the way frames make it easier for them to maintain their websites.  Whatever the reason to use frames, they are slowly disappearing into obscurity.  However, until the day comes when frames-based sites are not a viable option for any website owners, SEOs must consider the possibility of having to optimize those sites from time to time.

Ideally, the best way to present your website to search engine spiders is to remove it from frames entirely, but if a site must absolutely remain in frames, there are a few things you can do to help a search engine access your site.


Figure 1

First, let’s look at the layout of a website designed in frames.  Frames websites are built using separate elements of the site into its own individual page.  So if you have a top banner pane and a left navigation pane, as show in Figure-1, then you’ll have four pages that technically have to be rendered in a browser:  the banner, the left navigation, the content, and the whole page with all the elements together, or the “frameset.”  In the below examples, we’ve named these elements: “UntitledFrame-2.htm,” which is the top frame; “UntitledFrame3.htm,” which is the left navigation frame; “Untitled-2.htm,” which is the content page (the main frame); and the frameset page is titled “UntitledFrameset-4.htm”.  I’ve left the basic frames pages untitled so you can see somewhat the order of how the pages are built.

Now let’s look at the code.  Below is an example of the code you’d find in the frameset page.  It basically tells the browser how to assemble all the pieces together.

<html>

<head>
<title>Homes for Sale, Sell Your Home with Homebody Realty</title>
</head>

<frameset rows=”20%,80%”>
  <frame name=”frameTop” src=” UntitledFrame-2.htm “>
  <frameset cols=”30%,70%”>
    <frame name=”frameLeft” src=” UntitledFrame-3.htm “>
    <frame name=”frameMain” src=” Untitled-2.htm “>
  </frameset>
</frameset>

</html>

Figure 2

Now while the page viewed in the browser will look like the picture in Figure-1, what the search engine actually sees is the code in Figure-3, just as if you were to view the source code of the page in your browser.


Figure 3

1.  No content

As you can see, there is no spiderable content here.  With no content on the master frameset page, there is no way for a search engine robot to determine what your site or page is about, or if it is relevant to any search queries.  So if content is King, then having no content is like being the unimportant stable boy, so to speak.  Having no spiderable content will keep you from being indexed in search engines.

2.  Navigation

Furthermore, since search engines do not understand the <frames> tag, there is no way for them to know how to navigate the frames, or that they should then visit the left navigation pane for any internal site links, the content frame, or anywhere else for that matter.  Chances are, a search engine spider will scan this source code, determine there is no content to be indexed, and then move on to the next page they can crawl, only to encounter the same issue.  If your whole site is in frames, you can probably see how this will present a problem with being indexed properly.  In a nutshell, if your site uses frames ineffectively, a search engine robot will encounter your frames page as a dead end with no content, and will not index it.

3.  Bookmarking

Using frames makes it impossible for a viewer to bookmark your individual site pages.  While this may simply seem like an inconvenience to the visitor, it actually also has an effect on your search engine marketing.  Many webmasters track bookmarked pages in their web stats, in order to find out which landing pages are effective and to improve their site by eliminating pages that are not effective.  You cannot discern individual page bookmarks with frames.  This will have a direct effect on efficient use of your web statistics in your marketing efforts.

4.  Backlinks

The same applies to linking to your pages.  If you provide pages to be used in your backlinks or as landing pages, you will either have to call out the exact content pages, which means you lose any benefits of using frames in the first place, or link only to your main site.  This could present a problem for your linking strategy, especially if you have many good landing pages.

5.  Meta Tags

Maybe you’re saying to yourself, “Fine, I’ll just make sure I write good title, description, and keyword tags to make sure the search engine knows what my site is about.”  While this sounds like a good idea at first, we should explore this misconception a little deeper.  When meta tags are scanned by those search engines that still use them (I might mention that Google does not), the problem you run into is that since there is no spiderable content in the master frameset source code. Meta tags that do not match content are very likely viewed as spam.  Thanks to many webmasters that abused the meta tags in the past, many search engines employ filters that compare keywords and descriptions to the page content, in order to remove the irrelevant spam pages, or completely disregard them altogether.

The abusers of meta tags have been known to list meta keywords and descriptions that have either very little to do with their content, in order to capture traffic from highly searched keywords to manipulate the SERPs, or have been guilty of keyword stuffing. “Keyword Stuffing” means loading up the meta tags with keywords, by repeating the same word over and over.  Since this abuse, the filters implemented by the search engines have been effective at not only weeding out the offending spammers, but frames sites with no content and the use of meta tags as well.

If you are using frames, you’re probably thinking, “Great.  My whole site is in frames; so now what?”  Besides the obvious fact of remodeling the site so as not to use frames, are you just out of luck?  Many of you developed your site in frames for a reason, and chances are you’d like to keep it that way.

Well, there are several things you can do to help a search engine robot determine the content of your pages, and what navigation links to follow.

1.  Content and the use of the <noframes> tag

When older browsers couldn’t render frames pages, back when frames sites were relatively new, what did webmasters do then?  They most likely used the <noframes> tag to alert people to update their browsers to be able to read frames, right?  Generally, sandwiched between the <noframes> tags was a line that read something like this: “Your browser doesn’t support frames, which is why you’re seeing this message…” as show in the source code of the frameset, like the example in Figure-4.


Figure 4

Either people updated their browser to one that could read frames, or those people moved on to non-frames sites.  But surely those webmasters came up with a way to keep those folks in their website, even if their browsers couldn’t render frames?  You bet they did.

We don’t have this problem today, as 99% of browsers can render frames sites well.  I believe the original purpose of the <noframes> tag has almost been lost.  You didn’t want people to have to leave your website in search of a more browser-friendly site.  So you had to have content for the non-frames visitor to see.

In SEO, we have to treat search engine spiders like people who can’t or won’t update their browsers.  Since you don’t want them to move on to another site, you will have to properly use the <noframes> tag.  Alerting people to get a new version of their browser was not the original reason the <noframes> tag existed.  By leaving the “This site must be viewed with a frames-capable browser” line in there, the only content the spider would have to index your site is exactly “This site must be viewed with a frames-capable browser,” which is not really what you want.


Figure 5

What you need to do is put your discernable content in between your <noframes> tags, like the example of the source code shown in Figure-5.  By placing your important content in between your <noframes> tags, you provide the search engines with spider food and a true description to spiders what your site is about.

2.  Navigation and the <noframes> tag

This is still not enough, however.  What about your navigation?  Unless you only have one page in your website, you will need to enable the search engine spider to follow your internal links to other pages.

The solution may be coming clear to you now, or it may not be.  Simply duplicate the links in your navigation frame, and insert into your <noframes> section, as shown in the source code of Figure-6.


Figure 6


Figure 7

3.  Positioning of the <noframes> tag

Where you place your content in any web page is important to search engines, whether using frames, plain HTML, or even Flash.  When you use the <noframes> tags, it is important to place your content and navigation at the top of your code.  The example in Figure-6 shows these at the bottom, but the example in Figure-8 demonstrates the proper content and navigation positioning for a frameset.


Figure 8

Unfortunately, the way that your site will be indexed using these methods will only show individual content pages in the SERPs, and not the framesets.  So when a search query is made in a search engine, and your pages are indexed, the searcher will only be seeing the content page, and not the entire framed page, as one would have designed it.  You could use JavaScript to force the indexed page to be loaded into frames; however, be sure to refer to the previous article, “Optimizing a JavaScript Site for Search Engine,” for tips on using JavaScript in your pages and its relation to SEO.

There is no real solution to being able to link to landing pages using frames.  If a link from the navigation pane is clicked, and a new content page loaded into the frameset, the URL shown is still the same as the home page.  You will simply have to either concentrate on linking to your main site’s URL, or link back to individual pages, like our “Untitled-2.htm”, which will not load in the frames.  Either choice is not an ideal one, however.

When possible, choose to develop your website in search engine friendly formats like HTML, instead of with client-side coding, as with frames.  This is always the best SEO option.  However, when this cannot be done, for whatever reason you may have for keeping your frames site alive, be sure to make good use of that <noframes> tag.  It will make the difference between bringing you qualified search engine traffic, and being indexed at all.

Google+ Comments

Google+ Comments