open

The difference among noopener, noreferrer and nofollow

Nov, 20 2018
|
Share: -

The difference among noopener, noreferrer and nofollow

With the upgradation of WordPress to the new version 4.7.4 or even a newer one, you must have noticed that a new tag rel="noopener noreferrer" alongside the target="_blank" tag in the HTML editor is appearing. This tag is automatically added to all the external and internal links that are set to open in a new tab (target_blank) on the website.

Like any other developer, you must also be concerned about what this “noopener”, “noreferrer” or “noopener noreferrer” tag actually does and whether it affects your websites negatively in any way or not. You can take help of a website designing company to make it clear that is it necessary to use noopener and noreferrer tags.

Well, in this post we will discuss about : what is rel="noopener", rel=”noreferrer” or rel=”noopener noreferrer” in WordPress. Later on we will discuss about rel=”nofollow” tag also. Let us now start talking about these three tags:

● rel= ”noopener”

● rel= ”noreferrer”

● rel= ”nofollow”

1. rel= “noopener”: When you link your page to another page using target="_blank", then the new page runs on the same process as your page. If the new page is executing some expensive form of JavaScript, then it may suffer your page's performance too. On top of this, target="_blank" may also be proved security vulnerable sometimes as the new page has access to your window object via window.opener, and it can sometimes navigate your page to a different URL which is using the object “window.opener.location = newURL”.

However, when you add a rel="noopener" attribute into your coding, it prevents the new page from being able to access the window.opener property and will make it run in a separate process. noopener tag works as a security fix which prevents malicious links to take control over an opened tab. Generally, window.opener JavaScript object is used to control a parent window (current tab you are working on) using a child window (the new tab opened).

<a href="https://mystore.com" target="_blank" rel="noopener">...</a>

Image result for noopener tag example

Hackers can use this feature for reaching to the user’s currently opened website with a fake website and can steal information, such as login details and payment details. To prevent this, rel="noopener" is the tag that blocks the use of the JavaScript object called window.opener. That means if window.opener will not work, then a tab would not be able to control another tab. 

2. rel= “noreferrer”: noreferrer is one of the newest link types added in HTML5 that is used to hide the source of the traffic going from the website towards another website. If we define it technically, we can say that if the user follows the hyperlink, then it stops the browser from sending an HTTP referrer header.

If you add an attribute called rel=noreferrer, then it will ensure that no referrer information will be leaked. If there is no information in the header, then no analytical tool will be able to track it. The rel="noreferrer" attribute has the same effect as the rel= “noopener” attribute, but it will also prevent the Referrer header from being sent to the new page. A link with the noreferrer tag looks like below:

<a href="http://www.mystore.com" rel="noreferrer">Click here for more info</a>

If someone arrives at your site from a link using rel= “noeferrer” tag on their site, then your analytics data will not let you see who referred that link. Instead, it will show it as direct traffic in your report. This has become a big problem for website owners because it not only messes up the incoming traffic data, but it also makes it impossible to track how users move through your site. As one of the best companies of Website Designing and Developement in Faridabad, we know the essence of using noopener and noreferre attributes.

Google Analytics no referrer

rel= “noopener noreferrer”: This tag when combined both the noopener and noreferrer attribute then it basically means that no referrer information should be passed to the website being linked to because of noreferrer tag and also prevents the newly opened page from controlling the page that delivered the traffic.

There is something called an http "referrer header" attribute in the code of your website that is used to add information about your visitor, i.e. browser or device you are working on and location you are working from, etc. to pass through to the page that visitor has been clicked. However, this new tag “noopener noreferrer” prohibits that information from being passed to the referral page.

What Inspired This Change:

There was a un-protection found in links using “target=”_blank” that means a reverse tab-napping. This unsafety was happening if you were using “target=”blank” in the code of your link.  It enables the ability of the newly opened tab to control the page it came from essentially.

So this basically means that the page could then use JavaScript or can make your link to go to some phishing website. Because the page is already opened with some other user, the actual user of that clicked the link would never notice what is going on his backside.

Noopener and noreferrer tags were the initiatives taken by WordPress towards stopping the vulnerability to improve their users’ security. Reverse Tab-nabbing is an activity of phishing attack where the attacker replaces the trusted page tab with a malicious content page.

