How to use Frames for SEO // SEOjr.com

How to use Frames for SEO

←

→

Feb 8th, 2008 | Category: SEO Optimization

Share |

Here’s tutorial on how you can use frames on your website for search engine optimization benefits when you need to hide something from Search engines but you still want your visitors to see it.

Never thought that I could use frames on a webpage as an SEO tactic. I probably would have never even tried it but my recent project has shown me that it is not just possible but it is a good option in certain situations. I had one of those exceptional situations recently so I decided to share.

Most SEO’s will agree that using frames is not a SEO friendly option for your site since Search engine Crawlers will have trouble getting through to the content in the file that is being included by frame script. In my case, there was no real content in the included file, I just wanted to add fancy table that will have links to my landing pages (categorized sale pages) on top of the home page so visitors would have easy and immediate access to them as they arrived to my site, so in this case that worked to my advantage. You see I have the same links in my footer and within the content so using frame I eliminated “extra” links on the page (for search engines) and added sort of quick links for my visitors.

Below the frame script it’s the “real” content, “search engine food” that is readable and indexable by robots. When spider comes to my page it will skip the frame and go directly to the important stuff – content.

Another place I realized I could use frames to my advantage is blocks of affiliate banners and links, like in a sidebar for example, since I already use “nofollow” tags on my affiliate links I thought why not just make it invisible to engines completely. I did a little test on one of my sites in the sidebar and just looking at the source I think it will be better because it has reduced the amount of “script” in the page’s code itself. I wanted visitors to see affiliate banners and links before other stuff (like recent posts, categories,…) but at the same time search engines will see it the same way so by putting affiliate banners and links into frame I have solved that issue.

Here’s another example: Let’s say you have this cool logo you worked on for hours and want to display it at the top of your pages with affiliate banner next to it but that image and affiliate link will end up in front of all the important header tags and content. You could use frame to display image and the link and that way the first thing robot will see is h1 tag and content below (if you have setup your page with h1 tag), skipping all the fancy stuff that search engines don’t really care about.

You see the easier and simpler we make for search engine to read our pages, the better off we’ll be. If the crawler has to go through a lot of script and links to get to the content than it might not index your page completely and correctly and that is something we don’t want.

Here are the steps to do this.

1. Create an html file with what ever you want to display (affiliate banners, links,etc.) , here’s an example of my topnav.html file that displays my top links, header image and the banner (note: I had to comment out the code so it doesn’t show up in the post):

<!– (example code begin – comment out copy everything below)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”LINK TO YOUR CSS STYLESHEET“>
</head>
<body>
<div class=”navigation”>
<ul>
<li> <a href=”http://seojr.com/” target=”_parent”>Home</a> </li>
<li> <a href=”http://seojr.com/archives/” target=”_parent”>Archives</a></li>
<li> <a href=”http://seojr.com/free-seo-and-keyword-tools/” target=”_parent”>SEO Tools</a> </li>
<li> <a href=”http://seojr.com/seo-forums/” target=”_parent”>SEO Forums</a> </li>
<li> <a href=”http://seojr-jobs.jobamatic.com/” target=”_parent”>JOB Board</a> </li>
<li> <a href=”http://seojr.com/downloads/” target=”_parent”>Downloads</a> </li>
<li> <a href=”http://seojr.com/seojrcom-sitemap/” target=”_parent”>SiteMap</a> </li>
<li> <a href=”http://seojr.com/link-with-us/” target=”_parent”>Link With Us</a> </li>
<li> <a href=”http://seojr.com/contact/” target=”_parent”>Contact</a> </li>

</ul>

</div>
<div id=”header”>
<div id=”logo”><a href=”http://seojr.com/” target=”_parent”></a></div>
<div id=”logo_ad”>
<a href=”http://www.seobook.com” target=”_blank” rel=”nofollow”><img border=”0″ src=”http://www.seobook.com/rf/banners/468-60.gif” width=”468″ height=”60″></a>

</div>
</div>

</body>
</html>

(example code end – comment out copy everything above)–>

Replace urls with your own or add whatever you want in it and upload the file to your server. Now you need to put the frame code on your website where you want your html file to be displayed.

Here’s an example of iframe script code (note: I had to comment out the code so it doesn’t show up in the post):

<!– (example code begin – comment out copy everything below)

(example code end – comment out copy everything above)—>

IMPORTANT NOTES: You need to set the height and width of frame to be displayed. If you are only including affiliate banner and you know it is 468×60 that set frame width and height to 468×60. Play with those numbers to get the result you want.

Also it is very important to use either target=”_blank” (open in new window) or target=”_parent” (open in same window) in every link or they will open inside the frame and if your frame is only 125px tall (like in my example) than users won’t see much of the page they clicked to go to.

I hope this article will help you if you find yourself in similar situation where you want visitors to see something but not search engines. If you have any questions about using frames or want to share another way of using frames for SEO, feel free to leave a comment below.

←

→