Adding user-friendly rel=nofollow markup (for IE too!) (old, probably outdated)

Warning: This page is pretty old and was imported from another website. Take any content here with a grain of salt.

The next step after adding CSS to highlight links with rel=nofollow is to give the user some information about what the

nofollow symbol

symbol and the dashed line mean. Since CSS will not allow you to add tooltips and links, we have to resort to some javascript trickery. The up-side to this is that it will also display the markup on older browsers like IE 6.

Adding this kind of markup to your site is pretty easy to do.

  1. Download the script and the nofollow image.
  2. Open the script file in a text editor (Notepad is fine) and adjust the settings on top:
// settings, modify as desired
var myInfoPage ="http://domain.com/nofollow-info.htm";				// local page with nofollow information
var myNofollowImg = "http://domain.com/images/nofollow.gif";		// source of nofollow image (check for full path!)
// warning must be html-formatted
var myWarnMsg = "Beware: this link is potentially bad or not trusted! Click here to find out more.";
  1. Upload the script and the image (place the image in the path you specified in your script), don’t forget to create your informational page for the nofollow (I’m just linking to my nofollow-policy page).
  2. In your template, right before the closing “</body>” tag, add a reference to the script. In a Wordpress theme you would add this to your footer.php, eg:
<-- nofollow highlighting -->
<script src="<?php bloginfo('stylesheet_directory'); ?>/highlight-nofollow.js" type="text/javascript"></script>
... 
</body>
  1. Refresh your browser and check the results. I have a local test page which shows it in action (and here’s a nofollow’ed link (archive.org) thrown in for good measure).

Currently the code only adds the image and underline to links that contain a text anchor. This means that links with only an image as the anchor are not modified (but the CSS nofollow highlighting will still be displayed, so be careful if you use that and have image-only links with rel=nofollow). The code was tested on IE 6 and 7.0, Opera 9.01 and Firefox 2.0.0.5.

The code removes the rel=nofollow from the displayed page (it still remains in the static page) so that the different kinds of nofollow markup (including those you might have installed in your browser or with a browser plugin) do not create conflicts. Just to be sure: this script does not change anything on your actual pages, it only changes how the page looks to the user. A search engine crawler would not see these changes.

Advanced users can modify the markup that is added to each link, perhaps even use it to open a floating window on top of the current page instead of going to a separate page.

Current version is v1.0 - 2007-07-28

Warning: This page is pretty old and was imported from another website. Take any content here with a grain of salt.

Comments / questions

There's currently no commenting functionality here. If you'd like to comment, please use Twitter and @me there. Thanks!

Tweet about this - and/or - search for latest comments / top comments

Related pages