How to manually create nofollow links in WordPress

Nofollow links have been causing a bit of a headache for some WordPress users since 5.0 went live.

Some WordPress users choose to use plugins that allow you to turn a link into a nofollow link simply by ticking a box. However, many of these plugins are no longer compatible with the new editor in WordPress 5.0 (Gutenberg!).

So what you should do if you find yourself in this situation?

Well, you could use the Classic block in the new editor which should still allow you to use the functionality provided by these plugins. Or, you could install the Classic Editor plugin to revert the whole post and page back to the old editor we all know and love.

However, personally, I would advise you start creating your nofollow links manually by editing the HTML. I know that sounds really scary and like a lot of extra work, but I promise you it isn’t!

Plugins are wonderful, but they can be problematic. They can slow down your website, pose a security risk and they create more work for you because you have to keep them up to date. So why use them unless you really need to?

In this post, I am going to show you how to manually create nofollow links in WordPress.

---

1 | Create your link

Firstly, you need to create the link that you want to turn into a nofollow link in the WordPress editor.

If you aren’t familiar with the process of creating a link, all you have to do is select the text that you want to turn into a link and click the Link button, as highlighted below:

Then you need to enter the URL that you want to link to or start typing in the name of the page if you want to link to an existing page on your WordPress website.

If you want this link open in a new tab when it is clicked on, click the three dots and then click the Open in New Tab toggle.

When you’re done, click the Apply button as, as highlighted below:

And that’s it! You’ve created a link.

2 | Switch to the HTML editor

Now that you have created your link you need to edit this as HTML. To do this, click on the three dots above the block and select Edit as HTML.

Alternatively, you can switch the whole post or page editor to the code editor mode. This option might be a little overwhelming if you have a lot of content within your post, or if you have never edited HTML before.

To switch to the code editor mode, click the three dots in the top right-hand corner of the screen and select Code Editor.

Either way, you should now be able to see some HTML. This is what I can see when I select Edit as HTML for this particular block:

Your code might look slightly different to this. For example, if you have more than just a link in your block, it might look a bit busier, like this:

3 | Identify your link within the HTML code

Now that you can see the HTML code that creates the content within your block, you need to identify the specific code that creates your link.

In HTML, links are defined using the <a> tags. There will be an opening tag that denotes the start of the link (<a>) and a closing tag that denotes the end of the link (</a>). The text that is placed between these two tags is what shows on the front-end of the website and is what the user clicks on. So in this example, the text is “This is a link”.

Within the opening <a> tag is the href attribute. This href attribute tells the browser where the link should take the user to. So in this example, the value is https://hollypryce.com because this is where I want to use to be taken to when they click on the link.

Are you still with me?!

Yes? Good! Now, take a look at your HTML code and identify the opening and closing link tags and all of the content in between them (such as the link text and href attribute.

I’ve highlighted the HTML code for my link in this example in red:

<p><a href="https://hollypryce.com">This is a link</a></p>

Found it? Great! Let’s move on to step 4.

If you have multiple links within a block…

If you have multiple links within a block then there will be multiple link tags within your HTML. Here is an example of a block containing two links. I’ve highlighted the first link in red and the second in green.

<p><a href="https://hollypryce.com">This is a link</a> and <a href="https://twitter.com">this is also a link.</a></p>

If you would like to make all of these links nofollow links then you will need to edit the HTML of both of these links.

If you only want to make one of these links a nofollow link then should first identify which link you need to edit. The easiest ways to do this is by looking at the URL or the link text itself.

Either way, once you have found the link or links you need to edit, move on to the next step.

4 | Add in the rel attribute with the nofollow value

It’s finally time to turn your link into a nofollow link. At last!

I’ve already introduced you to the href attribute which we use to tell the browser where the link needs to link to. To turn our link into a nofollow link we need to add in another attribute; the rel attribute.

The rel attribute is used to specify the relationship between the current web page you are on and the web page where the link will take you to. It looks something like this:

rel=" "

The value we are going to place within the quotation marks is nofollow. This is how we tell browsers and search engines that this link is a nofollow link. So once we put the value inside the quotation marks it looks a little something like this:

rel="nofollow"

Now you need to place this rel attribute along with the nofollow value inside of the opening <a> tag, after the href attribute, like this:

<p><a href="https://hollypryce.com" rel="nofollow">This is a link</a></p>

Make sure it is after the closing quotation mark of the href attribute and before the close of the opening <a> tag.

Here’s a gif to demonstrate how simple it is to do:

If your link is set to open in a new tab…

If your link is set to open in a new tab you will see that the rel attribute is already present and already contains two values; noreferrer and noopener:

Just to clarify, the noreferrer and noopener values do not make your link a nofollow link! You still need to add in the nofollow value.

To add in the nofollow value, simply add a space between noopener and the closing quotation mark and type in nofollow.

<p><a href="https://hollypryce.com" target="_blank" rel="noreferrer noopener nofollow" aria-label=" (opens in a new tab)">This is a link</a></p>

Here’s a gif to demonstrate how to do this:

I know editing HTML can be a bit nerve-wracking but once you’ve done it a couple of times you’ll find it so easy to do, and wonder why you ever used a plugin to do this in the first place!

5 | Switch back to the visual editor

When you’re done editing your HTML you can return to the visual editor.

To do this, click on the three dots at the top of the block you are editing and click Edit visually.

Alternatively, if you chose to switch the entire post or page editor into code editor mode, click the three dots in the top right-hand corner of the screen and select Visual Editor.