Dynamic Link Insertion via Unobtrusive External JavaScript

♦ Posted by Jeff Starr in JavaScript, SEO

Updated November 2, 2022 • 9 comments

[ 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>
</p>

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">
	<ul>
		<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>
	</ul>
</div>

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.

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

9 responses to “Dynamic Link Insertion via Unobtrusive External JavaScript”

Stephen Cronin 2009/06/14 5:03 pm

Hi Jeff,

I know you’ve added disclaimers above that you neither encourage nor discourage use of this technique, but I’ll jump in and actively discourage it: Don’t do it!. This is a very bad idea for anything but non-critical links.

With pagerank sculpting, people often nofollow links to the contact form, the login link, privacy statements, etc. While from an SEO standpoint you may not want to waste PageRank on these pages, from a usability / accessibility standpoint, you NEED to have these pages accessible to ALL your visitors, not just those who have JavaScript enabled. Using the above technique would mean that some people could not access these pages.

In my day job, I run the web team of a state government department (in Australia), so I’m very aware of Accessibility issues – if our site isn’t accessible to everyone, including those who can’t access it via a normal web browser, we get sued.

Now, smaller websites are probably unlikely to be sued by disability groups, but really everyone should attempt to make their site accessible to everyone. Of course, I haven’t even mentioned that some mobile phones won’t show these links, which may be an even bigger spur to not use this method.

The small benefit you may get via PageRank (which isn’t that important anymore anyway), doesn’t outweigh the negatives…

ramba 2009/06/14 6:28 pm

good idea, but i wonder to know is there any security risk if we use external js as nofollow replacement?

H5N1 2009/06/15 2:12 pm

You can see how this technique is just applied in my site: H5N1.altervista.org (only in italian language) with a few additional techniques (sorry, the site was never updated since long time….)

You can see on the top (in the header) two radio buttons giving the user the power to decide if the external links will be opened in the same window or in another. I marked effectively the external link with the rel attribute “external”.

Note: edited link for accuracy

Trav 2009/06/15 2:30 pm

Hey Jeff –

It’s been a while since I stopped by- the site is not as ‘trippy’ as it once was ; )

With regard to this discussion, and to Stephen’s point above, couldn’t one just add the standard anchor markup for the desired links to the <noscript> tag associated with your JS? then you would get the desired effect for functioning JS, and a graceful fail-thru for non-JS browsers.

A bit more work, granted, but maybe worth it if one’s going to all of that trouble anyway.

Thanks for the topic….

Trav

H5N1 2009/06/15 4:45 pm

There’s no need to provide a noscript alternative: browsers without javascript just follow the links and so it’s enough to provide a valid link (with full informations) in the href attribute.

Jeff Starr 2009/06/15 6:05 pm • Post Author

@Stephen Cronin: Thanks for presenting that side of the argument. Although I tend to agree, I think it’s important for accurate information to exist on all topics, no matter how heinous or undesirable.

@ramba: As far as I know, use of external JavaScript is standard practice in the industry and presents no security risk in and of itself. The methods in this article are safe as well, but there may be other scripts that could post a security risk to your site.

@H5N1: Cool, thanks for giving us an example to check out (I was too lazy). May I ask what additional techniques are in play with that set of links? Btw, very nice feature for allowing users to select their link-opening preferences :) (also, I edited your link!)

@Trav: Great to hear from you – thanks for dropping by with a comment. :) As for supporting non-JS browsers by adding the links in a noscript tag, I think it would defeat the whole point of the exercise because of the fact that Google is quite capable of reading noscript content (and any content on the page for that matter). It’s a good idea though, and something to think about as we find workarounds for the apparently defunct nofollow attributes.

And yes, I changed the site’s default theme about a month or so ago. I still may return to the “trippy” Quintessential theme, but I am really liking everything about this new one for the time being.

H5N1 2009/06/16 1:28 am

I try to explain in plain english :)
Once you have set a traditional (and working) href attribute to an A element you can just play with javascript and DOM to make it behave as you want.
This can be done by changing the “onclick” event (be careful: the event has to return false to avoid the link to be followed) and whatever you want.
It’s easily done by checking the DOM with a custom getElementsByClassName (you can find a lot of examples on the web) or with different framework (jQuery, scriptacoulous, prototype, moootools etc…) but I prefer to write my owns. :)

In my case I use valid links (in the case in which javascript is disabled I manage the links via PHP) so that Google and other bots can easily index the target links.
In this way you have not to provide any <noscript> alternative.

The XHTML standard was born primarily to separate presentational from semantic contents (did you know?) and, in fact, is called “modular”.

I like to keep my code clear (no inline events or style or any other presentational content) and use CSS and Unobtrusive Javascript to provide additional features.
After that you can disable javascript and test how it works and use PHP to manage what was done by javascript.

An example: I use Ajax to load pages, but with a simple include() function I manage the searchstring and serve the right pages in the case javascript is not enabled.

An additional feature is the one letting the user to choice if the external links will be opened in the same window or in another.
This has been done because one of the principle of the usability and accessibility is that this kind of choice is up to the user, not to the developers. :)

I hope to have been clear and sinthetical :D

H5N1 2009/06/16 9:05 am

Just a litte off-topic note: I offer myself for translating your PDF-book in italian :)
Obviously for free.

Jeff Starr 2009/06/17 8:22 am • Post Author

Absolutely educational, H5N1 – thank you for taking the time to explain the process. Manipulating the href attributes of targeted anchor elements via the DOM is an excellent idea, and one that I should have considered before writing this article. In the hypothetical case of “hiding” the links from Google, what do you recommend using as the PHP-generated alternatives (i.e., the original, unmodified links)? I suppose they could be anything, but you certainly wouldn’t want to use the same URLs inserted by the JavaScript (otherwise it would defeat the purpose, it seems). In any case, lots of great info there to think about — thanks again for sharing your techniques! :)

