Optimizing Frames for Search Engines

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 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.



SuperWidget XYZ from XYZ< itle><br> </head><br> <frameset cols="30%,70%"><br> <frame src="navbar.html" frame="left"><br> <frame src="page1.html" frame="right"><br> </frameset><br> </html><br>Figure 1--index.html: the "framing" page<br><br>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:<br><br> <html><br> <head><br> <title>Navbar< itle><br> </head><br> <body><br> <a href="page1.html" frame="right">Page 1</a><br> <a href="page2.html" frame="right">Page 2</a><br> <a href="page3.html" frame="right">Page 3</a><br> </body><br> </html><br>Figure 2--navbar.html<br><br> <html><br> <head><br> <title>Page 1< itle><br> </head><br> <body><br> Welcome to XYZ, home of the new and improved SuperWidget XYZ. We <br> have the best widgets available anywhere today, and at half the price <br> of most leading widgets!<br> </body><br> </html><br>Figure 3--page1.html<br><br>What if you can't do frames?<br>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.<br><br>The <NOFRAMES> section<br><br>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:<br><br> <html><br> <head><br> <title>SuperWidget XYZ from XYZ< itle><br> </head><br> <frameset cols="30%,70%"><br> <frame src="navbar.html" frame="left"><br> <frame src="page1.html" frame="right"><br> </frameset><br> <noframes><br> This web site must be viewed using a frames-capable web browser. Your<br> web browser, however, is not capable of displaying frames.<br> </noframes><br> </html><br>Figure 4--index.html with added <NOFRAMES> section<br><br>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:<br><br> This web site must be viewed using a frames-capable web browser. Your<br> web browser, however, is not capable of displaying frames.<br>Figure 5--search engine listing with poor <NOFRAMES> text<br><br>Text in <NOFRAMES> section<br>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.<br><br> <html><br> <head><br> <title>SuperWidget XYZ from XYZ< itle><br> </head><br> <frameset cols="30%,70%"><br> <frame src="navbar.html" frame="left"><br> <frame src="page1.html" frame="right"><br> </frameset><br> <noframes><br> Welcome to XYZ, home of the new and improved SuperWidget XYZ. We <br> have the best widgets available anywhere today, and at half the price <br> of most leading widgets!<br> </noframes><br> </html><br>Figure 6--index.html with better <NOFRAMES> text<br><br>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:<br><br> Welcome to XYZ, home of the new and improved SuperWidget XYZ. We <br> have the best widgets available anywhere today, and at half the price <br> of most leading widgets!<br>Figure 7--search engine listing with better <NOFRAMES> text<br><br>Unfortunately, this is still not enough.<br><br>Navigation in <NOFRAMES> section<br>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:<br><br> <html><br> <head><br> <title>SuperWidget XYZ from XYZ< itle><br> </head><br> <frameset cols="30%,70%"><br> <frame src="navbar.html" frame="left"><br> <frame src="page1.html" frame="right"><br> </frameset><br> <noframes><br> Welcome to XYZ, home of the new and improved SuperWidget XYZ. We <br> have the best widgets available anywhere today, and at half the price <br> of most leading widgets!<br><br> <a href="page1.html" frame="right">Page 1</a><br> <a href="page2.html" frame="right">Page 2</a><br> <a href="page3.html" frame="right">Page 3</a><br><br> </noframes><br> </html><br>Figure 8--index.html with added hyperlinks<br><br>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.<br><br>Why is site framed?<br><br>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! <br><br>Loading page into frames<br><br>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.<br><br>Individual pages<br><br>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:<br><br> <script><br> <!--<br> function frameMe(){<br> var frameset = "frameset.html"; //name of the frameset page<br> var frame = "right"; //name of the frame to load document into<br> page = new String(self.document.location);<br> var pos = page.lastIndexOf("/") + 1;<br> var file = page.substr(pos);<br> if(window.name != frame){<br> var s = frameset + "?" + file + "&" + frame;<br> top.location.replace(s);<br> }<br> return;<br> }<br> frameMe();<br> //--><br> </script><br>Figure 9--JavaScript for individual pages<br><br>You will replace some of the parameters here with names more appropriate to your situation:<br><br>replace "frameset.html" with the name of the page on your site that has the <FRAMESET> tags in it <br>replace "right" with the name of the frame on the frameset page into which you want to load the current page <br>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.<br><br><html><br><head><br> <title>SuperWidget from XYZ< itle><br> <meta content="description" value="SuperWidget and all other widgets at half price from XYZ"><br> <meta content="keywords" value="SuperWidget XYZ best widgets half price widgets"><br> <script><br> <!--<br> function frameMe(){<br> var frameset = "frameset.html"; //name of the frameset page<br> var frame = "right"; //name of the frame to load document into<br> page = new String(self.document.location);<br> var pos = page.lastIndexOf("/") + 1;<br> var file = page.substr(pos);<br> if(window.name != frame){<br> var s = frameset + "?" + file + "&" + frame;<br> top.location.replace(s);<br> }<br> return;<br> }<br> frameMe();<br> //--><br> </script><br></head><br><body><br> Page 1 <br> This is Page 1 of the XYZ site, home of the new and improved SuperWidget <br> XYZ. We have the best widgets available anywhere today, and at half the <br> price of most leading widgets!<br></body><br></html><br>Figure 10--individual page with JavaScript added<br><br>The "framing" page<br><br>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:<br><br> <script><br> <!--<br> function loadDoc(){<br> var a = location.search.split('&');<br> var page = a[0].substr(1);<br> var frame = a[1];<br> if(page && frame){<br> var s = "top." + frame + ".location.replace('" + page + "')";<br> eval(s);<br> }<br> return;<br> }<br> //--><br> </script> <br>Figure 11--JavaScript for "framing" page<br><br>There are no substitutions in this code. Place it exactly as shown.<br><br>The other piece of code that must be placed is an "onLoad" event handler, that is placed in the <FRAMESET> tag, like this:<br><br> <frameset cols="20%,80%" onLoad="loadDoc()"><br>Figure 12--onLoad code for "framing" page<br><br>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:<br><br> <html><br> <head><br> <title>SuperWidget XYZ from XYZ< itle><br> <script><br> <!--<br> function loadDoc(){<br> var a = location.search.split('&');<br> var page = a[0].substr(1);<br> var frame = a[1];<br> if(page && frame){<br> var s = "top." + frame + ".location.replace('" + page + "')";<br> eval(s);<br> }<br> return;<br> }<br> //--><br> </script> <br> </head><br> <frameset cols="20%,80%" onLoad="loadDoc()"><br> <frame src="navbar.html" name="left"><br> <frame src="page1.html" name="right"><br> </frameset><br> <noframes><br> Welcome to XYZ, home of the new and improved SuperWidget XYZ. We <br> have the best widgets available anywhere today, and at half the price <br> of most leading widgets!<br><br> <a href="page1.html">Page 1</a><br><br> <a href="page2.html">Page 2</a><br><br> <a href="page3.html">Page 3</a><br> </noframes><br> </html><br>Figure 13--all components placed in "framing" page<br><br>Completion<br><br>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.<br><br><br><p> About the Author <p>Dale Goetsch is the Technical Consultant for Search Innovation (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 adept at technical writing and editing.<br> </div></td> </tr> </table> <p align="center">More Web Development and other resouces to help you locate great articles just like Optimizing Frames for Search Engines :</p> <table width="700" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="200"> Here are other categories to find more must know information on anything and everything.<br /> <a href="http://infopom.net/autoandtrucks.html">Auto and Trucks</a><br> <a href="http://infopom.net/businessandfinance.html">Business and Finance</a><br> <a href="http://infopom.net/computersandtheinternet.html">Computers and Internet</a><br> <a href="http://infopom.net/education.html">Education</a><br> <a href="http://infopom.net/environment.html">Environment</a><br> <a href="http://infopom.net/family.html">Family</a><br> <a href="http://infopom.net/foodanddrink.html">Food and Drink</a><br> <a href="http://infopom.net/gadgetsandgizmos.html">Gadgets and Gizmos</a><br> <a href="http://infopom.net/gardening.html">Gardening</a><br> <a href="http://infopom.net/government.html">Government</a><br> <a href="http://infopom.net/health.html">Health</a><br> <a href="http://infopom.net/hobbies.html">Hobbies</a><br> <a href="http://infopom.net/homeimprovement.html">Home Improvement</a><br> <a href="http://infopom.net/kidsandteens.html">Kids and Teens</a><br> <a href="http://infopom.net/legalmatters.html">Legal Matters</a><br> <a href="http://infopom.net/marketing.html">Marketing</a><br> <a href="http://infopom.net/musicandentertainment.html">Music and Entertainment</a><br> <a href="http://infopom.net/onlinebusiness.html">Online Business</a><br> <a href="http://infopom.net/parenting.html">Parenting</a><br> <a href="http://infopom.net/petsandanimals.html">Pets and Animals</a><br> <a href="http://infopom.net/recreationandsports.html">Recreation and Sports</a><br> <a href="http://infopom.net/selfimprovementandmotivation.html">Self Improvemen</a><br> <a href="http://infopom.net/sitepromotion.html">Site Promotion</a><br> <a href="http://infopom.net/travelandleisure.html">Travel and Leisure</a><br> <a href="http://infopom.net/webdevelopment.html">Web Development</a><br> <a href="http://infopom.net/women.html">Women</a><br> <a href="http://infopom.net/writing.html">Writing</a><br> </td> <td> Here are more Web Development articles to give you more must know information just like in Optimizing Frames for Search Engines article. <br /> <p><a href="/info/212411Howto34GoTo34theTopoftheMajorSearchEngines.htm" target="_blank"> How to "GoTo" the Top of the Major Search Engines </a><br> When it comes to pay per click search engines, GoTo.com is the clear<br>leader. Over the years, GoTo has established relationships with many<br>of the top search engines and directories, including Dogpile,<br>Netscape, Hotbot, MSN, Compuserve, NBCI, Ameri... <br> <span class="class4"><a href="/info/212411Howto34GoTo34theTopoftheMajorSearchEngines.htm" target="_blank">Read more</a></span><br> <hr> <p><a href="/info/215304Tooltippopups63Use34title34inyourTags.htm" target="_blank"> Tool-tip pop-ups? Use "title=" in your Tags </a><br> If you've created web pages, you've probably used the ALT as<br>part of your IMG tag. When your visitor puts their cursor<br>over the image, a pop-up "tool-tip" gives them essential<br>information.<br><br>You can get exactly the same effect on other w... <br> <span class="class4"><a href="/info/215304Tooltippopups63Use34title34inyourTags.htm" target="_blank">Read more</a></span><br> <hr> <p><a href="/info/198886ShouldyouPurchaseaTurnkeySiteorBuildYourOwn.htm" target="_blank"> Should you Purchase a Turnkey Site or Build Your Own? </a><br> You see them all the time, pre-packaged websites selling everything from acorns to zinc. Most of them have a nice professional look about them, with good pictures and graphics. Of course, the sales l... <br> <span class="class4"><a href="/info/198886ShouldyouPurchaseaTurnkeySiteorBuildYourOwn.htm" target="_blank">Read more</a></span><br> <hr> <p><a href="/info/212211SearchEnginesOptimization.htm" target="_blank"> Search Engines & Optimization </a><br> Search engines, search engines, search engines....Who knows which one to optimize for? Why does everyone behave so silly when it comes to search engines and optimization for a particular engine or keyword even? As most know, Google is the flavour of the m... <br> <span class="class4"><a href="/info/212211SearchEnginesOptimization.htm" target="_blank">Read more</a></span><br> <hr> <p><a href="/info/212207OptimizeAtDesignStages.htm" target="_blank"> Optimize At Design Stages </a><br> Are you now thinking, what does this mean? Let me just say that most of my customers could have had their websites rectified whilst still in the design stage instead of costly repairs once finished. This does not only go for those who pay, but more than e... <br> <span class="class4"><a href="/info/212207OptimizeAtDesignStages.htm" target="_blank">Read more</a></span><br> <hr> </td> </tr> </table> <p> </p> <div align="center"></div> <div align="center"> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center">Thank you very much for viewing this must know article:<strong><em> Optimizing Frames for Search Engines </em></strong>. Hopefully you have found all the information you were looking for in "<strong><em> Optimizing Frames for Search Engines </em></strong>". If you feel like you need more information feel free to check out <a href="http://infopom.net">Info Pom HOMEPAGE</a> to look for more articles in our humangous database</div></td> </tr> </table> <br /> <div align="center">Site Partners:<br> <a href="http://www.backgroundcheck-resources.com/" target="_blank">Background Check</a><br> </div> <p> <br /> </p> </div> </body> </html>