January 17, 2009

Real “nofollow” links using simple JavaScript

Article about ▸

Read comments ‣ (9)

written by Marek Foss

Today’s web is all about being in the search engines, i said that before. And since Google is the biggest search engine, I can safely say that today’s web is all about being in Google — which then again all breaks down to having a high PageRank (PR). It’s magically calculated basing on inbound and outbound links to the given site. And often having bad links brings your PR down. That’s why it’s good practice to use nofollow. But I will show you how to make it even more No.

Reading about nofollow you will find that different browsers have different approach to it, and only Google does what it supposed to — doesn’t follow the link and doesn’t index the linked page (unless it was in Google’s index already). However, there is no space for improvements, and the only way to use nofollow is like this:

<a rel="nofollow" href="http://f055.net">f055</a>

But, in fact, there’s a JavaScript (JS) approach, which probably makes the link really invisible to most of the search engines. The idea is to replace a href with an onclick event that makes a JS redirection.

<a onclick="parent.location='http://f055.net/'">f055</a>

Just add proper styling in CSS and you’ve got yourself a link that works like any other, but in HTML terms, it’s not a hyperlink at all. To get the default blue link, you should use a style-sheet similar to the following:

a {
    color: #00f;
    text-decoration: underline;
    cursor: pointer;
}

It’s not something you’d use in your daily posts, but as a link to the homepage on your logo it works great, and Google Webmaster Tools don’t shout at you about repeated content linking, for example. Note that I don’t claim it is a truly invisible hyperlink, but in search engine terms, it should do the trick.

If you liked the article, please spread the word and share it!

Comments

Cemre writes:

23/02/09 at 12:02

Not a good idea at all. Increasingly many people surf the internet with JS disabled and enable JS selectively (NoScript). So for example the link at the top right isn’t working for me right now.

This would also break the links for mobile surfers.

Marek Foss writes:

23/02/09 at 12:39

Looking at the state of web today, and how the future of mobile browsing should look like (iPhone as example) I unfortunately have to say that disabling JS turns off the rich part of it. Hence, I would argue with “increasingly many people”. Normal internet users are not very tech-savvy, and it’s not an insult at all. It has become a medium just like any other - TV, Radio, etc.

So, instead of making it safe by removing features, why not to focus on how to implement them securely?

Cemre writes:

23/02/09 at 15:00

I am alright with Javascript being used “unobtrusively”, that things still continue to work with JS turned off, although the experience would not be as “rich”. The technique you advocate here does not bring any “richness” to the user experience.

So just for the sake of being paranoid about Pagerank, you disable basic functionality for 6% of your visitors.
http://www.thecounter.com/stats/2009/January/javas.php

It is alright to lose these 6% for the sake of providing extra functionality, but the <a href=”..”> tag has been doing this since 1992 :)

Marek Foss writes:

23/02/09 at 17:05

I get your point, but I really feel that it’s not far from JS becoming what CSS have become - a standard in web browsing.

Another point is the conversion into real visitors of these 6% non-JS users vs. higher pagerank due to less indexing repeats. But I have no solid data on that. I just know a strict nofollow I described here may be really useful in SEO.

Dave Sherohman writes:

23/02/09 at 17:28

Aside from the “shutting out people with JS disabled” argument, your trick also robs me, the user, of control over how I want to open the link even if I have JS turned on:

- right-clicking your title image gives me the image context menu, not the link context menu, so I can’t open it in a new window/tab, can’t copy the link location, can’t bookmark the link, etc.

- middle-clicking/ctrl-clicking the banner opens the link in the same window and tab, rather than opening it in a new tab as it should per my browser configuration

Moving my pointer over the image also fails to show me where the link will take me or, for that matter, to even indicate that clicking will take me anywhere. I get a “pointing hand” cursor to show that *something* will happen if I click there, but, if not for the content of the article, I would have no idea what. If I hadn’t explicitly told NoScript to allow JS on this page, I wouldn’t even know that there was supposed to be something link-like there.

Even without concern for graceful degradation or those users who use the web with JS disabled, that’s way too much lost and way too little gained.

Ruben Zevallos Jr. writes:

08/03/09 at 20:15

