WordPress how to guide for making a link no follow & getting red if no referrer in Classic Editor or Gutenberg

If you click on the links in this post, we may earn money from the companies mentioned in this post, at no extra cost to you. You can read the full disclaimer here.

Sharing is caring!

If you have a WordPress site and include links in your blog posts or pages, you may have heard of something called “nofollow” links.

We’re going to take a non-technical look at what you need to know about nofollow links and how to add them to your website.

What are nofollow links?

Nofollow links have to do with search engines and whether or not they use a link to help a site’s ranking. They work the exact same as normal links (which are also called “dofollow” links) – the only difference is how search engines like Google treat it.

Why do I need to make my links nofollow?

The most important reason for making your links nofollow is if you use affiliate links.

Affiliate marketing is a fantastic way for bloggers to earn money!

However, Google requires all affiliate links to be nofollow.

Can I use a plugin to make my links nofollow?

Yes and no.

Making links nofollow via a WordPress plugin is a solution that many have used in the past.

However, starting with the WordPress 5.1 update, a lot of plugins that had been working great unfortunately stopped working.

There’s also another issue with WordPress adding “noreferrer” to all links that open in a new tab.

Is “noreferrer” the same as “nofollow”?

No, the two terms are different.

Noreferrer has to do with website security when using a small number of internet browsers (including Internet Explorer).

The problem is that some affiliate programs don’t like noreferrer because it keeps them from seeing which domain (or website) sent them traffic through affiliate links.

For now, until another WordPress update fixes this issue, the simplest way to get rid of the “noreferrer” is by NOT having your links open in a new tab.

If your links didn’t open in a new tab before, then you have nothing to worry about.

If they did, then your old links should still be fine (unless you edit your blog entry). Going forward, for the time being, I recommend not having your links in your new blog entries open in a new tab. If you edit old blog entries and the links used to open in a new tab, you’ll need to delete the noreferrer part – more about that later.

For now, let’s go back to the nofollow thing – the part that we actually do want for all of our affiliate links.

Adding Nofollow to Your Links

Here’s an affiliate link to one of my favorite web hosts, Kinsta.

So when I first add the link, the HTML code for that sentence is going to look like this:

HTML code for an affiliate link in WordPress

The part that makes the word Kinsta a link? That’s the stuff in between the <>’s before and after the word Kinsta.

You can read more about links here… or, really, in a number of great online tutorials and courses about HTML. But don’t worry – you don’t need to if you don’t want to.

For right now, let’s not worry about what that all means. Let’s just pay attention to what we want to add.

We want to make the link a Nofollow link, so there’s one small thing we need to add:

rel=”nofollow”

That’s it!

Of course, we still have to figure out where to put it.

In the Kinsta example, you can just add it right before the first closed bracket:

HTML code for an affiliate nofollow link in WordPress

Let’s compare just the HTML for the links, without and then with the Nofollow part:

dofollow and nofollow affiliate links HTML code for WordPress

It’s just adding the rel=”nofollow” that makes it a nofollow link.

NOTE: When you add the rel=”nofollow”, make sure you add a space right before it, as you can see in the above example. So you’re technically adding ‘ rel=”nofollow”‘ instead of just ‘rel=”nofollow”‘.

Getting Rid of Noreferrer

If you’re editing a blog entry and an affiliate link had previously opened in a new tab, you’ll want to change the link so that it doesn’t open in a new tab.

However, you’ll still need to get rid of the part of the HTML that includes the noreferrer.

Here’s what a link that opens in a new tab and automatically has the noreferrer part (as well as a noopener part) looks like:

noreferrer noopener link that opens in new tab in wordpress

The target=”blank” part is the part that makes the link open in a new tab.

The rel=”noopener noreferrer” part is what WordPress automatically adds. It seems to stick around even if you change the link to NOT open in a new tab.

The easiest way is to delete all that’s underlined in red and then add rel=”nofollow” so that the HTML then looks like:

nofollow affiliate link HTML code for WordPress blog entry

So, now we know where to put the nofollow part and where to erase the noreferrer noopener part – but how do we add anything to the HTML of our blog entry?

How you do it depends on whether you’re using Gutenberg blocks or the classic editor (aka the way WordPress worked before Gutenberg).

WordPress Block Editor (Gutenberg) – How to Edit HTML

So we’re going to take a look at the paragraph block.  (If you’re using a plugin that gives you extra blocks, please note that there’s a chance this may not work. It also may work but give you a weird error message anyway. But as long as you’re using a paragraph block, this should work with no problems.)

If you’re working on a paragraph, there should be a little icon of 3 dots in a vertical line:

Gutenberg paragraph block in WordPress how to choose more options

Click on the 3 dots, and then click on the option that says Edit as HTML:

how to edit at HTML a Gutenberg block in WordPress

Now you can add your rel=”nofollow” part to the link.

When you’re done, click on the three dots again, then choose Edit visually to return to where you were before:

how to edit visually a block in Gutenberg with WordPress

WordPress Classic Editor – How to Edit HTML

If you’re using the classic editor, you’ll notice when you’re writing your blog entry that there are two tabs near the top of the screen, Visual and Text:

visual and text tabs when editing a blog post in WordPress

Visual is the “normal” way to edit it – but switching to the Text tab by clicking on the word Text will let you add the rel=”nofollow” part to your affiliate link.

When you’re done, just click on the word Visual to switch back to where you were before.

Conclusion

The most important takeaways?

  • For affiliate links, you want them to be nofollow
  • For affiliate links, you don’t want them to be noreferrer
  • You can change this by editing the HTML in WordPress
  • You don’t need to know HTML to do this – just a few details