In the intricate world of web development and SEO, understanding the nuances of HTML attributes can make a significant difference. The noopener noreferrer tags are a prime example. While they may seem minor, their role in website security, performance, and analytics is substantial.
This guide will clarify the purpose of these link attributes, explain their function, and detail their impact on search engine optimisation. We will help you navigate these often-misunderstood tags to ensure your website is both secure and effective.
Understanding rel=”noopener noreferrer”
Noopener noreferrer is an HTML attribute used in links. Two distinct instructions to the browser are added each time you add this attribute to an <a> tag. It is typically applied to links that open in a new tab (target=”_blank”).
Each noopener and noreferrer serves a definite purpose. Such a function is primarily centered on security and privacy. The combined use of noopener noreferrer is a common practice, particularly in content management systems like WordPress, to address potential vulnerabilities and manage how information is passed between web pages.
The Purpose Of rel=”noopener”
The noopener attribute is a security measure. When a link opens in a new tab, the new page can sometimes access the window object of the original page. This can be exploited through a form of phishing known as tabnabbing. In a tabnabbing attack, the malicious new page can change the original page’s URL to a fake login page.
The user, thinking they’re on a trusted site, might enter their credentials, which are then stolen. By adding rel=”noopener”, you prevent this security risk. It ensures the new page cannot access or manipulate the original page, effectively severing the connection between the two.
This makes noopener a simple yet powerful tool for safeguarding your users from potential security exploits when navigating away from your site.
The Role Of Noreferrer
The noreferrer attribute deals with data management and privacy. When you click a link and land on a new website, the browser sends information about where you came from, which is the HTTP referrer header.
The new website’s analytics can use this information to see that your site was the source of the traffic. Using rel=”noreferrer” tells the browser not to send this information.
As a result, the visit to the new site will not be logged as “referral traffic” in their analytics, but rather as “direct traffic.” This attribute is useful for sites that wish to maintain a degree of privacy, preventing the linked-to site from knowing its traffic source. It is important to note that while this affects analytics, it does not prevent a link from functioning or passing on authority.
How These Attributes Impact SEO
A common question for anyone focused on their site’s performance is how the noopener noreferrer attributes affect SEO. The direct answer is simple: they have no negative impact on your search engine rankings. Search engines like Google have publicly confirmed that these tags are not a ranking factor.
Security is the purpose of the noopener and functions to prevent a type of phishing attack known as tabnabbing. This attribute’s presence or absence does not influence how search engines crawl or index a page, nor does it alter how link equity is passed.
No Direct Negative SEO Impact
These attributes do not harm your search engine rankings. Google has confirmed they are not a ranking factor.
Noopener Is A Security Feature
Tabnabbing is prevented through noopener – a security feature. It does not affect how search engines crawl, index, or pass link equity.
Noreferrer Passes Link Equity
Unlike the nofollow tag, noreferrer does not stop link authority from being passed. The primary function of noreferrer is to prevent the browser from sending referral information.
Indirect SEO Benefits
Using these tags is considered a best practice for web security. Creating a safer user experience can lead to better user engagement, lower bounce rates, and longer session times, which are positive signals to search engines.
Impact On Analytics
The noreferrer impacts your traffic analytics. Visits from links with this attribute will appear as “Direct Traffic” instead of “Referral,” which can make it harder to analyse traffic sources without knowing what to look for.
Affiliate Links
Noreferrer is generally not an issue for affiliate links because most programs use tracking IDs instead of relying on referral information.
Ultimately, you can improve a site’s overall quality and a user’s trust, both of which are important for noreferrer noopener SEO. The combined benefits of enhanced security and user experience are what make noreferrer noopener SEO a topic worth considering.
Technical Implementation: Adding And Testing The Tags
Add the attribute directly to your HTML links to implement noopener noreferrer on your website. For any link that you want to open in a new tab, the standard practice is to include target=”_blank”. Adding the rel attribute is a simple extension of this.
An HTML link with both attributes looks like this:
<a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>Visit our partner site</a>
When working with JavaScript, you can add these attributes dynamically to links on your page. For instance, you might use code that identifies all external links and automatically applies the security tags.
You can do this with the set Attribute method, ensuring every link opening a new tab has the correct protection. After adding the attributes, it is wise to verify they are working. Do this using your browser’s developer tools.
By inspecting a link on your page, you can check its HTML to see if the rel=”noopener noreferrer” attribute is present. Furthermore, if you click the link and check the Network tab in the developer tools of the linked page, you can analyse the request headers to confirm that no referrer information was sent.
This simple testing process ensures your implementation is correct and provides the intended security and privacy benefits.
Noreferrer And The Analytics Of Direct Traffic
The noreferrer attribute has a notable impact on how traffic is reported in web analytics platforms like Google Analytics. When a user clicks a link on your site that has the rel=”noreferrer” tag, the browser does not pass any information to the destination site about where the visitor came from.
For a webmaster on the destination site, this means the traffic won’t be identified as “Referral Traffic” from your domain. Instead, the visit will be categorised as “Direct Traffic.” This happens because the browser sends no referrer header, making it appear as though the user typed the URL directly into their address bar.
This is a crucial distinction to recognise when you analyse your traffic reports. While it does not affect your own site’s analytics, it changes how others perceive the traffic you send them. Knowing this helps you correctly interpret your data and understand why some referral sources might seem underrepresented in your reports.
Affiliate Links: Why Noreferrer Is Not A Problem
A frequent concern among webmasters is whether using rel=”noreferrer” on a link to an affiliate product will break their tracking and cost them commissions. This is a valid concern, but in most cases, it is unnecessary. The vast majority of modern affiliate programs do not rely on the HTTP referrer header to credit you with a sale.
Instead, they use a unique tracking ID that is embedded directly into the link itself. This tracking ID is what the affiliate network uses to recognise that the click or sale originated from your site. For example, an affiliate link will often look like this: https://exampleaffiliate.com/product/?ref=your-unique-id.
Because the noreferrer attribute does not remove this query string parameter, the affiliate program will still receive your unique ID and credit you accordingly. Therefore, you can safely use noopener noreferrer on your affiliate links to improve security and privacy without risking your commissions.
Noreferrer Vs. Nofollow: A Clear Comparison
A clear understanding of the difference between noreferrer and nofollow is essential for proper SEO. Both are rel attributes. Nonetheless, they serve entirely different purposes and operate on separate principles.
rel=”noreferrer”
This attribute is a browser-level directive. It exists to prevent the browser from sending referral information to the destination site. It is a security and privacy feature, and it does not affect search engine behavior or how link authority is passed. A link with noreferrer still contributes to the destination site’s link profile.
rel=”nofollow”
This attribute is a search engine directive. Its work is to tell search engines that you do not promote the linked page. Moreover, you do not want to pass any link authority to it. Search engines will not consider a nofollow link when calculating a site’s rankings.
It is used to manage link equity and is typically applied to user-generated content or paid links. You can, and often should, use these attributes together. For example, a sponsored link that opens in a new tab might have rel=”nofollow noopener noreferrer” to prevent the passing of link equity while also maintaining a secure and private browsing experience.
This demonstrates how the attributes can be combined to serve multiple objectives, each contributing to a different aspect of website management.
Best Practices: When And Where To Use These Tags
Understanding the specific functions of noopener and noreferrer enables a clear set of best practices for their application. A simple general rule is to use rel=”noopener noreferrer” for external links that open in a new browser tab. This is where the security and privacy protections of these attributes are most relevant.
When a user clicks a link to an external website, you are safeguarding them from potential tabnabbing attacks and preserving your site’s referral information. It is standard practise to include these tags on any external link that uses target=”_blank”. This practice is automatically applied by many content management systems like WordPress for that exact reason.
The noopener noreferrer means that you are protecting your users when they leave your site. Conversely, you should avoid using these tags on internal links. An internal link is one that directs users to another page on your domain. The security threats prevented by noopener are not a concern within your website.
Furthermore, applying rel=”noreferrer” to internal links can disrupt your analytics. The noreferrer noopener meaning in this context would be counterproductive, as it prevents your analytics from accurately tracking user journeys from one page to another.
This can make it difficult to analyse how users navigate your site, which can harm your efforts to optimise your website’s structure and user experience.
A Distinct Attribute: nofollow Explained
While noopener and noreferrer are about security and analytics, the nofollow attribute operates on a completely different principle. It is a directive for search engines. It is not for browsers. When you apply rel=”nofollow” to a link, you are instructing search engine bots that you do not endorse the linked content.
As a result, they should not pass through any link authority or “link juice” to the destination page. This method is used primarily to control your site’s link equity. You would typically use nofollow in situations where you do not want to vouch for the content of a linked page.
Common examples include links in comments on a blog, sponsored posts, or advertisements. In these cases, you are providing the link for informational or commercial purposes but do not want it to be considered a strong endorsement in the eyes of search engines.
The existence of nofollow highlights a key distinction in SEO link attributes. While noopener and noreferrer focus on user experience and site integrity, nofollow is a tool for managing your site’s link equity and relationship with search engine algorithms. These attributes can and often should be used together to achieve both security and SEO objectives.
Beyond SEO: The User Experience Impact Of noopener noreferrer
While the primary benefits of noopener and noreferrer are rooted in security and data control, their effects extend directly to the end-user’s experience. The sense of a secure browsing environment builds trust with your audience. Secure websites help build user confidence, which, in turn, encourages users to return and engage with your content.
The security provided by noopener prevents a form of phishing that a user may not even be aware of until it’s too late. By preventing this attack, you are actively protecting your visitors, which is a powerful signal of a responsible webmaster.
Furthermore, better website performance can be achieved. By preventing the newly opened page from accessing the original window, you remove a potential communication overhead. This can lead to faster loading times for the new page and a more stable browsing experience for the user.
A quick and responsive website is a key component of a good user experience, and these attributes contribute to that outcome without the user having to even recognise their presence.
Auditing Your Links: A Step-By-Step Guide
To ensure your website is benefiting from noopener noreferrer and to maintain a secure and trustworthy environment, it is wise to periodically audit your links. Here is a guide on how to audit your site’s links for these important attributes.
Step 1: Manual Inspection With Browser Tools
The most direct way to check a specific link is to use your browser’s developer tools. Right-click on a link and select “Inspect” to view its HTML. Search for the rel=”noopener noreferrer” attribute within the <a> tag. This method is useful for a quick spot-check on key pages or when you have recently added new links.
Step 2: Automated Audits With SEO Crawlers
To perform a thorough site-wide audit, you can use an SEO crawler or a dedicated site audit tool. These applications can crawl your entire website and report on all outbound links, including which ones have or lack specific attributes.
You can analyse these reports to identify any external links that open in a new tab but are missing the rel attribute. This method is the most efficient for large websites, as it can process thousands of links in a short amount of time.
Step 3: Using Online Validation Tools
Online HTML validation tools can also be used to check individual pages for adherence to best practices. By pasting the URL of a page into a validator, you can get a report of any potential issues, including missing security attributes on links. While this is less efficient for a full site audit, it can be a quick way to validate a new page or a key landing page.
CMS-Specific Best Practices For Implementing noopener noreferrer
The implementation of noopener and noreferrer varies depending on the content management system (CMS) you use. Here is a breakdown of best practices for different platforms.
WordPress
WordPress, by default, includes the rel=”noopener noreferrer” attribute on any link set to open in a new tab (target=”_blank”). This is done to improve security for all users. For those who need to override this behaviour, there are plugins available. However, for most users, this automatic application is a positive feature that requires no manual intervention.
Shopify And Squarespace
These platforms are known for their user-friendliness and focus on security. Both Shopify and Squarespace handle the implementation of these attributes automatically on a platform level. Any link that you create within their native editors that opens a new tab will be given the appropriate rel attribute, so you do not need to worry about manually adding them.
Custom-Built Sites
For websites built with custom code, the responsibility for implementation falls to the developer. A solid practice is to standardise the use of the rel=”noopener noreferrer” attribute for all external links that open in a new tab. This should be part of a developer’s quality assurance checklist to ensure the site is secure and adheres to modern web standards.
Conclusion On Noreferrer And Noopener Link Tags
In the complex world of web development, the noopener and noreferrer attributes prove that even small details can have a significant impact. They are a modern standard for link hygiene, balancing security and privacy with a website’s overall health.
By understanding their individual functions and knowing when to apply them, you ensure your site is secure, your analytics are accurate, and your user experience is positive. Implementing these tags is a simple yet effective practice that every webmaster should adopt.
Visit the BestSEO website.
Call us today!
Frequently Asked Questions About Noreferrer And Noopener
Can You Use Noopener Noreferrer On All Links?
Using these attributes on external links that open in a new tab is a best practice. Utilising it on internal links is unnecessary and could negatively impact your site’s analytics.
Do Noopener Noreferrer Tags Affect Link Building Or My SEO Efforts?
These attributes do not directly affect your SEO or the passing of link equity. The main change is in analytics, where traffic from these links will appear as “direct” rather than “referral.”
How Does Noopener Protect My Website?
Noopener protects your site from a security vulnerability called “tabnabbing.” This prevents a malicious page that a user navigates to from being able to manipulate or change your original page.
What Is The Difference Between Noreferrer And Nofollow?
Noreferrer is a browser command that stops referral information from being passed to the new page. Nofollow, on the other hand, is a directive for search engines, instructing them not to pass link equity to the linked page.
