How To Add Nofollow Links In WordPress Block Editor (Gutenberg)

The new WordPress Gutenberg editor has many great features that let you create beautiful posts and pages. 

Its features have helped many use WordPress more efficiently. While many users still rely on the classic editor, there are many who have made the switch and are not looking back. That’s much awesome Gutenberg is. 

But there is one thing Gutenberg cannot do. It doesn’t let you directly add a nofollow link. In Gutenberg, you’ll have to add a nofollow manually. 

You might be thinking you can use those good old nofollow plugins. Well, I’m sorry to break it to you but those plugins don’t work with the new Gutenberg block editor. 

That’s probably why you’re here looking for a solution. 

Well, in this article, I’m going to show you how to add nofollow links in WordPress block editor. 

Let’s get started. 

What is a Nofollow Link?

Nofollow is the value of rel attribute that assigned on a link to tell search engines not to follow the link. And nofollow links are those links which are tagged with rel=”nofollow”.

To understand what a nofollow link, you need to first understand what the hyperlink tag looks like in HTML. 

Here’s an example – 

<a href=”https://ultimateblocks.com’’> Ultimate Blocks </a> 

This is an example of a dofollow link. By default, all links are dofollow links.

If I make the link as nofollow link, it will look like this –

<a href=”https://ultimateblocks.com’’ rel=”nofollow”> Ultimate Blocks </a> 

So nofollow is the value of rel attribute of a link. The rel attribute tells search engine bots not to follow the link.

---

When to Add Nofollow Tag?

So, when should you add a nofollow tag to your links? 

All links in WordPress have the dofollow tag by default. This way, the search engines can crawl and index the linked pages. 

Whenever you have a dofollow link pointing from your website, you are essentially passing your website’s link juice. 

This is a good practice and makes your website more trustworthy to search engines. But what if you don’t want the link juice to pass to another website? 

In such cases, nofollow links come in handy. There are many instances when you’re linking to a page where passing the link juice is not a good idea. 

Here are three such types of links that you should nofollow:

Now, let’s take a look at how you can add nofollow links in Gutenberg. 

How To Add Nofollow Links In WordPress (Gutenberg)

In Gutenberg editor, adding nofollow links is done manually. Here’s how you can add or make any link in Gutenberg a nofollow. 

In your editor, highlight or select the text you wish to add the nofollow link to. 

Now, click on the link icon and paste your link. 

We have just added a link to your desired text. Let’s make this link nofollow. 

Click on the link settings and enable the Open in New Tab option. This isn’t really necessary but is a good practice for your external links. 

Now, click on the block settings icon and select ‘Edit as HTML’. This shows the HTML of the block. 

You’ll be able to see the hyperlink tag along with the link you added. In this tag, you’ll notice the rel-tag has been added with ‘noreferrer’ and ‘noopener’ values. 

In this rel-tag, add the nofollow value as shown below. 

That’s it. You’ve successfully added a nofollow link to your website. 

Any time you wish to add a nofollow link, you will have to edit the block in HTML and add the nofollow value in the rel attribute. You don’t have to change anything in the hyperlink tag. 

Conclusion 

Adding nofollow links in Gutenberg can get a little frustrating as it’s a lot of manual work, especially when you have to add many nofollow links. 

I’m sure this tutorial will help add nofollow links in Gutenberg easily. If you have any questions regarding the tutorial, do comment below.