The next step after adding CSS to highlight links with rel=nofollow is to give the user some information about what the
Adding this kind of markup to your site is pretty easy to do.
- Download the script and the nofollow image.
- 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.";
- 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).
- 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 -->
- ... </body> ...
- 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 18.104.22.168.
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