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

  8. wedding flowers costco (16 December 2015 at 11:59 pm):

    Wonderful goods from you, man. I have understand
    your stuff previous to and you are just extremely fantastic.

    I actually like what you have acquired here, certainly
    like what you are saying and the way in which you say it.
    You make it entertaining and you still care for to keep it
    smart. I can’t wait to read much more from you.
    This is actually a wonderful web site.

  9. happy valentines day images (16 January 2016 at 5:21 pm):

    I know this web site provides quality dependent content
    and other information, is there any other site which offers these data in quality?

  10. The rapid rise of this six-second video app has opened the door for
    marketers to produce creative, attention-grabbing brand content.
    In the shadow of the Arc – Light Cinema in Hollywood,
    on the east side of Vine Street, sits a beige and maroon building, sturdy and bland in appearance.
    Suddenly, memories of her pumpkin-eating childhood flooded back to her.

  11. instagram boys (24 January 2016 at 2:59 am):

    May I simply just say what a relief to discover someone that genuinely understands
    what they are talking about on the internet. You definitely realize how to bring an issue
    to light and make it important. A lot more people must look
    at this and understand this side of your story.
    I was surprised you are not more popular given that you most certainly possess the gift.

  12. pressed juicery palo alto (25 January 2016 at 3:04 am):

    A trivia game сan bᥱ playe աith thе question being about
    thhe guest оf honor or general trivia questions.
    Thee total material fоr ann exam willl surely bbe ѕo immense tҺɑt а single person might nott
    ƅe гead іt all in уears.

    Уοu may have an idea ѡɦere tto іnstall, but yοu must ascertain іf it іѕ tһе
    safest ρlace оr not.

    Ⲏere iѕ mʏ ρage pressed juicery palo alto

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>