Dynamic Link Insertion via Unobtrusive External JavaScript

[ Dynamic Flow ] In my recent guest post at The Nexus, I discuss Google’s new nofollow policy and suggest several ways to deal with it. In that article, I explain how Google allegedly has changed the way it deals with nofollow links. Instead of transferring leftover nofollow juice to remaining dofollow links as they always have, Google now pours all that wonderful nofollow juice right down the drain. This shift in policy comes as a terrible surprise to many webmasters and SEO gurus, especially those who have invested vast amounts of time, effort and money engaging in supposedly lucrative PR-sculpting pursuits.

Dealing with it..

Of course, this new policy leaves many of us wondering how to deal with Google’s new policy. If (and it remains a big “if” until Google clarifies their position) — if nofollow link equity simply vanishes into the ether, the repercussions may be significant.

For example, webmasters who now rely on nofollow to salvage link juice otherwise leaked through lengthy comment threads will need to devise another strategy or suffer an inevitable loss of valuable PageRank. There are many good strategies available, including everything from long-term reorganization of site structure to short-term fixes involving much-despised tricks such as iframes and JavaScript links. Personally, I wouldn’t touch iframes with a ten-foot pole, but in the case of an emergency, I certainly would take a look at using external JavaScript to get the job done.

Unobtrusive JavaScript to the rescue

As far as I know, Google is well-equipped to read inline JavaScript links such as the following:

<a href="javascript:void(0)" 
   onclick="window.open('http://domain.tld/')">SEO Link</a>

<div onclick="document.location.href='http://domain.tld/'">SEO Link</div>

<p onclick="insertLink('http://domain.tld/')">
	<a href="#" onclick="insertLink()">SEO Link</a>

Using these sorts of inline JavaScript methods is considered “dangerous” from several perspectives, including those concerned with SEO, usability, and accessibility. Even so, if Google can read these types of links, then they really don’t help with alleviating disrupted on-page rank-sculpting strategies. When it comes to using JavaScript to insert dynamic page content, the solution is to externalize a function that will insert the desired content from outside of the web document. Let’s take a look at how to do this in unobtrusive fashion.

Step 1: Markup

This step involves selecting a place in your web page where you would like the links to appear. This could be anywhere you wish, but for this example we’ll place a list of links in the sidebar area. Here is the required markup:

<div id="external"></div>

Ideally, this will be a preexisting division that contains some sort of content and thus serves some sort of legitimate purpose, but the universe won’t explode if you decide to simply use an empty <div> placed in a convenient location. Whatever the case, once you have the properly identified division in place, it’s time to create the JavaScript.

Step 2: JavaScript

Here we apply some basic (but effective) JavaScript via the innerHTML function. Sure, not everybody loves ‘ol innerHTML, but it’s fast, easy and widely supported. Place the following code into a file named “external.js”:

function SEOLinks() {
	var links = '<ul>';
	links += '<li><a href="http://domain.tld/1.html">Nofollow Link 1</a></li>';
	links += '<li><a href="http://domain.tld/2.html">Nofollow Link 2</a></li>';
	links += '<li><a href="http://domain.tld/3.html">Nofollow Link 3</a></li>';
	links += '</ul>';
	document.getElementById("external").innerHTML = links;
window.onload = SEOLinks;

Upon execution, this script will insert the following markup into the division applied in Step 1:

<div id="external">
		<li><a href="http://domain.tld/1.html">Nofollow Link 1</a></li>
		<li><a href="http://domain.tld/2.html">Nofollow Link 2</a></li>
		<li><a href="http://domain.tld/3.html">Nofollow Link 3</a></li>

Simple eh? And the cool thing about using this technique is that the markup is easily customizable. You can add attributes, more list items, and just about anything else you can imagine. Before it will work, however, we need to link to the external.js file from the same web page that contains the division from Step 1.

Step 3: Connect the dots

Last but certainly not least, we need to call the function to the page by linking to it in the document <head> or, even better, at the end of the page. Edit the URL/path in the following code and place after the closing </body> element in your web page:

<script src="http://domain.tld/path/to/external.js" type="text/javascript"></script>

And that’s all there is to it, really. Once everything is in place, you should see a dynamically produced list of SEO-friendly links. At the present time (and for the foreseeable future), links inserted via external JavaScript are completely invisible to Google, Yahoo!, and even MSN/Live/Bing/Whatever-it’s-called-now (how many names do they need!). And, as Google can’t “see” these unobtrusive links, they will not detract from the overall amount of PageRank otherwise attributed to the page. Granted, this solution is far from ideal (please read forthcoming disclaimer), but if you aren’t too crazy about flushing your valuable rank juice down the toilet, it will certainly get the job done.

Wrapping up + Obligatory Disclaimer

So that’s a wrap. Hopefully it will help anyone looking for a good explanation of how to dynamically insert links via unobtrusive, external JavaScript. I’ve used this method before, and it seems to work pretty good. That said, here is my list of obligatory disclaimers for this article:

  • I neither encourage nor discourage use of this technique. It is provided for informational purposes only. You get to make your own decisions.
  • In general, using JavaScript to generate content is a bad idea. Many browsing devices do not have JavaScript or else have it disabled.
  • Content generated via external JavaScript may not be visible to Google et al at this time, but this may change in the future.
  • I am no JavaScript guru. If you know of ways to improve this technique, please share your knowledge with us in the comments area.