Using nofollow, noreferrer and noopener rel attributes

Using nofollow, noreferrer and noopener rel attributes
Published: by
Last updated:

HTML offers various ways for search engines and web browsers to better understand data on a web page. One such way is by using nofollow, noreferrer and noopener in the link tags.

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

Knowing the HTML link rel attribute can be beneficial in some cases. This post will explain the nofollow, noreferrer and noopener attributes in more detail and give scenarios where their use need to be considered and adopted.

What is an HTML link rel attribute?

To start off, a little knowledge of rel attributes might come in handy. Rel attributes are used inside HTML <link> and <a> tags to specify the relationship between the current document and another (linked) document. Remember that a web page is basically an HTML document.

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

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

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

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

<link> tags and its rel attributes are mostly set up by plugins and/or (child) theme file(s) and sit silently inside the <head></head> section of a web page.

<a> tags, on the other hand, are used in various sections inside the <body></body> of a web page. In WordPress, the content area will contain most of the hyperlinks.

Because this post is about nofollow, noreferrer and noopener rel attributes, we will not be mentioning the <link> tags and their rel attributes any further.

What is rel=”nofollow”?

The rel=”nofollow” attribute provides a way for web pages to show search engines not to follow that link. This rel attribute 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, the impact on SEO is considerable. Using it will signal to Google Search, and other search engines, that you don’t want them to count your link as a ‘vote’ for that URL. Google Search themselves (strongly) recommends considering using the nofollow attribute 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 you use the nofollow attribute judiciously.

In the latest versions of WordPress, options for outgoing links now include a tick box for users to insert the nofollow attribute. More on this later…

What is rel=”noreferrer”?

The rel=”noreferrer” attribute 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 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 automatically generated for all links that are to be opened in a new window.

What is rel=”noopener”?

The rel=”noopener” attribute 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

The noopener attribute can actually be used 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 will also actually prevent a web page from wasting time by loading unnecessary JavaScript from linked pages.

In the latest versions of WordPress, the noopener attribute will be automatically generated 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. 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 to links that opens in a new window.

Hyperlink rel attributes in WordPress

As mentioned earlier, WordPress automatically controls some link rel attributes through their TinyMCE editor. TinyMCE is the editor that helps to create posts and pages. Nowadays, WordPress also added options to have manual control over the nofollow attribute.

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

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

Nowadays, the latest versions of WordPress has a built-in feature that gives users the option to add a nofollow attribute to links.

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.

Note that not all links on a WordPress website is 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 of plugins or theme files, the rel attributes need to be set manually inside the code.

To manually add the nofollow, noreferrer and noopener attributes, simply insert the rel attribute to your link’s <a> tag as follows:

<a href="https://www.behind-the-scenes.net/" target="_blank" rel="nofollow noreferrer noopener">Behind the Scenes</a>
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 & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a knob. Keep it constructive and polite.

Comment via Disqus

Disqus is a worldwide comment hosting service for web sites and online communities. This secure platform ensures a pleasant commenting environment which is manageable from one account. Use the Login button to sign up.

More website development related posts

Improve your skills through Skillshare – get first 2 months for free
Improve your skills through Skillshare – get first 2 months for free
19 October 2020
Ad: Join the Skillshare online learning community with videos on programming, website development, art, designs and many more. Try Skillshare for free for two months now! More…