What Does Noopener Noreferrer Mean in SEO and Link Building?
The attributes noopener and noreferrer are two HTML attributes sometimes applied to external links. The attribute is added automatically in most content management systems without any need for the user to do it manually.
Noopener is an added security feature. If indeed an attempt is made to look up the window object in the originating tab, such attempt will lack existence in the source tab. The user agent, however, is instructed not to send an HTTP referrer header when the rel attribute is set to `noreferrer`. So the referrer cannot exist to inform the destination site.
Let us see briefly the actual relation between `noopener` and `noreferrer`, how the two work, their effect on SEO, link-building opportunities customers might gain from, so one interested in learning more can go on their own and decide which way they want to take for their site.
What Does rel=”noopener noreferrer” Mean?
This set of attributes most likely is applied to a link with a target=”_blank” that opens its content in a new tab.
The noopener attribute prevents the two tabs from interacting, thus protecting the site against reverse content where one malicious party has taken advantage of the source tab through some kind of malicious means.
It prevents the referral information from being sent, that is, it prevents the destination site’s knowledge via your link of you, including the URL of your webpage.
Every link must be protected against any malignant acts ensuing from introduction of new-tab links, in case you want to give out referral information for tracking or affiliate marketing purposes.
When Should You Use rel=”noopener noreferrer”?
These happen to have been dropped rel=”noopener noreferrer” on most vending link setups, mostly with target=”_blank.”
- Security Practices for External Links Opening in New Tab – When linking to an external site, privacy and security are major concerns.
- Security – Adding noopener stops a new tab from being able to access the window object of your original page.
- In defense against reverse tabnabbing where malware may attempt to seize control of your page or steal your data.
- Privacy – Adding noreferrer blocks sending of the HTTP referrer header by the browser.
- In other words, your site will be cloaked from stating which page visitors really came from; thereby, it will protect your traffic data, thus uphold your users’ privacy.
- SEO or Link Building – If tracking, analytics, or partnership-related referrals are to be provided, the general course of action is to omit these attributes.
Example:
<a href=”https://www.bumpdots.com/” target=”_blank” rel=”noopener noreferrer”>Visit BumpDots</a>
Advantages and Disadvantages of noopener noreferrer
Advantages and disadvantages of closing with rel=”noopener noreferrer” in external links for best SEO and Link-building strategies :
Advantages
- Concerns with a strong security level brought by the introduction of noopener in that no new tab can ever access any information about the original page in an attempt to protect the site from reverse tabnabbing and malicious scripts.
- Privacy concern– If you add noreferrer, then it will block referral data that makes the destination site unaware of where exactly behind your traffic is.
- Safer link building – These attributes make your external links safer and people more confident to promote your site.
- Never harm SEO – Optimization-wise, the use of noopener and noreferrer will not negatively affect the SEO value of Dofollow links.
- Supported browsers – Majority of modern browsers have full support for these two attributes and thus standardize link behavior.
Disadvantages
- Loss of referral data – The referral data will be lost through the use of the noreferrer when referral data is required for analytic purposes, partnerships or affiliate marketing.
- Slightly more HTML – Well, yes, they do increase the amount of markup a bit, and that could be annoying.
- Sometimes Unnecessary – Applicable to some internal links where a security/privacy concern is not at hand and therefore not needed.
How Does Noopener Noreferrer Work?
The rel=”noopener noreferrer” attribute specifies how to handle an external link when opened in the new tab (target=”_blank”). Such attributes should never be applied together, as they describe very different concerns.
How noopener Works
- Whenever a link opens in a new tab, it can generally grab hold of the window object for the original tab itself.
- Hence, said new tab may manipulate or redirect the original page, or steal sensitive data-a functionality called reverse tabnabbing.
- By specifying noopener, you instruct the browser:
“Do not permit the new tab to access my original page.”
This blocked any interaction between the new tab and your site, hence, safeguarding your site from malicious actions.
How noreferrer Works
- Default behavior occurs when a visitor clicks a link, and the browser sends HTTP generic header to the final site.
- That HTTP header includes the URL of your page.
Noreferrer stops the browser from sending referrer data.
This has two effects:
- The destination site cannot see which page visitors came from.
- It prevents the tracking via referral data, hence protects your analytics so that are others are used.
How They Work Together
Using both rel=”noopener noreferrer” allows your browser to:
- Keep your site safe from attacks (noopener)
- Hide referral information from the linked site (noreferrer)
This is the best of both worlds and closely attacks and protects privacy of linking heads to external links opening in a new tab,
Example:
<a href=”https://www.bumpdots.com/” target=”_blank” rel=”noopener noreferrer”>Visit BumpDots</a>
Impact of Noopener and Noreferrer on Link Building
The rel=”noopener noreferrer” attribute is much needed on any external links, but many are usually asking if it ever impedes the value of SEO or link authority. Let’s try and untangle it for you.
1. The Effect on Link Authority
Going by actual SEO implementation, the rel=”noopener noreferrer” can never be detrimental to an SEO effect. For purposes of link authority, it works willingly and dutifully pass the link authority on dofollow links to destinations, thus making your link-building really effective in every aspect imaginable. At the very same time, the noopener protects your website by preventing the freshly opened tab from reaching the first page itself as a way of defending against reverse tabnabbing.
2. Affiliate Links and Sponsored Content
If we are going to digress using our link in affiliate marketing, then there’s the noreferrer for user and referral data protection. In combination with nofollow, it will signal Google the sponsored content, keeping link authority intact. UTM parameters would still track hence sponsored wouldn’t be affected.
3. How To Add These Attributes In Bulk
If your site is loaded with external links, adding rel=”noopener noreferrer” manually will be a nightmare. Any CMS should have plugins or built-in functions to automatically do that, or a developer can take the Javascript route or just go all the way and put the attributes onto the HTML templates to be used everywhere. Always think twice whenever you are blocking referral data when using noreferrer.
Does Using rel=’noopener noreferrer’ Affect Your SEO?
The use of noopener or noreferrer to external links has never negatively affected SEO in any way. You can add those attributes to your website with no fear of penalty or loss of link authority with regard to search engines.
The concern arises from the fact that, almost suddenly, the tag looks like an offshoot of rel=”nofollow,” a tag that surely does lessen the SEO value for any given link. However, unlike nofollow, noopener and noreferrer do not interfere in the graceful death of link juice across the Web by the breathing Google. So just because a website with you linked uses these tags in no way hampers the performance of the whole world.
The other usual issue is that the nature of code is stated cleanly. Developers often prefer to code less and cleaner HTML, hoping that Google would somehow understand and index pages easily. Even if the bit of HTML of your links is increased due to these additions, this will definitely not be a problem-many of the highest-ranking sites use these attributes by the truckload, and search engines have no difficulty processing them.
Conclusion
Simply put, “noopener” and “noreferrer” are HTML attributes to provide an external link with a new level of security and privacy, such as any link that opens in a new tab. Noopener stops the newly opened tab from reaching your original page while protecting against malicious attacks such as reverse tabnabbing. Meanwhile, noreferrer keeps referral information under wraps, thus maintaining user privacy.
The SEO and link-building importance of these attributes is pretty enormous. They will not strip away link authority, and thus affect the site’s SEO in a negative light, so they are safe, effective, and highly recommended to be added to external links.
FAQs
Should I use noopener noreferrer?
Yes, of course, this is good practice for every external link that opens in a new tab-the security of your site will be enhanced because the new tab cannot interact with it, and it also hides referral data, thereby keeping information about the visit private.
What is target=”_blank” and rel=”noopener”?
This means that the link will open in a new browser tab with the “target=_blank” while “noopener” ensures that the newly opened tab cannot get access to or manipulate the original page. The site is protected against the malignant manipulation, including reverse tabnabbing.
Can these be added automatically to WordPress?
Yes! Most WordPress plugins add rel=”noopener noreferrer” to all external links, or at least most modern themes do so by default.
Are search engines treating links with noopener noreferrer differently?
No; search engines like Google do crawl and index links normally. These are dofollow links, and as such, they will confer SEO value and will not hinder your link-building strategy.
Are noopener and noreferrer needed for mobile?
Yes, as these attributes work on all modern browsers including mobile browsers that ensure your hardworking users receive the same treatment from the browser regarding your site’s security and privacy.