And I may take you up on that free translation offer! ;)

Comments are closed for this post. Something to add? Let me know.

Stephen Cronin 2009/06/14 5:03 pm

Hi Jeff,

I know you’ve added disclaimers above that you neither encourage nor discourage use of this technique, but I’ll jump in and actively discourage it: Don’t do it!. This is a very bad idea for anything but non-critical links.

With pagerank sculpting, people often nofollow links to the contact form, the login link, privacy statements, etc. While from an SEO standpoint you may not want to waste PageRank on these pages, from a usability / accessibility standpoint, you NEED to have these pages accessible to ALL your visitors, not just those who have JavaScript enabled. Using the above technique would mean that some people could not access these pages.

In my day job, I run the web team of a state government department (in Australia), so I’m very aware of Accessibility issues – if our site isn’t accessible to everyone, including those who can’t access it via a normal web browser, we get sued.

Now, smaller websites are probably unlikely to be sued by disability groups, but really everyone should attempt to make their site accessible to everyone. Of course, I haven’t even mentioned that some mobile phones won’t show these links, which may be an even bigger spur to not use this method.

The small benefit you may get via PageRank (which isn’t that important anymore anyway), doesn’t outweigh the negatives…
ramba 2009/06/14 6:28 pm

good idea, but i wonder to know is there any security risk if we use external js as nofollow replacement?
H5N1 2009/06/15 2:12 pm

You can see how this technique is just applied in my site: H5N1.altervista.org (only in italian language) with a few additional techniques (sorry, the site was never updated since long time….)

You can see on the top (in the header) two radio buttons giving the user the power to decide if the external links will be opened in the same window or in another. I marked effectively the external link with the rel attribute “external”.

Note: edited link for accuracy
Trav 2009/06/15 2:30 pm

Hey Jeff –

It’s been a while since I stopped by- the site is not as ‘trippy’ as it once was ; )

With regard to this discussion, and to Stephen’s point above, couldn’t one just add the standard anchor markup for the desired links to the <noscript> tag associated with your JS? then you would get the desired effect for functioning JS, and a graceful fail-thru for non-JS browsers.

A bit more work, granted, but maybe worth it if one’s going to all of that trouble anyway.

Thanks for the topic….

Trav
H5N1 2009/06/15 4:45 pm

There’s no need to provide a noscript alternative: browsers without javascript just follow the links and so it’s enough to provide a valid link (with full informations) in the href attribute.
Jeff Starr 2009/06/15 6:05 pm • Post Author

@Stephen Cronin: Thanks for presenting that side of the argument. Although I tend to agree, I think it’s important for accurate information to exist on all topics, no matter how heinous or undesirable.

@ramba: As far as I know, use of external JavaScript is standard practice in the industry and presents no security risk in and of itself. The methods in this article are safe as well, but there may be other scripts that could post a security risk to your site.

@H5N1: Cool, thanks for giving us an example to check out (I was too lazy). May I ask what additional techniques are in play with that set of links? Btw, very nice feature for allowing users to select their link-opening preferences :) (also, I edited your link!)

@Trav: Great to hear from you – thanks for dropping by with a comment. :) As for supporting non-JS browsers by adding the links in a noscript tag, I think it would defeat the whole point of the exercise because of the fact that Google is quite capable of reading noscript content (and any content on the page for that matter). It’s a good idea though, and something to think about as we find workarounds for the apparently defunct nofollow attributes.

And yes, I changed the site’s default theme about a month or so ago. I still may return to the “trippy” Quintessential theme, but I am really liking everything about this new one for the time being.
H5N1 2009/06/16 1:28 am

I try to explain in plain english :)
Once you have set a traditional (and working) href attribute to an A element you can just play with javascript and DOM to make it behave as you want.
This can be done by changing the “onclick” event (be careful: the event has to return false to avoid the link to be followed) and whatever you want.
It’s easily done by checking the DOM with a custom getElementsByClassName (you can find a lot of examples on the web) or with different framework (jQuery, scriptacoulous, prototype, moootools etc…) but I prefer to write my owns. :)

In my case I use valid links (in the case in which javascript is disabled I manage the links via PHP) so that Google and other bots can easily index the target links.
In this way you have not to provide any <noscript> alternative.

The XHTML standard was born primarily to separate presentational from semantic contents (did you know?) and, in fact, is called “modular”.

I like to keep my code clear (no inline events or style or any other presentational content) and use CSS and Unobtrusive Javascript to provide additional features.
After that you can disable javascript and test how it works and use PHP to manage what was done by javascript.

An example: I use Ajax to load pages, but with a simple include() function I manage the searchstring and serve the right pages in the case javascript is not enabled.

An additional feature is the one letting the user to choice if the external links will be opened in the same window or in another.
This has been done because one of the principle of the usability and accessibility is that this kind of choice is up to the user, not to the developers. :)

I hope to have been clear and sinthetical :D
H5N1 2009/06/16 9:05 am

Just a litte off-topic note: I offer myself for translating your PDF-book in italian :)
Obviously for free.
Jeff Starr 2009/06/17 8:22 am • Post Author

Absolutely educational, H5N1 – thank you for taking the time to explain the process. Manipulating the href attributes of targeted anchor elements via the DOM is an excellent idea, and one that I should have considered before writing this article. In the hypothetical case of “hiding” the links from Google, what do you recommend using as the PHP-generated alternatives (i.e., the original, unmodified links)? I suppose they could be anything, but you certainly wouldn’t want to use the same URLs inserted by the JavaScript (otherwise it would defeat the purpose, it seems). In any case, lots of great info there to think about — thanks again for sharing your techniques! :)

And I may take you up on that free translation offer! ;)