Using nofollow, noreferrer and noopener rel attributes

Using nofollow, noreferrer and noopener rel attributes
Published: by

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 link tags.

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

Although the HTML link rel attribute is something very silent for some, or self controlled in the case of WordPress users, there can be times where knowing its use can be beneficial. This post will explain the significance of the nofollow, noreferrer and noopener attributes in more detail and give scenarios where their use need to be adapted.

What is a 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="theme.css">

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

<a href="" target="_blank" rel="nofollow">Behind-the-Scenes</a>

These tags and their rel attributes are most of the time automatically specified by WordPress. The <link> tag and its rel attribute is set up by the theme file(s) and sits silently in the <head></head> section of a web page while <a> tag attributes are automatically added when using the WordPress Core post/page editor (see later).

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 webmasters to tell 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 on each <a> tag:

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

Nofollow is commonly used to link to pages that does not need ranking on Google Search. By using nofollow, the impact on SEO is considerable. Using it will signal to Google and other search engines that you don’t want them to count a link as a “vote” for that URL. Google Search itselve recommends considering using the nofollow attribute for linking to untrusted content, paid links and pages that cannot be accessed by crawlers (e.g. log in pages). Because of its potential impact, it is critical that you use the nofollow attribute judiciously.

What is rel=”noreferrer”?

The rel=”noreferrer” attribute mainly specifies the browser not to pass an HTTP referrer header if the person 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.

What is rel=”noopener”?

The rel=”noopener” attribute prevents the linked page from being able to access the window.opener property and ensures it runs in a separate process. In other words it blocks the use of the window.opener Javascript object. Noopener will can actually be used as a security fix (preventing malicious links from taking control over an opened tab) and lead to no potential performance issues (linked pages running a lot of JavaScript can affect the referring page’s performance).

According Tools for Google Developers, the rel=”noreferrer” attribute has the same effect as noopener, but also prevents the referer header from being sent to the new page.

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.

Using rel=”noopener” in links prevent this from happening.

From a SEO point of view, the rel=”noopener” attribute is believed to have no negative impact on the referring or the referred web page. By using this attribute only additional security is added.

Note for WordPress users

As mentioned before, WordPress automatically controls some link rel attributes through their TinyMCE editor – the editor that helps create posts and pages. Since November 2016 (and WordPress version 4.7.4) rel=”noreferrer noopener” is automatically added to all links that is to be opened in a new window as a security measure.

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.

Although Google Developers states that noreferrer and noopener both prevents Phishing on their own, I’m not sure why WordPress still ads both these attributes to hyperlinks.

Although the majority of content is covered automatically, there are still times where WordPress won’t have an affect on the HTML code. One such example is by using the Shortcoder plugin. In these cases, the rel attribute(s) can be added manually as shown below.

Adding nofollow to links in WordPress

It is easy to manually add the nofollow, noreferrer and noopener attributes by simply inserting a rel attribute to your link’s <a> tag, for example:

<a href="" target="_blank" rel="nofollow noreferrer noopener">Behind-the-Scenes</a>

However, if you’re not comfortable creating or monitoring nofollow tags on your WordPress site, a plugin like Ultimate Nofollow. Rather than having to mess around in the HTML of your content, the plugin shows a checkbox next to each link you add so you can decide whether you want the link followed or not.

Ultimate Nofollow WordPress plugin

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

Get WP Toolset – for custom WordPress development without programming
Get WP Toolset – for custom WordPress development without programming
23 February 2020
Ad: Extend the functionality of WordPress with regards to its ability to store data and publish it on your website. More…
Using the Media Library Assistant plugin for WP
Using the Media Library Assistant plugin for WP
5 January 2019
WordPress websites with a large amount of Media content can become overwhelming to manage. With expanding libraries, images and other media can start to disappear in a sea of files which can make finding them very difficult. With the Media Library Assistant plugin for WordPress, searching and organising Media files becomes a breeze. More…
Disabling the Gutenberg Editor in WordPress 5
Disabling the Gutenberg Editor in WordPress 5
9 December 2018 | Updated 24 October 2019
Most WordPress users are probably happy with regular updates on their favourite content management website software, but for me, a striking difference starting at WordPress 5 was the Gutenberg Editor instead of the, now, Classic Editor. Without going into to much of a discussion, this post will show how disable the Gutenberg Editor. More…