User stylesheets to show nofollows

Update: now works with links with rel="external nofollow" etc too!

I’ve recently switched back to Safari as my main browser because good ol’ Firefox kept crashing on me, and I must say that it’s been a smooth experience so far. Safari is a great browser, of course, and 3.1 is very fast as well. One of the things I like to see for every site though is where they use nofollow, so I had to find a way to do that in Safari.

The easiest way of doing that, in my opinion, is using a user stylesheet. You can specify it in your Safari preferences, under Advanced:

User Stylesheet Selection

(BTW, you can use user style sheets on Firefox too.)

Then put the following in the stylesheet you selected:

a[rel~=nofollow] {
background-color: pink !important;
color: black !important;
font-weight: normal !important;
text-decoration: underline !important;
}

And after that, all nofollow links you encounter should look something like this.

If you want to make sure you see nofollowed image-links as well, add this:

a[rel~=nofollow] img {
border-bottom: 3px solid pink !important;
}

That will add a small pink bottom border to the image that is linked. Download the entire stylesheet here.

Tags: , ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

21 Responses

  1. Justin GoldbergBy Justin Goldberg on 5 April, 2008

    I like seoquake over the red outline because it strikes through nofollow links, which is more noticeable to me.

  2. Brian WBy Brian W on 5 April, 2008

    Thanks for this tip. Its very useful when I don’t want to have the SEO for Firefox plugin turned on. One thing I notice tho, is that it doesn’t highlight the name of the commenter when it is a link. Wonder why that is?

  3. PublicRecordsGuyBy PublicRecordsGuy on 6 April, 2008

    Again, you cease to amaze. I’ve learned more from your blog postings than most of the research on various forums, etc. I guess you get what you pay for. Thanks for sharing this tip.

  4. Scott JohnsonBy Scott Johnson on 6 April, 2008

    For those who use <a href="https://addons.mozilla.org/en-US/firefox/addon/2108&quot; rel="nofollow">Stylish</a>, I setup <a href="http://userstyles.org/styles/6216&quot; rel="nofollow">a userstyle that contains this same code</a>.

  5. Copes FlavioBy Copes Flavio on 6 April, 2008

    Nice one, thanks :) It’s something strange but Firefox keeps crashing also on my Mac, I think it’s the load of addons I’ve put in it :| BTW I switched to the newest FF 3 b5

  6. HenningBy Henning on 7 April, 2008

    This would not work for e.g. wordpress links that go rel=”external nofollow”, would it?

  7. Joost de ValkBy Joost de Valk on 7 April, 2008

    @Henning: hmm it would if I fixed it to ;) let me have a look at that

  8. Joost de ValkBy Joost de Valk on 7 April, 2008

    @Henning fixed!

  9. AnnagramBy Annagram on 7 April, 2008

    I love safari for some reason, I guess I should appreciate FF more – it performs better but I’ve all my bookmarks now in safari!!!

  10. HenningBy Henning on 7 April, 2008

    Ok, now it’s officially cool ;-)

    Some weeks ago I had to find that most nofollow bookmarklets don’t work with such combinations of “external” and “nofollow” so I made one that does:
    http://www.interessante-zeiten.de/goodies/a-slightly-better-nofollow-bookmarklet
    It’s the link that says »nofollow?« (page is in german).

  11. Sam DaamsBy Sam Daams on 9 April, 2008

    Haha, interesting to see this post. I was actually wondering a few weeks how many webmasters add this into their stylesheets to throw off link buyers that are too lazy to look at the code:

    a[rel~=nofollow] {background-color:#fff !important;border:none !important;}
    a[rel~=nofollow] img {border:none !important;}

    Now before everyone gets their panties in a bunch over people starting to use this (surely I’m not the first to think of this!), there is a really good reason to add this imo and that’s design. I’ve seen navigations that hang together to the last pixel. Throwing a pink background and border at nofollows like the searchstatus addon in FF does, screws with that big time.

    Of course if you’re doing it to fool link buyers, be prepared to also suffer the consequences of fooling Google manual reviewers who come and check out your site based on reports filed. I’m sure those reviewers use tools like this rather than sifting through code!!

  12. ZizBy Ziz on 9 April, 2008

    Joost,

    Thanks for the Safari CSS – just what I was after! Does anyone else know of any other SEO plugins for Safari?

    In response to a couple of people’s comments: I’ve heard so many people complaining about Firefox’s instability and lack of speed recently. In fact, I was one of them until mid February; In my frustration I posted on the Mozillazine.org forum and my faith in FF was restored shortly afterwards.

    If you use plugins not built by the people who built FFox can you expect solid performance from FFox?
    I went here (http://kb.mozillazine.org/Creating_a_new_Firefox_profile_on_Windows) and created a new user profile that I use just for browsing the web – FF’s never crashed on me since, on either profile. I use the original FF skin for both my SEO and normal browsing profiles, again – anything not built by FF developers can’t be expected to have zero effect on FF’s performance themes included.

    Thanks for such an informative site Joost.

    ziz

  13. Bull Gang TacticalBy Bull Gang Tactical on 10 April, 2008

    Thanks for the heads up. I have never looked into such things as this. Now that you pointed this out it is good for all sorts of little functions. Thanks for pointing out a feature i have overlooked.

  14. Sam DaamsBy Sam Daams on 5 June, 2008

    Decided to come back to this after using safari a bit more. I added the following stylesheet which matches Firefox so bit more normal for my eyes :)

    a[rel~=nofollow] {background-color:#ffc8c8 !important;border:1px dashed #b22222 !important;}

    Works for images too although 2px height off compared to FF but that might just be a safari/ff difference anyway. Didn’t add the either; guess that was just for descriptive purposes?

  15. Joost de ValkBy Joost de Valk on 5 June, 2008

    @Sam that was their for a plugin I threw away ;)

  16. Sam DaamsBy Sam Daams on 5 June, 2008

    ps. as mentioned in my earlier post, note that any webmaster wanting to fool you into seeing a link as if it doesn’t have any nofollow on it, can enter a more specific rule in their stylesheet and overwrite for example the Firefox plugin (add in wrapper id or some such). If you have a personal stylesheet like this set, it can’t be overwritten (at least I haven’t managed to in brief testing).

  17. DoFollowBy DoFollow on 14 July, 2008

    I’m glad to see other users promoting dofollow. Success with your blog !

    Regards

Trackbacks