Adding user-friendly rel=nofollow markup (for IE too!)

Posted on 28 July 2007 at 10:31 UTC, filed under CSS, Javascript, Tricks, disclaimer

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:

    1. // settings, modify as desired
    2. var myInfoPage ="";              // local page with nofollow information
    3. var myNofollowImg = "";        // source of nofollow image (check for full path!)
    4. // warning must be html-formatted
    5. var myWarnMsg = "Beware: this link is potentially bad or not trusted! Click here to find out more.";
  3. 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).
  4. 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:
    1. <!-- nofollow highlighting -->
    2. <script src="<?php bloginfo('stylesheet_directory'); ?>/highlight-nofollow.js" type="text/javascript"></script>
    3. ... </body> ...
  5. 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 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

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

Feel free to leave a reply to this posting.

Warning! Your comment will be lost if you mistype the spam-test or forget to enter your name or e-mail-address. Copy your comment to the clipboard to be sure.

You may use these tags within your reply: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>