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
<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
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 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 (
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”?
- 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
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.
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.
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>