Adding “rel=nofollow” markup to your site

Posted on 25 July 2007 at 1:10 UTC, filed under CSS, Tricks, disclaimer

caution - bad links aheadI support the “rel=nofollow” HTML microformat as a way to mark links which might be problematic, whether they’re clearly spammy, just not checked or even just sites that I don’t really want to link to (but still want to provide a link for others to use – you know, “don’t look, but that guy’s got a giant nose!”). I understand that it is important for search engines to recognize these kinds of links and to treat them differently. This of course implies that sites use the rel=nofollow properly and do not just apply it to all outbound links (or at least to all links that do not go to their own network)…

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 GuidelineDon’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 nofollow symbol 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: nofollow 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:

    [CSS]a[rel~=nofollow]
    {
    border-bottom: dashed 2px #ffa500;
    background: url(‘nofollow.gif’) no-repeat center left;
    padding-left: 17px;
    }[/CSS]

    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 :-).

There is one trackback ping to this post.
  1. [...] next step after adding CSS to highlight links with rel=nofollow is to give the user some information about what the symbol and the dashed line mean. Since CSS [...]

There are 7 comments to this post.
  1. I like the idea, is there a way we could put a link on the image to a static page that describes what it means?

  2. Oops, I almost missed, “Imagine you had an encyclopedia where all references were highlighted as being untrusted :-).” Something like that could never happen.

  3. Adding a tooltip or link to the image is impossible if you only want to use CSS… However, I agree, it would make a nice addition. There are other ways to do it though, I’ll put something together :-).

  4. is it possible to assign the rel=nofollow via the stylesheet ?
    like to have all links in a certain div automatically assign a rel=nofollow to all links in that div ?

  5. Hi Michael, you need to have the “rel=nofollow” bit with each link that you have, it can’t be applied via stylesheet or applied to a div..

    The closest you can get to that is a class that Yahoo has added this year, however it blocks the whole div from indexing (including the text), not just blocking the links from passing value: http://www.ysearchblog.com/archives/000444.html

  6. Murfreesboro Seo (31 August 2008 at 9:22 pm):

    Is there a way in implement nofollow tags into CSS?

  7. And now after three years from this article, you guys have find a way to assign the “nofollow” microformat atribute for a weblink or a div area?
    Thanks alot!

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=""> <strike> <strong>