How to Add Nofollow to Links in WordPress Gutenberg Editor?

WordPress introduced Gutenberg editor with the release of version 5.0. Though the idea was to improve the editing experience, it didn’t work well. Certain things are either changed or become more difficult with Gutenberg compared to the previous classic editor. One such example is adding nofollow value to hyperlinks. In this article, we will explain how to add nofollow to links in WordPress Gutenberg editor.

Why You Need Nofollow Value in Links?

There are many situations you want to link an external webpage on your content. Adding links of reputed and reliable websites is a good way to make your content appealing to your readers. For example, when you want to mention a plugin, you can give a link to the plugin page in WordPress plugin repository.

Search engines like Google will consider the number of external links (backlinks) to rank the popularity of a webpage. However, you can use nofollow in the links to inform Google not to consider the link when calculating the search results. Below are some valid reasons you want to add nofollow value to hyperlinks:

Paid links – when you get money to publish a link on your content, ensure to add nofollow to it.
Unreliable webpage – you wanted to link to an unreliable webpage.
Login / register pages – you can add nofollow or noindex values to login / registration / shopping cart / checkout and other user account related webpages.

Check out the Google webmasters support page to get more details of using nofollow link.

Add Nofollow Attribute in Gutenberg Editor

Follow the below instructions to add nofollow value to hyperlinks in WordPress Gutenberg editor.

When you are on the post or page editor, click inside a block and highlight the text you want to add a link.
Click on the hyperlink icon and insert an external link or type a keyword to choose webpage to link from your site.

After adding a link, click on the arrow ⮐ key to apply the link to the selected content. We also recommend you to setup the nofollow link to open in a new tab. You can do this by clicking the three dots button of the link element and enable “Open in New Tab” option.

Now, click on the three dots settings button for the block as shown in the below picture.

Choose “Edit as HTML” option. Now, the block will show the HTML content and locate the anchor tag (HTML a tag).
You will see the rel attribute with noreferrer and noopener values. Simply add nofollow values to the same rel attribute.

Add Nofollow to Text Links in Gutenberg Editor

You will not see rel attribute when you haven’t enabled the link to open in a new tab. In such case, you can manually add rel=”nofollow” attribute to the anchor tag.
After adding nofollow, click on the three dots button and choose “Edit visually” option to go back to the normal editor view.

Adding Nofollow in Image Links

You can follow the similar process to add nofollow value to image links. However, Gutenberg has an option to easily add nofollow for image links.

Click on the image and select the link under “Link To” option of the block’s link settings.
You can choose attachment page, media file or custom URL option for linking to an image.
Enter the URL if you have chosen “Custom URL” option.
Under “Link Rel” text box, type “nofollow”.
Now, you have add a nofollow value to the image link in Gutenberg.

Adding Nofollow to Image Links in Gutenberg

SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.

Adding Multiple Nofollow Links

If you want to add multiple nofollow links a single article with different block, we suggest doing in from the code editor.

Click on the three dots settings button available on top right corner of the editor (just below your profile image).
Select “Code Editor” option to change the view to code editor.

Now add rel=”nofollow” attributes to the links you want.
After adding links, click on the same three dots button and choose “Visual Editor” option to change editor mode. Alternatively, click “Exit Code Editor” button to go back the visual mode.

Using Custom HTML Element

The other option to insert nofollow value to hyperlinks is to use “Custom HTML” block.

Select new block and add a “Custom HTML” block under “Formatting” blocks.

Type or paste your code with nofollow link like below. In this manner, you can prepare the content outside the editor and easily paste without switching the editor modes.

Adding Nofollow Attribute in Classic Editor

Though Gutenberg is part of WordPress core, there are 4 million+ active installations of Classic Editor plugin. This is a clear indication that people are not really ready to move on to Gutenberg. If you still use the old classic editor, here is how to insert nofollow to the links.

First install and activate “Classic Editor” plugin, if you didn’t have it on your site.

Go to “Settings > Writing” and select “Yes” option for “Allow users to switch editors”. Select the “Default editors for all users” as “Classic Editor”.

Scroll down and click on “Save Changes” button.
Now go to “Posts > All Posts”, you will see two options for each post to edit one with classic editor and other with Gutenberg editor.

Open the post or page you want to edit with classic editor. Or create a new post with classic editor.
Add the hyperlink to the selected text or image.
Click on the “Text” editor option and add rel=”follow” attribute as explained above.
After adding the attribute, change the editor back to “Visual” mode.