Easily Check if a Link is DoFollow or NoFollow with CSS



This site utilizes Google Analytics, Google AdSense, as well as participates in affiliate partnerships with various companies including Amazon. Please view the privacy policy for more details.

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:

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

Comments temporarily disabled.