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.
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.
Nowadays, the latest versions of WordPress has a built-in feature that gives users the option to add a nofollow attribute to links.
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>