Let me make it simple for you: When some user opens a new tab, the person doing phishing detects the referral URL via window.opener and then injects a new url using an attribute window.opener.location = newURL.

This way no one has a clue of falling into phishing attack as they have reached the site from a trusted or reliable website source.Using rel=”noopener” or rel=”noreferrer” or rel=”noopener noreferrer stops the person doing phishing attack. It restricts the phisher to gain information about the source link as well as the important data associated with the source of the link.

3. rel=”nofollow”: When rel=”nofollow” tag is added in the source code of a webpage, it asks the search engines not to follow a particular link. It does not allow it to pass the authority to the specific website. The main advantage of using this attribute is to control the spam attack. There may be times, when you do not have control over what people publish on your websites, for example some blog comments and some kind of forum posting. If you are not using nofollow tag then indirectly you are inviting the spammers that will ultimately make Google to penalize your site.

Rel=”nofollow” simply means that you are not endorsing the page to which you are linking in any way and you are linking to that particular site just for commercial gain. We are the best SEO service providers in delhi and can provide you the knowledge of nofollow tag as how much it affects your SEO and how frequent you should use this tag into your code.

Nofollow tag is basically used to prevent link juices from passing to an administrative page of a website or to an advertiser’s URL. Unlike noopener and noreferrer, nofollow is used at the individual link level and looks like the following:

<a href="login.php" rel="nofollow">log in</a>

Related image

Apart from that we just don’t use this tag for paid and administrative links but it can be used to restrict Page Rank which can be passed through links in blog comments or guest posts. Nofollow attribute can also be used for the website having reputation and credibility issue.

How do noopener, noreferrer & nofollow affect SEO:

If you are concerned about your search engine optimization efforts then nothing to worry about in case of rel=”noopener” and rel=”noreferrer" because these two tags do not have a direct impact on your search engine optimization efforts. Rel=”nofollow” instead have an impact on SEO. Let us discuss the impacts in parts:

a) Impact of noopener & noreferrer on SEO: Many of the developers think that just like nofollow, noopener and noreferrer have an impact on SEO but the fact is that none of the search engines are concerned with the noopener & noreferrer tags same could be said for SEO. These tags simply deal with the security aspect of a link, but not with the SEO part.

In actual, rel="noopener" attribute is just an instruction for the browser to stop the use of a Javascript object called as window.opener, which is never concerned with the search engines. And the tag rel="noreferrer" prevents the link from knowing from where it is actually coming so this tag also operates on analytics or browser level not on the search engines.

Using noreferrer can create a problem in terms of tracking the traffic coming towards the websiteas where the traffic is coming from, but it will not impact the ability of a search engine to crawl, index or rank a webpage.

b) Impact of nofollow on SEO: Using rel=”nofollow” can have a big impact on SEO as this tag impacts Google’s ability to crawl and index the links and also to pass page rank. Nofollow ensures that the link will not count as a recommendation for another page and also it will not pass Pagerank or any other kind of ranking signal.

To Conclude:

We hope this article helped you to understand the difference and functions of the 3 attributes: noopener, noreferrer and nofollow. There is no need to get afraid of the rel="noopener" and rel-“noreferrer" tags as these are the part of a step taken forward into the security of your the visitors of your website.

Generally many webmasters will not need to deal with the noferrer tag, unless and until they want to keep something hidden. On the other hand, nofollow attribure will prove useful to most website owners at one time or another, especially for restricting the transfer of PageRank on some paid links.

Author Bio

The author is SEO Expert, working with Best SEO Company in Delhi. He helps in building value-conscious traffic on several businesses sites. In his articles, he has given tremendous ideas related to SEO and how to increase the user base, and boost web sales and customer satisfaction. There are thousands of tricks and techniques he follows. Get in touch with him @ info@jeewangarg.com

0 Reviews


Contact Us Drop Us a Message

Office Address

#987, Sector- 37
Near Mathura Road, Faridabad
Haryana 121003 (INDIA)

Phone

0129-4005987

+91-9350809090
+91-9250809090

Email

info@jeewangarg.com

upsjeewan@gmail.com