Nofollow?

This bookmarklet inserts a tiny bit of CSS into the top of the page you're currently viewing. The CSS is similar to that which is used in other nofollow highlighting methods:

Try it out on a page with nofollowed links!

By the way, this bookmarklet also works in Opera & Firefox (but there are simpler ways to handle it in Firefox).

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:
   Select code
   JAVASCRIPT:

   1. // settings, modify as desired
   2. var myInfoPage ="http://domain.com/nofollow-info.htm";        // local page with nofollow information
   3. var myNofollowImg = "http://domain.com/images/nofollow.gif";        // 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:
   Select code
   HTML:

   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 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

That said, I believe that all users should be able to recognize these links as being problematic (or untrusted) at first glance. The more advanced, web-savvy users will sometimes have tools installed or special settings which highlight links with "rel=nofollow", the normal user does not. If a link is marked as being problematic / untrusted for search engines, the user should see that as well -- it's nothing more than the Google Webmaster Guideline "Don't deceive your users or present different content to search engines than you display to users (...)". It is deceiving to show users a normal link and at the same time tell search engines that you really don't want to link there! In my opinion, if the link is not good enough, the user should be informed. There are two ways to do that.

My favorite solution would be for browsers to automatically highlight these kinds of links on all sites. However, I doubt that will happen any time soon...

The other solution would be for websites to highlight their own rel=nofollow'ed links. I am doing that here on this site (for the major, modern browsers at least) - an example can be found in my linking policy. Links with the rel=nofollow microformat are underlined and displayed with a small warning symbol.

Adding that to your own site is easy enough - it just requires a small change in your CSS stylesheet and uploading the symbol to your server.

1. Download the symbol: (right-click on it and save a local copy of it). Copy it onto your server into the folder where you have your stylesheet file (this depends on your site - on Wordpress it will be in your theme folder)
2. Open your stylesheet file and add the following lines to the end of the file:
   Select code
   CSS:

   1. a[rel~=nofollow]
   2. {
   3.     border-bottom: dashed 2px #ffa500;
   4.     background: url('nofollow.gif') no-repeat center left;
   5.     padding-left: 17px;
   6. }

   If you have placed the image in a different folder, you need to specify it here. If you with to use a different sized image, make sure you adjust the "padding-left" setting (this makes room for the symbol). If you have an orange background on your site, also make sure that you adjust the color from "#ffa500" to something that contrasts the background (in that case you might also consider changing the colors in the symbol). Upload the stylesheet to your server.

3. Done!

   You should see the changes when you open a new page on the site. In some cases you might have to restart your browser to see the modified stylesheet.

Do you think that a global highlighting like this would make some sites take a second look at their policy of adding "rel=nofollow" to all outbound links? Imagine you had an encyclopedia where all references were highlighted as being untrusted .