How to Add Rel=Nofollow Attribute to Links in WordPress?

WordPress is the popular content management system for creating your content. Though the Gutenberg block editor is easy to use, sometime things can be difficult to find. Good example is to create a hyperlink in WordPress. It is easy to insert a link, however, many users do not know how to add additional parameters like rel=nofollow to hyperlinks. In this article we will explain how to add rel=nofollow attribute to links in WordPress.

What is Rel=Nofollow Attribute?

The entire internet works based on the links from one website to another site. Without external links connecting to other sites, both users and search engines will not be able to discover useful sites on their own. In fact, having links from high authority domains is one of the most important factors of Google search algorithm to rank a page top in search result.

However, there are situations you want to link a page but do not know the page is legitimate or not. In such a situation, you can add nofollow attribute to the link to inform search engines that you do not want the crawlers to follow the linked page. Search engines like Google and Bing will ignore the nofollow links and do not consider it while calculating the ranking. This is a win-win situation for you to connect the page at the same time not giving your domain authority to some unknown webpage.

HTML Link – rel=”nofollow”

In HTML, a hyperlink has the following syntax. When a user clicks on the anchor text “Linked Page”, it will open the page “https://site.com/page1/”

<a href="https://site.com/page1/">Linked Page</a>

As mentioned, search engine crawlers will follow the linked page “https://site.com/page1/” and consider this link when calculating the ranking of the linked page. To avoid that you can add nofollow attribute as below:

<a rel="nofollow" href="https://site.com/page1/">Linked Page</a>

Add rel=”nofollow” to Links in WordPress

Since it is possible to link text and images in WordPress, we will explain adding nofollow in text and image links.

Add Nofollow to Text Links

First, select the text and click on the link icon from the too bar that appears on the block. Alternatively, you can select the text and press “Command + K” in Mac or “Control + K” in Windows computers to insert a hyperlink in WordPress.

Add Link to Text
Add Link to Text

After that, enter or paste your external webpage URL, in our case we just enter https://wikipedia.com/ as an example. Now, select “Search engines should ignore this link (mark as nofollow)” option and click the submit icon.

Add Nofollow to Text Link
Add Nofollow to Text Link

That’s all!!! Now, you have added nofollow attribute to your text link.

Add Nofollow to Image Links

The process is same for adding nofollow attribute in image links. After selecting an image, click on the “Insert Link” icon from the tool bar. Remember to select the image and not the “Add caption” or the caption of the image which will add a text link only to the caption.

Insert Link in Image
Insert Link in Image

It will open a text box where you can type the external page link and click on the small arrow mark at the right end. On the drop down that appears, enter nofollow in “Link Rel” text box and click the submit icon.

Add Nofollow to Image Link
Add Nofollow to Image Link

Testing Nofollow in Links

There are two ways to check whether the inserted link has a rel=”nofollow” attribute or not.

Checking HTML of the Block

This is an easy option as you can do it right from the Gutenberg editor. Click on the “Options” icon showing as three vertical dots on the block’s top toolbar. Select, “Edit as HTML” option to convert the text or image block to HTML source code.

Edit as HTML
Edit as HTML

You can see the HTML hyperlink syntax with rel="nofollow" attribute is inserted to the anchor text.

View Source HTML
View Source HTML

Checking Webpage Source Code

Next option is to check the source code of the webpage. The difference in this method is that you can check the page’s code on a browser without logging into your WordPress admin dashboard. Right click on your anchor text or the linked image and select “Inspect” option. On some browsers like Safari on Mac, you need to select “Inspect Element” option.

Inspect Element in Chrome
Inspect Element in Chrome

This will open the developer tools where you can see the hyperlink has rel=”nofollow” attribute.

Check Page Source Code
Check Page Source Code

Leave a Comment