Well… JS is not so very good idea as everybody said… the right idea is to use the nofollow only when you do not want to pass PR… but you have to use without nofollow, for internal links… I did something like this… added nofollow in almost all of links, menus etc… and I trusted it for my sitemaps… I earned a fall from more than 800K pages to less than 80k… and following it, my visits decrease from 70K per day, for less than 12k… so… nofollow is not very good idea for use without to know what you want to.

Calmarius writes:

29/03/09 at 09:22

Sometimes you really want to sort out search engines and bots. For example you upload something on your site and want to count how many times it is downloaded but you doesn’t have full control of the site (eg. you registered on a free webhosting service and the only thing is you can upload files). If you place a link directly to the file you can’t count the downloads, so I made a php which actually does this and puts the file you requested. I was happy because I see 20 downloads on the first day. Having been a cross platform game it became a bit strange that when the download count increased it increased for all platform (ca. 10 platforms listed there). I realized that there was only a few real downloads and all other was simply the fingerprint of the search engines.

So I tried the trick mentioned here and it seems it solved the problem. Of course I saw the contras too and placed the regular links there too. So It seems there is no more fake download counts anymore.

On the other hand I disagree a bit about the js disabled topic. Usually if I make a site I make it for the 99% and I doesn’t cut off features because of the 1%. And I think it is impossible to satisfy all users needs. However, I test it on almost all common browsers like Opera,Firefox,IE. I use js navigation menu and also make all content accessible via a “sitemap” (which is nothing other than a php script which enumerates all pages as link on the site), because users usually doesn’t browse a website from the index but they arrive on a page from a search engine. If someone still come to my site with js disabled he will see a big letter text says “enable js for full experience” or something similar.
To sum up I try to make my stuff as accessible as I can but nowadays js is too common to avoid it. It is much like someone claims I should make my windows game on DOS platform too because he/she has a 20 year old computer and can’t play… I can say only sorry in this situation.

Cemre writes:

29/03/09 at 11:06

Calmarius, so what’s your comment on this following:

<quote>
- right-clicking your title image gives me the image context menu, not the link context menu, so I can’t open it in a new window/tab, can’t copy the link location, can’t bookmark the link, etc.

- middle-clicking/ctrl-clicking the banner opens the link in the same window and tab, rather than opening it in a new tab as it should per my browser configuration
</quote>

You essentially take away the freedom from your users to use the site the way they want to, and I suppose it is annoying for everybody when something as simple and familiar as a link doesn’t work as expected.

Tabbed browsing has gone mainstream so users do actually want to open pages in new tabs and this IS getting common. I find it frustrating that on this site, the links show a hand cursor, but I don’t see the destination address in the status bar. Moreover, nothing happens when I middle click on them (expected behavior: open in new tab). When I right click on it, I can’t copy the address of the link, all the functions related with links (open in new window, open in new tab, copy link) aren’t just there.

Unless you can get these javascript “mystery links” to actually behave like real links from the perspective of the user, I say, this idea is garbage.

Dave Sherohman writes:

29/03/09 at 14:28

“On the other hand I disagree a bit about the js disabled topic. Usually if I make a site I make it for the 99% and I doesn’t cut off features because of the 1%. And I think it is impossible to satisfy all users needs.”

Red herring.

First off, while it may indeed be under 1% of users who don’t have JavaScript *available*, the latest figures I’ve seen say that around 7% don’t have it *enabled*. And then there are those who, like me, use the Firefox NoScript plugin (or something similar), which only allows active content (including JavaScript) to run if it comes from a whitelisted site. As selectively-enabled JS becomes more widely known, I expect that the percentage of users who don’t blindly allow all JS to run will skyrocket. It’s not a “spite 99% to cater to 1%” situation.

More importantly, though, even though “I have to use JavaScript to give the most functionality to the most users” is a good argument in cases where it applies, it does not apply in this case. JavaScript pseudo-links (in any form, not just this one) *take away* functionality from 100% of users and then require JS to give some portion of that functionality back. I have never seen a JS pseudo-link which gives the user more functionality than is provided by a standard link (and precious few that even provide as much functionality as a standard link), therefore, arguing that “I have to use JS to give my users more functionality” doesn’t work as an excuse for using them.