Easily Check if a Link is DoFollow or NoFollow with CSS

Whenever I find a link to my site on another website, I wonder if that link is a dofollow or nofollow link. One way, of course, is to view the source of the page and see if that link has a nofollow attribute.

However, this can be tedious. I wanted a way I could quickly identify whether or not a link is a nofollow without looking through the source.

What is a NoFollow / DoFollow?

First, a bit of background on the two types of links.

At the most basic level, a link is a “nofollow” link if it is marked as such. There are two ways to mark links as “nofollow” - the first is to mark every link on a page as nofollow with a meta tag:

<meta name="robots" content="nofollow" />

The second, and more common way, is to mark individual links as nofollow by specifying the rel attribute in a link tag:

<a href="http://www.example.com" rel="nofollow">Example dot Com</a>

Any link that is not marked nofollow is a dofollow, although the following meta tag does exist:

<meta name="robots" content="follow" />

Most users are not directly affected by the type of link - instead, these links are a signal to search engine bots how to include the following link in the bot’s ranking system.

A dofollow link tells a search engine bot to improve the linked site in its search engine results.

A nofollow link tells a search engine bot not to consider the link in its search engine results.

A nofollow link is not necessarily bad. In fact, many SEO experts believe having a mix of nofollow and dofollow links to your site is important.

For more discussion on nofollow and dofollow links, check out the following articles:

• SEO: What Are NoFollow and DoFollow Links?
• Understand DoFollow & Nofollow Link: SEO Basics
• Use rel=”nofollow” for specific links

Enter CSS Attribute Selectors

Cascading Style Sheets (CSS) define how webpages are presented - including layout, colors, and fonts. With CSS, various HTML tags can be styled differently depending on the tag’s attributes.

Most CSS styling depends on standard HTML attributes - particularly class and id. rel is nonstandard, but CSS can select using nonstandard attributes as well using attribute selectors.

If I wanted to select all tags with a rel attribute, I would use the CSS selector [rel].

However, sometimes people might use a value for the rel attribute that is not nofollow. Therefore, if I want to select all tags with a rel attribute with a value of nofollow, I would use the CSS selector [rel="nofollow"].

It doesn’t end there. Just as people might use a value other than nofollow, they might also have multiple values in the rel attribute. So, finally, if I want to select all tags with a rel attribute that has a value of nofollow, I would use the CSS selector [rel~="nofollow"] - note the tilde.

Now, I want to mark follow links with a yellow background, and a nofollow link with a blue background.

Put it together, and my CSS looks as follows:

See the Pen aMWvqQ by Joseph Hendrix (@joehx) on CodePen.

Since CSS is cascading, the second rule overwrites the first.

Here’s a screenshot of my reddit home page, sorted by controversial, with the added rules:

Reddit Marked Up

In order to not affect the look of a webpage, I further modified my custom CSS based on Chris Bracco’s A Simple CSS Tooltip:

See the Pen NoFollow / DoFollow Link Tooltip by Joseph Hendrix (@joehx) on CodePen.

Creating a Tampermonkey Script

The next thing I wanted was to load the CSS automatically. For that purpose, I turned to the userscript manager Tampermonkey (which is a fork of Greasemonkey, I believe).

The only issue here is that Tampermonkey loads custom JavaScripts, not CSS. Therefore I needed to load the CSS via a JavaScript function.

Thankfully it is possible to edit stylesheets with JavaScript, and I came across a blog post on how to add rules to stylesheets with JavaScript.

Unfortunately, it doesn’t seem to be possible to arbitrarily add a rule to the entire document easily - you either have to add a rule to a preexisting stylesheet or create a new one.

Getting the stylesheets in JavaScript is pretty easy, though. The stylesheets exist in a (pseudo?) array held by the global document object:

document.styleSheets

To get the first stylesheet, just ask for the zeroth element just as you would any array:

document.styleSheets[0]

Inserting a rule is a simple as calling the insertRule method and passing the rule as a string:

document.styleSheets[0].insertRule("a { background: yellow; color: black; }");

This worked great… So long as the stylesheet I was accessing was on the same domain as the page. Some sites, such as reddit, keep their stylesheets on a different domain than the main site (reddit keeps theirs on www.redditstatic.com/).

In those cases, I would get the following error:

SecurityError: The operation is insecure.

So I needed to create a new stylesheet instead of just accessing a preexisting one.

Here’s the final script: