Rel= “no opener, no-referrer” tags are HTML attributes added to internal and external links for security and privacy reasons. Understanding rel= “no opener no-referrer” tags is crucial as they can influence how search engines track referral traffic and how pages interact, potentially impacting SEO strategies.
This post will explore what these tags mean when to use them, and their effects on search engine optimization.
What is rel=”noopener noreferrer”?
The rel=”noopener noreferrer” HTML attribute combines two separate HTML tags used primarily for enhancing security and privacy when linking to external sites. The rel= “noopener” part prevents the newly opened page from having control over the originating page, protecting against exploits like reverse tab napping.
The `rel=”noreferrer” tag stops the browser from sending HTTP referrer headers to the new page, ensuring the external website does not receive any information about the traffic source. This can be particularly important for preserving user privacy and securing external website interactions.
What is the rel= “noreferrer” Tag?
The rel=”no-referrer” tag is an HTML attribute that enhances privacy and security in web interactions.
When applied to a hyperlink, it instructs the browser not to send HTTP referrer headers to the target site. This means the destination website will not be able to see where the traffic originated, which is typically visible through Google Analytics tools as referral traffic rather than direct traffic.
Using the rel=”noreferrer” tag can be beneficial when you want to prevent the linked site from gaining unauthorized access to your site’s information or tracking the paths users take to reach their pages.
Most Web Browsers Automatically Imply rel= “noopener”
Modern web browsers typically apply the rel=”noopener” attribute automatically to links opening in a new tab with target=”_blank”.
This built-in security measure prevents the newly opened page from manipulating the originating page, safeguarding users against potential phishing attacks. This automatic application helps enhance security without requiring the manual addition of the tag in many cases.
Why use rel=”noopener noreferrer” Links?
-
To Enhance Security Against Malicious Attacks
The rel=”noopener” tag protects your site by preventing the open external links from accessing the original page’s context. This blocks potential malicious scripts on the new page from manipulating or hijacking the originating page, safeguarding against reverse tab napping and phishing attacks.
-
To Maintain Privacy by Not Leaking Referrer URLs
The rel=”no-referrer” component instructs search engines to refrain from sending HTTP referrer headers to the destination website. This ensures the destination site does not receive any information about where the traffic originated, maintaining user privacy and securing data about your site’s traffic patterns.
How Do They Affect SEO?
-
No Direct Impact on SEO Rankings
These attributes do not directly affect a website’s position in search engine results pages (SERPs). Google does not consider these tags when determining the relevance or authority of a website for ranking purposes.
-
Prevents Link Equity Transfer in External Linking
While rel=”noopener” does not influence SEO, the rel=” noreferrer” tag can impact how link equity, often referred to as “link juice“, is passed.
Typically, the rel=”noreferrer” tag does not inhibit equity transfer by itself; however, when used in c the rel=nofollow attribute, it can prevent a link from passing authority to other sites. This is crucial when link building to sites you do not want to endorse or share ranking power with.
When to Use rel=”noopener noreferrer”?
-
For Untrusted or Unknown External Sites
When linking to external sites you do not fully trust or have limited information about, using the rel=”noopener noreferrer” tag helps protect your site and your users.
This attribute ensures that when you open external links, they cannot manipulate the originating page or track where their traffic is coming from, maintaining both security and privacy.
-
For Links Opening in a New Tab for Security
It’s a good practice to add rel=”noopener” (automatically included with rel=”noreferrer” in most cases) to all links that open in a new tab (target=”_blank”). This prevents any malicious scripts on the linked page from taking control of the opening page, which is crucial for protecting the user’s experience and the integrity of your site.
Alternatives for Securing Links
-
Using rel= “noopener” for Security Without Affecting Referrer
If you want to ensure security when opening an external link in a new tab but still wish to direct traffic and pass referrer data to the destination site, simply using rel= “noopener” is a viable option. This tag prevents the newly opened page from accessing the original page’s process, thus blocking potential malicious actions, without hiding the referrer data like rel=”noreferrer” does.
-
Content Security Policy (CSP) for Comprehensive Security
Implementing a Content Security Policy is a more robust way to secure your site against various types of attacks, including data injection attacks that could occur through external links. CSP allows you to define approved content sources browsers should allow to load on your website, thus providing a defense against XSS and data injection threats.
This method provides a comprehensive security framework beyond what rel=”noopener” or rel=”noreferrer” can offer, securing all aspects of your site’s interactions with external resources.
Impact on User Experience
-
Can Affect Analytics by Not Passing Referrer Data
When you use the `rel=”noreferrer” attribute on links, it prevents the browser from sending the HTTP referrer header to the destination website. This means traffic originating from your site will appear as direct traffic in the analytics of the destination site. For your own analytics, this could obscure the clarity of traffic sources and make it more challenging to accurately understand user behavior referral paths and user safety from external links in search engines.
Including the rel=”noopener” tag in every external link, especially those that open in a new tab (target=”_blank”), is crucial for protecting users from potential security risks. This attribute prevents malicious scripts on the linked page from accessing your page’s content and potentially redirecting users to harmful sites or compromising their security.
By implementing this, you ensure user interactions with external links remain safe, preserving trust and security within your site’s ecosystem.
SEO Best Practices with rel Attributes
-
When to Prioritize Security Over Link Equity
Security should be a priority when linking to external sites, especially if you are unsure about the content or the integrity of the external site. In such cases, using the rel=”noopener” tag is essential to protect your site and yours from security vulnerabilities. If privacy is a concern, particularly when you do not want to reveal your site as the referrer, rel=”noreferrer” should also be used.
These measures ensure user safety even if they might slightly impact the visibility of referral paths in analytics.
-
Balancing Internal Links Equity with User Security and Privacy
While link equity is valuable for SEO, user security and privacy should not be compromised. If you decide to use the rel= “nofollow” attribute to control PageRank flow, consider whether it is necessary based on the trustworthiness and relevance of the external link.
For internal links, avoid using any “rel” attributes that might obscure data or disrupt the user experience. Internal links do not pose the same security risks and are essential for distributing link equity throughout your site.
- Using the rel=”noopener” tag alone when linking to trustworthy external sites allows you to maintain security without losing the SEO benefits of passing referrer data. This approach is often sufficient for external links that open in a new tab but are otherwise considered safe and relevant.
- Implement CSP to enhance security further without over-relying on “rel” attributes. This helps safeguard your site against various attacks and ensures only specified domains can be linked or have scripts run from them, thus securing both your site’s and your users’ data.
Technical Implementation of rel Attributes
Implementing “rel” attributes in your website’s links is straightforward but requires attention to detail to ensure they function correctly for security and SEO purposes. Here’s how to handle the technical implementation:
-
Adding “rel” Attributes to HTML Links
To add a “rel” attribute to a link in HTML, simply include it within the “<a>” tag. For example:
<a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>Visit Example</a>
This example uses both the rel=”noopener” tag (to prevent the newly opened page from accessing the original page’s window object) and rel=” noreferrer” (to prevent the browser from sending the HTTP referrer header to the new page).
-
Considerations for Different Browsers
Most modern browsers support rel=”noopener” to enhance security for pages opening in new tabs. However, older browsers may not recognize this attribute, so it’s a good practice to include both rel=”noopener” and rel=”noreferrer” if backward compatibility is a concern.
-
Using “rel” Attributes with JavaScript
If you’re dynamically generating links with JavaScript, you can still include `rel` attributes by setting properties on the anchor element:
var link = document.createElement(‘a’);
link.href = ‘https://example.com‘;
link.target = ‘_blank’;
link.rel = ‘noopener noreferrer’;
document.body.appendChild(link);
This method ensures links created via JavaScript adhere to the same security and SEO practices as statically included HTML links.
-
Testing and Validation
After implementing “rel” attributes, testing how they affect the user experience and your site’s security is crucial. Use browser development tools to inspect the links and ensure the attributes are correctly applied.
Check your website’s analytics to observe any changes in traffic patterns, especially if using rel=”noreferrer,” as this can affect how traffic sources are reported.
-
Audit and Update Regularly
ReReviewour site’s links and regularly update “rel” attributes as needed. This is especially important for outbound links to ensure they continue providing the desired security level and comply with current best practices.
Consider automating part of this process with SEO tools that can crawl your site and report on link HTML attributes. These tools can help you maintain consistent and secure linking practices across your web presence.
Verifying “rel” Attribute Effectiveness with Tools
After you insert “rel” attributes into your HTML anchor link tag, it’s crucial to check if they are put in correctly and working as planned. You can perform this verification using different tools and methods:
Browser Developer Tools
- How to Use: Open your website in a web browser like Chrome, Firefox, or Edge. Right-click on the page and select “Inspect” to open the Developer Tools. Navigate to the “Elements” tab where you can see the HTML source of your page. Use the search function (Ctrl+F or Cmd+F) to find specific links and check the `rel` attributes.
- Benefits: Browser developer tools are immediately accessible and free. They provide a real-time look at how `rel` attributes are rendered in the DOM, which can help you quickly diagnose issues such as missing `rel` or incorrect values.
Online HTML Validators
- Tools: Websites like the W3C Markup Validation Service allow you to input your website’s URL or HTML code to check for HTML5 validity, including the proper use of link attribute `rel.`
- Benefits: These validators can help ensure that your HTML code, including `rel` attributes, adheres to web standards, which is crucial for cross-browser compatibility and SEO.
SEO Audit Tools
- Examples: Tools like Screaming Frog SEO Spider, Ahrefs, or Moz can crawl your website as browsers do and provide reports that include details on links and their attributes.
- How to Use: Configure the tool to crawl your website. After the crawl is complete, filter the results to examine external links and their `rel` attributes. These tools can also help identify external links using `rel` attributes that might require them.
- Benefits: SEO audit tools can analyze your entire website simultaneously saving time and providing a comprehensive view of how `rel` attributes are used across all pages. This is particularly useful for large sites where manually checking each link would be impractical.
Think About a Link Audit or Website Audit when Facing Traffic Reductions
If you’re noticing unexplained anomalies in Google Analytics traffic, such as unexpected drops or changes in referral data, it might be time to conduct a thorough link audit or complete a website audit. Here’s why:
- Identify and Fix Issues: A comprehensive audit can reveal whether `rel` attributes contribute to SEO or user experience issues, such as security vulnerabilities or lost referral traffic.
- Optimize for Performance: Ensuring that `rel` attributes are used correctly can help optimize the performance of your website in search engine results and enhance site security.
Engaging a professional SEO service or using advanced SEO tools to conduct these audits can provide deeper insights and actionable recommendations to enhance your site’s overall SEO strategy and security posture.
