Nofollow, noreferrer and noopener

Nofollow, noreferrer and noopener rel attribute values
Published: by
Last updated:
Categories
WordPress

HTML has various ways for search engines and web browsers to understand data. Here we show how to use nofollow, noreferrer and noopener as rel attribute values.

This is an ongoing post. Please suggest corrections, explanations, etc. in the comment section at the bottom of this page.

Introduction

The HTML rel attribute is used to specify the relationship between documents. Using its values correctly can be hugely beneficial in some cases.

This post will explain the HTML nofollow, noreferrer and noopener rel attribute values in more detail and give scenarios where their use need to be considered and adopted. Some related WordPress functionality is also mentioned.

The HTML link rel attribute

Rel attributes are used inside HTML <link> and <a> tags to specify the relationship between the current document and another (linked) document.

A common example of using the <link> tag rel attribute would be:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

A common example of using the <a> tag (aka hyperlink) rel attribute would be:

<a href="https://behind-the-scenes.net/" rel="noopener" target="_blank">Behind the Scenes</a>

In WordPress, <link> tags and their rel attributes are mostly set up by WordPress Core, plugins and/or (child) theme files and sit silently inside the <head></head> section of a web page.

<a> tags, on the other hand, are used to create hyperlinks and are usually used inside the <body></body> section of a web page. They are usually added manually with an HTML editor. In WordPress, the content area will contain most of the hyperlinks.

Because this post is about nofollow, noreferrer and noopener rel attribute values, <link> tags won’t be discussed further.

What is rel=”nofollow”?

The rel=”nofollow” attribute value provides a way for web pages to show search engines not to follow that link. This rel attribute value can either be used in the <meta> tag section to prevent all links on the page from being followed:

<meta name="robots" content="nofollow" />

or, alternatively, individually in each <a> tag:

<a href="signin.php" rel="nofollow">sign in</a>

Nofollow is commonly used to link to web pages that do not need ranking on Google Search. It can be used with links opening in the same window and/or links opening in a new window (target="_blank").

By using the nofollow attribute value, the impact on SEO is considerable. Using it will signal to Google Search, and other search engines, that the link should not be counted as a ‘vote’ for that URL.

Google Search themselves (strongly) recommends considering using the nofollow attribute value for linking to untrusted content, paid links and web pages that cannot be accessed by crawlers (e.g. login pages). Because of its potential impact, it is critical that the nofollow attribute value is used judiciously.

In the latest versions of WordPress, options for outgoing links now include a tick box for users to insert the nofollow as rel attribute.

What is rel=”noreferrer”?

The rel=”noreferrer” attribute value mainly specifies the browser not to pass an HTTP referrer header if a user clicks the hyperlink. More specifically, it indicates that no referrer information (e.g. Browser, OS, region, etc.) is to be passed on following the link.

The rel=”noreferrer” attribute should not be confused with rel=”nofollow”. Because it acts on a browser level, noreferrer has no impact on SEO.

According to some experts, the noreferrer attribute value will affect the composition of Google Analytics’ traffic source data, but it is also believed that Google still gathers some referring information.

In the latest versions of WordPress, the noreferrer attribute will be generated automatically for all links that are to be opened in a new window.

What is rel=”noopener”?

The rel=”noopener” attribute value prevents the linked page from being able to access the window.opener property and ensures that it runs in a separate process. In other words, it blocks the use of the window.opener JavaScript object.

The window.opener JavaScript object may affect the referring web page in one of two ways:

  • Firstly, it can create a portal for Phishing attacks

When noopener is used, it actually acts as a security fix that prevents malicious links from taking control over an opened tab.

  • Secondly, it can cause a decrease in page loading speed performance

The noopener attribute value will also prevent a web page from wasting time by loading unnecessary JavaScript from linked pages.

In the latest versions of WordPress, the noopener attribute value will be generated automatically for all links that are to be opened in a new window.

The window.opener Javascript object

The window.opener Javascript object is used to control a parent window using a child window. When target="_blank" is used for hyperlinks, partial access to the previous page via the window.opener object is gained.

Because the newly opened window could possibly change the window.opener.location to some other page (targeted phishing page), this may lead to a very simple Phishing attack.

By using this feature, hackers can switch a user’s currently opened website with a fake one and steal information.

Google Tools for web developers

According to Tools for Google Developers, the rel=”noreferrer” attribute has the same effect as the noopener attribute, but also prevents the referer header from being sent to the new page. They recommend adding either the noopener or the noreferrer attribute values to links that opens in a new window.

Hyperlink rel attribute values in WordPress

WordPress will control some link rel attributes and attribute values automatically through their TinyMCE editor.

Since November 2016 (and WordPress version 4.7.4) the WordPress TinyMCE adds rel=”noreferrer noopener” to all links that are to be opened in a new window. This is done as an automatic security measure.

Using nofollow, noreferrer and noopener rel attributes
An example where WordPress added the rel=”noopener noreferrer” attribute values to a hyperlink. This is only done when the target=”_blank” tag is used.

Adding nofollow rel attribute values to WordPress

The nofollow rel attribute value can be added to WordPress links by either entering them manually (e.g. by using the template files) or by using a plugin.

As an example, the Title and Nofollow For Links plugin will add the option to add nofollow to all links that are to be opened in a new window.

WordPress Insert/edit link attribute options

This feature shows a checkbox next to each link that is created so the user can decide whether the link should be followed or not. In this example, the Add rel="sponsored" to link option is added by another plugin.

Note that not all links on a WordPress website are managed by the TinyMCE editor. Although the majority of links are covered automatically, there are still times where WordPress/TinyMCE won’t have an effect.

When links are added, for example, by editing the HTML/JavaScript/PHP or plugins or theme files, the rel attribute values need to be set manually inside the code.

Nofollow, noreferrer and noopener can be inserted into the rel attributes as follows:

<a href="https://behind-the-scenes.net/" target="_blank" rel="nofollow noreferrer noopener">Behind the Scenes</a>

Conclusion

The HTML rel attribute is used to specify the relationship between documents. If the nofollow, noreferrer and noopener rel attribute values are used correctly, SEO, security and page speed can be improved.

WordPress has built-in functionality to add the most important rel attribute values automatically.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & discuss

Your comment is important, but don't be a knob. Keep it constructive and polite.

One thought on “Nofollow, noreferrer and noopener”

  1. Hello Renier,
    thanks for the post. Really intresting!

    I have a little problem in this theme, and I am looking for a solution to fix it, but I couldn’t find anything usefull.

    I made a security test of my homepage. One of the problem was to include ‘noreferrer’ value to an image link ‘rel’ attribute. But the link is inside of an instagram plugin, and there is no possibility in its settings to do this. The plugin is implemented in my homepage with a short code. Is it somehow possible to add this value in css syle sheet? Or any other solution?

    The output should looking like this:
    a class=”class-name” rel=””noreferrer” href=”link”>image

    Thanks for your help in advance. Best rgds Maria

Leave a Reply

Your email address will not be published. Required fields are marked *

More WordPress development related posts