If you are involved in web development or search engine optimization (SEO), chances are that you’ve stumbled about noopener, noreferrer, and nofollow terms. What is noopener noreferrer? What about nofollow? In this post, we are explaining all of them and their implications on SEO and web security.
All three terms (noopener, noreferrer, and nofollow) are values of the rel attribute of the anchor tag in HTML. Arguably, nofollow is the most well-known among web developers and SEO
<a> tag is commonly used in HTML to define a URL/link. For example, consider the following line of code.
You can see that there is a href attribute (href coming from the Hypertext REFerence) that is used and that the value of that attribute is the web address of Point Jupiter’s homepage. What follows is the text that is displayed to you as a user. Depending on your CSS and browser, this text might be underlined, colored differently, or both.
Anchor tag can have many different attributes – one of them being rel (rel coming from RELationship). The key topic of this blog post is about noopener, noreferrer, and nofollow – all three of them being the values of rel attribute.
Again, consider the following line of code.
You can quickly notice three values of the
rel attribute. But now you can also see the target attribute with the
_blank value. This part of the code instructs the web browser to open this link in a new tab.
And this is the main reason why values like
noreferrer are used. It is also the root cause of potential security and phishing challenges.
Let’s discuss them in greater detail and their importance to SEO and security and when you should add
nofollow and what is the significance of adding
What is noopener?
When you are using
target=" _blank" value, something interesting happens. The page you are linking to gets the partial access to the linking page. It does so through the
Then, the linking page can use
window.opener.location to open the malicious website.
This can be exploited for phishing attacks. Consider the following scenario.
You create a malicious website and put viral content on it. You then share this website on social media or other sources that open external links using the
target="_blank". Facebook is the prime example here.
Unsuspecting user clicks on the link, and your webpage is opened in a new tab. At that moment, your malicious website now has control of the previous (“Facebook”) tab. Using the
window.opener.location it navigates to the new site – say, a login form emulating the Facebook login screen with a message: “Your previous Facebook session expired. Please log in again to continue using Facebook”.
Now, the user is tricked into entering his login information and falls victim to the phishing attack.
This is just a hypothetical case since Facebook is using the
rel="noopener" on its
target=" _blank" links. But you get the point.
noopener effectively tells the browser to open a link in a new tab without providing the context access to the webpage that opened the link. This is achieved by not setting the
window.opener property thus returning a null value.
Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the window.opener on the opened window (it returns
rel= "noopener" attribute and value doesn’t affect search engine optimization (SEO) in any way. It is SEO-agnostic. But it should be used in cases when you are dealing with links with target blank.
What is noreferrer?
Similar in its function to
noreferrer also prevents the newly opened site from manipulating the
window.opener object. But, additionally,
noreferrer prevents browser, when you navigate to another page, to send the referring webpage’s address.
Simply put, the
noreferrer value will hide referrer information when the link is clicked. For example, if someone posts your link on their webpage and use the
noreferrer, and then users click on that link, you will not be able to tell where did those users come from. In your analytics software (say, Google Analytics), this will appear as direct traffic, not as a referral.
noreferrer also has no effect on SEO, but it can skew the numbers in your analytics and tracking software by reporting more direct traffic.
There are also some considerations regarding affiliate marketing and
noreferrer, but those are out of the scope of this article. In general, affiliate links and affiliate programs now use approaches and techniques that are not dependant on
So, when should you use
noreferrer and when
noopener? I suggest you consider using both. The majority of modern browser support
noopener, but in some cases, if
noopener is not supported, you can use
This means that, in practical terms, it makes sense to use both of them to support older browsers as well. But the best approach would be to avoid using the
target="_blank" altogether. Unless you have an excellent reason to use it.
Check out some of the good and bad reasons for using the _blank value.
What is nofollow?
In search engine optimization, it is crucial to get many valuable and quality links linking to your page. Those are called backlinks. But not all links are created equal.
In general, when one page is linking to yours – it is passing its link juice – meaning – it gives more credibility to your site and signals to search engines that they value your website. In essence, you can consider that as an endorsement. If a high authority webpage links to you – it is endorsing you, and Google/Bing will find that as a ranking factor. Google uses the term PageRank as a measure of quantity and quality of links.
However, sometimes you don’t want to pass the link juice. This can be the case when linking your pages internally – for example – you might not want to pass your link juice from more valuable pages to those that are not as important.
rel="nofollow". Just like its cousins
nofollow is a value of
rel attribute. When you add this value, it will signal to search engines that you don’t want to pass your link juice/PageRank to the page you are linking to.
In the above line of code, we put all three values – by adding the
nofollow value, we are signaling to Google that the PageRank/link juice is not passed onto pointjupiter.com website.
When should you use nofollow?
The general rule is to use
nofollow on links in comments or on forums. User-generated content can be a source of spam and low-quality links. You don’t want your blog or a forum website to pass its value to those low-quality pages.
Also, Google and other search engines require you to use
nofollow on all sponsored links and advertisements. Same holds true for links in press releases and different kinds of paid links.
A bit about the terminology – noopener noreferrer nofollow
Sometimes you will notice that people are mentioning
noopener tag or
noreferrer tag. In other cases, you can spot the
rel noreferrer attribute. While these are understandable by most web developers, it is worth noting the following.
nofolloware not tags or attributes. They are attribute values.
relis not a tag. It is an attribute of the anchor tag.
<a>is a HTML tag. As such it has attributes (i.e.,
rel), and those attributes have values (
noopener noreferrer nofollow)
There are three fundamental values of the
rel attribute of the anchor tag. They are
rel="noopener"you use on all links opening in new tabs using the
target _blank. There are security implications if you don’t use the
noopenervalue on your links opening in new tabs. A malicious attacker can use the
window.openerobject to change the content and location of the originating page.
rel="noreferrer"can serve a similar purpose as the
noopener, especially in the older browsers. Hence, it makes sense to use them both. Additionally,
noreferrercan affect your analytics and report traffic as direct instead of referral.
rel="nofollow"will inform search engines not to pass the link juice to the linked page, and it will not pass PageRank. You can consider it as a value which is used when you want to link to some another page but without “endorsing” it. It is the only
relvalue on this list with a tangible effect on SEO efforts.