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:
If JavaScript is enabled and the page has finished loading the links will look like this:
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
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
