The “rel=nofollow” HTML microformat (archive.org) is 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 (archive.org)!”). 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 (archive.org) installed or special settings (archive.org) 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 (archive.org) “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
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.
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)Open your stylesheet file and add the following lines to the end of the file:
a[rel~=nofollow]
{
border-bottom: dashed 2px #ffa500;
background: url('nofollow.gif') no-repeat center left;
padding-left: 17px;
}
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.
- 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 :-).
Comments / questions
There's currently no commenting functionality here. If you'd like to comment, please use Mastodon and mention me ( @hi@johnmu.com ) there. Thanks!