Nofollow vs. Noreferrer vs. Noopener
Updated:
In the world of web development and SEO (Search Engine Optimization), there are several attributes and tags that play a crucial role in how search engines understand and rank web pages. Three such attributes are nofollow, noreferrer, and noopener. These attributes are used in HTML to control how links behave and how they affect SEO. In this comprehensive guide, we will delve deep into what each of these attributes is, how and when each of them should be used with code examples, and the impact or implications on SEO.
Understanding the HTML Basics
Before we dive into the details of these attributes, let’s establish a foundational understanding of what they are and how they work.
In HTML, links are created using the anchor (<a>) tag. The anchor tag allows you to create clickable links that can take users from one web page to another. Here’s a basic example of an anchor tag:
<a href="https://webhostingmonkey.com">Web Hosting Monkey</a>
In this example, the href attribute specifies the destination URL, and the text between the opening and closing anchor (<a>) tags is the visible link text.
Nofollow
The nofollow attribute is used to instruct search engines not to follow a specific link. When a search engine encounters a link with the nofollow attribute, it will not pass any link equity (also known as PageRank) to the linked page. This means that the linked page won’t receive any SEO benefits from the linking page.
When to Use nofollow
1. User-Generated Content: When your website allows users to submit content, such as comments or forum posts, it’s a good practice to use nofollow for any links within those user-generated content. This helps prevent spammy or low-quality links from affecting your site’s SEO.
2. Advertisements and Sponsored Content: If you have paid advertisements or sponsored content on your website, using nofollow for those links is essential to comply with search engine guidelines. It ensures that the links do not pass SEO benefits.
Code Example for nofollow
<a href="https://webhostingmonkey.com" rel="nofollow">Web Hosting Monkey</a>
In the code above, the rel=”nofollow” attribute is added to the anchor tag to indicate that this link should not be followed by search engines.
SEO Impact of nofollow
Using the nofollow attribute appropriately can help you maintain the integrity of your site’s link profile. It prevents the flow of PageRank to potentially harmful or unrelated websites, which can positively impact your site’s SEO.
Noreferrer
The noreferrer attribute, short for “no referrer,” is used to prevent the sending of the referring URL when a user clicks on a link. When this attribute is applied to a link, the browser does not send the HTTP Referer header to the linked website. This can be useful for privacy and security reasons.
When to Use noreferrer
1. Privacy Concerns: If you want to protect the privacy of your website’s visitors and prevent the linked site from knowing where the traffic is coming from, you can use the noreferrer attribute.
2. Security: In some cases, using noreferrer can enhance security by preventing the receiving website from potentially accessing sensitive information in the URL.
Code Example for noreferrer
<a href="https://webhostingmonkey.com" rel="noreferrer">Web Hosting Monkey</a>
In this example, the rel=”noreferrer” attribute is added to the anchor tag to disable the sending of the Referer header.
SEO Impact of noreferrer
From an SEO perspective, using the noreferrer attribute typically has no direct impact on your website’s rankings. It primarily affects user privacy and security. However, keep in mind that it may impact your ability to track referral traffic accurately in tools like Google Analytics, as the source of the traffic will not be passed.
Noopener
The noopener attribute is used to prevent the newly opened page (target page) from having access to the window.opener object of the referring page (source page). This is important for security reasons because it prevents potential attacks that could occur if the target page gains access to the opener’s window object.
When to Use noopener
The primary use case for noopener is when you open links in a new browser window or tab using the target=”_blank” attribute. Without noopener, the linked page could potentially manipulate the window object of the referring page, leading to security vulnerabilities.
Code Example for noopener
<a href="https://webhostingmonkey.com" target="_blank" rel="noopener">Web Hosting Monkey</a>
In this example, both the target=”_blank” and rel=”noopener” attributes are used to open the link in a new tab and ensure that the new tab cannot access the window object of the source page.
SEO Impact of noopener
Similar to noreferrer, the noopener attribute does not have a direct impact on SEO. Its primary purpose is to enhance security by isolating the newly opened tab or window from the referring page. While it may not affect SEO, it plays a crucial role in protecting your website and users from potential security threats.
Combining Attributes for Comprehensive Control
In the previous sections, we discussed the individual uses and benefits of the nofollow, noreferrer, and noopener attributes. However, web developers often encounter scenarios where combining these attributes becomes necessary to achieve a specific set of goals. Let’s explore various combinations to gain comprehensive control over how your links behave. Remember that the choice of which combination to use should be based on the particular goals and requirements of your website.
Combining nofollow and noopener
Combining nofollow and noopener is a powerful approach when you want to ensure both SEO integrity and security for links that open in a new tab or window.
<a href="https://webhostingmonkey.com" target="_blank" rel="nofollow noopener">Web Hosting Monkey</a>
In this example, the nofollow attribute prevents the linked page from receiving SEO benefits, while noopener protects your website’s security by isolating the newly opened tab from the referring page.
Combining nofollow and noreferrer
When you need to add an extra layer of privacy to user-generated content while preventing SEO juice from flowing to linked sites, combining nofollow and noreferrer is a suitable choice.
<a href="https://webhostingmonkey.com" rel="nofollow noreferrer">Web Hosting Monkey</a>
In this configuration, the nofollow attribute ensures that link equity isn’t passed to the destination, while noreferrer safeguards user privacy by preventing the transmission of the referring URL.
Combining noreferrer and noopener
In situations where security and privacy are paramount, combining noreferrer and noopener is a robust strategy. It ensures that the newly opened page cannot access the window object of the referring page while also protecting user privacy.
<a href="https://webhostingmonkey.com" target="_blank" rel="noreferrer noopener">Web Hosting Monkey</a>
This combination opens the link in a new tab, prevents the Referer header from being sent, and isolates the new tab from the opener’s window object.
Combining nofollow, noreferrer, and noopener
For maximum control and security, you can combine all three attributes: nofollow, noreferrer, and noopener. This is particularly useful when dealing with user-generated content that includes links meant to open in a new tab.
<a href="https://webhostingmonkey.com" target="_blank" rel="nofollow noreferrer noopener">Web Hosting Monkey</a>
With this combination, you achieve the following:
- nofollow prevents the linked page from benefiting from SEO.
- noreferrer ensures user privacy by not sending the Referer header.
- noopener maintains security by isolating the newly opened tab.
Conclusion
Understanding and correctly using HTML attributes like nofollow, noreferrer, and noopener is essential for maintaining the quality, security, privacy, and SEO of your website. These attributes not only play critical roles in shaping the user experience and safeguarding your site from potential threats, but also directly impact your SEO rankings.
By implementing these attributes judiciously, you can strike a balance between SEO optimization, user privacy, and security, ensuring a positive experience for both your website’s visitors and search engine crawlers such as Googlebot.