How To Hide Links To Avoid NoFollow PageRank Sculpting Issues

Just recently Google’s Matt Cutts announced a change in how Google handles NoFollow attributes in links thus making a “rel=nofollow” useless on your JavaScript-enabled onClick event handlers. The best method in this case would be to hide links on your page that you would normally have used “nofollow” on so you could only show them via JavaScript.

Instead of using “rel=nofollow” on your links as you did previously you may want to hide the links completely and only make them appear when JavaScript is enabled. You should also show a user which does not have JavaScript enabled that there is a link but it is not enabled. So I decided to create a small JavaScript which converts <span> elements with a specific class name to links when the user has JavaScript enabled. If there is no Ja

vaScript the “links” will look like this:
followlink_1

If JavaScript is enabled and the page has finished loading the links will look like this:
followlink_2

This is the HTML code for the <span> tag which will be converted into a link which needs to be given as the title attribute of the element:

1
<span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span>

This is how the link will look after the script has been executed:

1
<a href="http://www.saschakimmel.com/">Hidden Link</a>

You can also add both an id and additional classes to the source <span> – they will be copied to the final link.

The script requires the prototype.js JavaScript framework – I am using this because I know that many websites are already using it on their pages.

This is some code of an example HTML page – you can download it and the JavaScript file in a package below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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" xml:lang="de" lang="de">
<head>
<title>Hidden Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>
</head>
<body>
<ul>
<li><a href="http://www.saschakimmel.com/">Normal Link</a></li>
<li><span class="hiddenJSLink" title="http://www.saschakimmel.com/">Hidden Link</span></li>
</ul>
</body>
</html>

So in essence the only thing you need to do is to add these three lines of code to the <head> section of your HTML file after you have downloaded the JavaScript/HTML/CSS package below:

1
2
3
<link rel="stylesheet" href="hiddenLinks.css" type="text/css" />
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="hiddenLinks.js"></script>

Acessibility Notice!

Please note that from an accessibility standpoint using JavaScript is not recommended as it renders the links useless on screen readers. But currently there seems to be no other way to hide links from Google for legitimate PageRank sculpting.

License

Creative Commons License
This code by Sascha Kimmel is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License. This means that if you are using it on your site (personal and commercial sites are ok) you need to add a link somewhere (only on one page)  as provided here:

1
HiddenLinksJS by <a href="http://www.saschakimmel.com/" target="_blank">Sascha Kimmel</a>

If you don’t want to add a link to your site you can donate any amount to my PayPal account which will entitle you to use the HiddenLinkJS on any page without any requirement for adding a link:


View hiddenLinks.js
View hiddenLinks.css
View hiddenLinks.html demo page

dlnow

Be Sociable, Share!
June 7th, 2009 at 9:08 am

It’s sad that it’s come to this again but if I have to use javascript for links then I will

Good work! :)

Brandon
June 19th, 2009 at 1:09 pm

does this actually work? The links show up in google’s cache when you do this, and they also show up on link checker tools: http://www.seochat.com/seo-tools/site-link-analyzer/

admin
June 27th, 2009 at 5:41 am

Of course it shows up in Google’s cache because JavaScript is still executed in your browser if you are accessing the Google cache version of the page. If the link shows up in a link checker it will surely be a fault in the checker because it’s simply not a link at all – I suppose the link checker only uses a regular expression to extract everything that begins with an “http://” – but that is not necessarily a link.

Zip
July 26th, 2009 at 4:10 pm

Nice script !
Clearly, we need that kind of trick, now.

Is there a way to open the link in a new window ?

admin
August 10th, 2009 at 3:59 pm

Not currently, but with a bit of work this is possible as well.

saraswat
August 31st, 2009 at 1:31 pm

Thanks for post. It’s really imformative stuff.
I really like to read.Hope to learn a lot and have a nice experience here! my best regards

guys!

aad!

cody
September 1st, 2009 at 6:56 pm

how do i apply this for a joomla menu item?

please help!

February 11th, 2010 at 5:17 pm

Nice post and thanks for the download, javascript is the only way to hide links from search engines to crawl. Anyway, have you also build such code that could be use as a plugin for a wordpress.

May 23rd, 2010 at 1:17 pm

From what I gather, if you use the no-follow tag, it is like telling the search engines that you don’t trust that site. Not sure if that is true, but all of the more reason to hide no-follow links with a java script.

My thoughts are, I wonder if this script could be made into a WordPress plugin? That would be pretty useful if the plugin could do all of the work for you.

October 7th, 2010 at 5:16 am

Is it possible to rewrite this to work with jquery instead of prototype? I have jquery on my site already and these two are not very compatible. I tried some of the fixes around the net but no go. Besides, I really shouldnt have two frameworks going at once. Thanks in advance!

admin
October 7th, 2010 at 5:37 am

Should be possible but I’ve never used jQuery so I’m sorry for not being able to help you.

Drew Jackson
November 21st, 2010 at 10:29 pm

Very interesting take on hiding links from the bots. Question. Doing some testing with it and not able to get it to work correctly when a page is in a folder. Works fine on the home page.

Thoughts as to why?

John
December 7th, 2010 at 7:42 am

Dear Author,

Does this javascript workaround still work?

Has G picked up on it yet?

How do you calculate that this actually works and that you can redirect your link love to your inner pages over say your category pages?

John

Mosquitout
February 17th, 2011 at 8:34 pm

Is it possible to specifie color for the texte and having somethink else than blue ?
I have tried to simply put:
.hiddenJSLink {color: #FFFFFF;}
.hiddenJSLink:hover {cursor:progress; color: #003366; text-decoration: underline;}

but it does not work ;?

Steve
February 17th, 2012 at 12:23 pm

Very good script but i need to open my link in a new window.
I am not good in javascript so someone could help me ?
Thank you :o)

Comments are closed.

Sascha Kimmel - Living The Web Experience Since 1996 by tricosmedia