The use of outbound links can be extremely valuable on a website or blog. They add credibility to your content by referring readers to the sources of any facts, statistics, or information you include. They can play a key role in link building, greatly enhancing your search engine optimization (SEO) efforts.

However, when you add outbound links to a website, you must also be concerned with security and privacy issues.

If you take the time to inspect the HTML of various websites, you may notice that the code for links can look quite different from one link to another. Some will include the words rel=”noopener noreferrer”. This code may also be added to your outbound links if you make use of a platform like WordPress to create your web content.

In this blog post, we will explore what this code means, how it can be used, why it is automatically added to outbound links in WordPress and similar platforms, the potential benefits of using rel=”noopener noreferrer” links when it comes to your security and privacy, and the SEO implications of using these links.

What Is rel=“noopener noreferrer”?

The rel=”noopener noreferrer” is a part of HTML code used for links. It makes sure that when you click a link, the new page cannot control the original page. This protects your privacy and security. 

There are two separate tags in one: the rel=”noopener” tag and the rel=”noreferrer” tag.

To provide you with some context for what this looks like in practice, the HTML for a typical outbound link to the Microsoft website might look something like this:

<a href=”http://www.microsoft.com”>Click to visit Microsoft.com</a>

This would then display on your website as a clickable link that looks something like this: Click to visit Microsoft.com

However, when a user of your website clicks on that link, it will open in the same browser tab they are using. That may be fine for internal links to other pages on your website, but you may not want users to leave your website entirely when they click an outbound link. 

Fortunately, you can make it so that the link automatically opens a new tab by adding a target=”_blank” tag to the HTML. The HTML would then be as follows:

<a href=”http://www.microsoft.com” target=”_blank”>Click to visit Microsoft.com</a>

On your website, this link would look identical to the link above, but it would automatically open the link in a new browser tab. In the past, the target=”_blank” tag was considered to be a sufficient step, but it is now considered best practice for security purposes to include a rel=”noopener” tag to the HTML too, as we will explain in the next section.

What Does a rel=”noopener” Tag Do?

The rel=”noopener” tag is used in HTML to make links safer. When you add this tag to a link, it opens the linked page in a new tab in such a way that the new page can’t interfere with the original page you clicked from. 

<a href=”https://example.com” target=”_blank” rel=”noopener”>Visit Example</a>

Specifically, it stops the new page from using JavaScript to control the original page. This is important for protecting your website and users from possible harmful actions by other sites.

As an article for CyberTalk.org explains, this is a malicious tactic used by cybercriminals, where a link opens a page in a new tab, but the original tab is hijacked.

• Typically, this hijacking will replace the original page you were on with a recreated version, which will prompt you to re-enter login credentials. 
• This then allows the cybercriminals to gain your login details. 

Taking action to protect yourself and your website’s users from such phishing scams is more important than ever because a SlashNext study from 2022 found that phishing attacks had increased by 61% in the year from 2021 to 2022.

It is worth briefly highlighting the fact that most modern web browsers automatically act as if the rel=”noopener” tag is present within links, even if it is not. This applies to Google Chrome, Apple Safari, Mozilla Firefox, and Microsoft Edge.

What Does a rel=”noreferrer” Tag Do?

The rel=”noreferrer” tag in HTML is used to increase privacy and security when clicking on a link. When this tag is added to a link, and you click on it, the new page that opens won’t know where you came from. 

<a href=”https://example.com” target=”_blank” rel=”noreferrer”>Visit Example</a>

Normally, websites can see which site sent them visitors, but “noreferrer” hides this information. This means the new website won’t get any data about the original website from your visit. It’s especially useful for keeping user data private and secure.

A rel=”noreferrer” tag operates within the field of analytics and prevents a website from seeing your site as the referrer. However, page ranking or authority is still passed on to the destination page or site because the link is still followed by search engines.

If you are unsure about some of the specifics of direct traffic and referral traffic, it may be worth discussing the topic with an SEO agency so that you can fully understand the pros and cons of being identifiable as a referral site.

Understanding the SEO Implications

Using outbound links on your website comes with considerations for search engine optimization (SEO). Many are cautious about altering link structures, concerned about potential SEO impacts and Google penalties.

1) SEO and rel=”noopener”: The rel=”noopener” tag does not affect SEO. Google’s crawlers understand your site’s HTML just as well with this tag, ensuring your search engine rankings remain unaffected.

2) SEO and rel=”noreferrer”:

• Generally Safe: Like “noopener”, the rel=”noreferrer” tag doesn’t directly harm SEO. But, its implications are slightly more nuanced.
• Indirect Consequences: By hiding the referrer, it may hinder the development of organic link-building relationships. Such relationships are crucial for optimal SEO strategies.

Significant investments are made in link-building, with nearly half of marketers spending over $10,000 annually. The cost of acquiring a high-quality backlink can exceed $1,000, emphasizing the importance of strategic tag use.

Given the potential indirect effects on SEO, especially concerning link-building efforts, it’s advisable to consider the inclusion of the “noreferrer” tag on a situational basis.

While both “noopener” and “noreferrer” tags are safe from an SEO perspective, the latter warrants a more careful approach. This is due to its potential impact on link-building relationships.

Therefore, assessing the specific needs and goals of each outbound link is crucial.

Conclusion

To recap, rel=”noopener noreferrer” links are links that include the rel=”noopener noreferrer” tag within the HTML code. This tag is made up of two separate tags, which are the rel=”noopener” tag and the rel=”noreferrer” tag. These are automatically added to outbound links set to open in a new browser tab on many platforms, including WordPress. Combined, they serve both security and privacy-related purposes.

The rel=”noopener” tag is designed to plug a gap in security, which can allow malicious websites and cybercriminals to hijack the browser tab that was used to click a link while the user is busy using the new tab that has opened. The rel=”noreferrer” tag, meanwhile, prevents websites from seeing that your website sent traffic their way.

Both can be used without impacting your SEO efforts directly. However, the rel=”noreferrer” tag does obscure your website’s identity within analytics, which could prevent natural link-building relationships from developing.

Frequently Asked Questions