Any decent SEO is certainly aware of the CSS float technique to manipulate how a search engine spider caches your site. The idea behind this trick is that if the main content of any page is cached before less important, less relevant content, it will slightly improve your keyword rankings. This SEO technique never really made enough difference for me to get excited about it (maybe that’s just the link builder in me talking), but below is an example of how it works.
Floating Divs for SEO
<html>
<head>
<style>
#container {width:400;}
#right {width:200;float:right;}
#left {width:200;float:left;}
</style>
</head>
<body>
<div id="container">
<div id="right">
Content we want to highlight
</div>
<div id="left">
Content we want to bury
</div>
</div>
</body>
</html>
JavaScript Templating
However I recently came across a few javascripts for including files on the client side instead of the traditional server side with php, asp, python etc. Of course I was familiar with the innerHtml function, but never considered the value of using a JavaScript templating system to prevent undesirable portions of a website from being indexed. This little script (4 lines of code) could, in theory, be an additional site sculpting tool to limit spider-ability much in the same way as the “nofollow” tag is used to sculpt PageRank.
How it Works
jQuery does the bulk of the heavy lifting and we will borrow Levi Senft’s jsinclude script (or write your own). Like most JavaScripts, it must be called onload, grabs the file name and path for the file to be included. The content specified between the elements tags is then appended to the dom element in question. the jsinclude file appends to any div with the class of “jsinclude”, but in practice you could set that to whatever naming convention you want. The content is displayed slightly after the original page is cached by the spider, letting us “cloak” our content without fear of reprisal from Google. We will show the exact same content to a normal visitor and a spider, we will just use the spiders shoddy JavaScript support and inherent need to cache pages quickly against it.
How To Implement
First off the bat we need to download a fresh version of jQuery, and add it to the HEAD section of your page’s html, making sure the path points properly.
<head>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
</head>
Then we want to call the jsinclude file right after our analytics urchin and before the end closing tag.
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-583901-5");
pageTracker._trackPageview();
</script>
<script type="text/javascript">
function jsinclude_init() {
$('div.jsinclude').each(
function () {
$('#'+this.id).load(this.innerHTML);
}
);
}
</script>
</body>
Now to apply the proper style to the divs we want to hide, and list the path of the file to include:
<div id="nocache" class="jsinclude">/path/to/file.html</div>
That’s it. The downside is you have to physically wrap the html-php-etc you want to include in a div, but other than that you now have a JavaScript templating engine that works even on web hosting that doesn’t support php.
November 21st, 2008 at 1:06 pm
I was under the impression that Google looked at CSS now as “part” of the site and that the old days of hiding stuff under js were over? Furthermore, I thought that there is an actual analysis of js / divs in the Google algo to determine if anything deceptive is happening. If so, no more SERP…. No?
November 23rd, 2008 at 11:49 pm
First off I wouldn’t believe everything you hear from Google but yes, word is css & html are now parsed to some degree. The old days you are referring to though mainly dealt with hidden divs and negative margins. It’s easy to run a test though on javascript and see for yourself if hidden (on dom load) content is cached, and of course it isn’t. As for the algo checking, I think Google is much more concerned with cloaked content as opposed to actual visible content that is load-deferred but then that’s just my opinion.
November 26th, 2008 at 2:58 pm
Thanks. I think I understand and largely agree with you. I was actually watching an old Matt Cutts interview this morning on YouTube where he was talking about flash sites where the web master (with good intentions) was using a cloaked part of the code to present at least something to Google because the flash stuff could not be read. On the one hand Matt was saying “these people didn’t mean anything bad by this, it was fairly innocent and we [Google] are trying not to figure this out from the people using these techniques to manipulate us.” (not a direct quote, but close)…
Anyway - Thanks.