The use of outbound links can be extremely valuable on a website or blog. After all, they can add credibility to your content by referring readers to the sources of any facts, statistics or information you include, and they can play a key role in link building, which can greatly enhance 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” and 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.

Understanding rel=”noopener noreferrer” Links

A rel=”noopener noreferrer” link is a link which includes the rel=”noopener noreferrer” tag within the HTML. 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 use of a rel=”noopener” tag for an outbound link serves a very important security purpose because it prevents a security issue known as reverse tabnapping. As an article for CyberTalk.org explains, this is a malicious tactic, used by cyber criminals, 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 cyber criminals 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 percent in the year from 2021 to 2022.

The rel=”noopener” tag protects against these advanced phishing attacks by ensuring that the page that opens after clicking a link is not granted access to the original tab or viewed on that tab. This is also why platforms like WordPress automatically add the tag to links that open in a new browser window.

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. Nevertheless, you should still try to remember to add the rel=”noopener” tag to links to protect users who may be using less common web browsers, which may not have this functionality built into them.

What Does a rel=”noreferrer” Tag Do?

A rel=”noreferrer” tag within an HTML hyperlink obscures the origin of the traffic you send to another website. So, for example, if you link to the Microsoft.com website and you use a rel=”noreferrer” tag, Microsoft will not be able to see that you sent the traffic to their website when they use their analytics tools.

Essentially, the other website’s analytics tools will show the traffic sent to them from your site as direct traffic instead. Similarly, if you ever notice a sudden uptick in direct traffic to your site when using analytics tools, this may be the result of another website linking to your content and using a rel=”noreferrer” tag.

The tag can be advantageous in specific situations, such as if you have privacy concerns about a website knowing you are sending traffic to them, or if you would prefer that a website that you link to does not gain awareness about your content for any reason. It can also potentially protect the privacy of your users too.

The impact of using rel=”noreferrer” tags is different from the impact of using rel=”nofollow” tags in your links. A rel=”noreferrer” tag operates within the field of analytics and prevents a website from seeing your site as the referrer, but page ranking or authority is still passed on to the destination page or site because the link is still followed by search engines. By contrast, a rel=”nofollow” tag signals to search engines that you do not want to pass ranking benefits on.

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.

What Does a rel=”noopener noreferrer” Link Look Like?

Generally speaking, the HTML for a rel=”noopener noreferrer” link will still include the target=”_blank” tag too. This means that the final HTML for the aforementioned link to Microsoft.com would look like this:

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

If you use a tool like WordPress, you may notice that any links that you have set to open in a new browser window automatically include these tags. This is done for security purposes. The rel=”noreferrer” tag can be removed within the code editor, but even if you remove the rel=”noopener” tag, it will still be automatically utilised.

Of course, you can also edit a link so that it only includes either a rel=”noopener” tag or a rel=”noreferrer” tag, instead of using both. Those HTML links would then look like this:

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

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

Understanding the SEO Implications

As previously stated, outbound links on your website can have implications for search engine optimization. Understandably, many people are reluctant to change how they structure links without understanding the impact it may have on SEO efforts and if they are likely to incur Google penalties for using them.

The good news is that the rel=”noopener” tag has no impact on SEO whatsoever. Google will not find it more difficult to understand your website’s HTML and you will not face any damage to your rankings on search engine results pages.

As a basic rule, the rel=”noreferrer” tag is also safe to use, because it does not have a direct negative impact on SEO either. However, this tag is slightly more complex, because there can be some indirect consequences.

As the rel=”noreferrer” tag prevents the external website from seeing your website as the referrer, it can prevent you from being able to build organic link-building relationships, which may mean your SEO is less than optimal. This can be significant because research compiled by HubSpot from multiple sources shows that almost half of marketers spend $10,000 or more every year on link-building and the cost of gaining a single quality backlink can be $1,000 or more.

For this reason, a case-by-case approach to whether to include this tag in your HTML is recommended.

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

What is the purpose of using rel=”noopener noreferrer” in links?

The rel=”noopener noreferrer” attribute is used to enhance security and protect users when linking to external websites. It prevents potential security risks and ensures a safer browsing experience.

What does rel=”noopener” mean?

The rel=”noopener” attribute is used to prevent the linked page from accessing the window.opener object, which can protect against potential security vulnerabilities and malicious activities.

What does rel=”noreferrer” mean?

The rel=”noreferrer” attribute instructs the browser not to send the referring URL information when navigating to the linked page. This helps protect the privacy of the referring page.

When should I use rel=”noopener noreferrer” in my links?

It is recommended to use rel=”noopener noreferrer” in links that open in a new tab or window and point to external websites. This ensures better security and privacy for your users.

Are rel=”noopener noreferrer” links beneficial for SEO?

While rel=”noopener noreferrer” links do not have a direct impact on SEO rankings, they contribute to providing a safer and more reliable user experience. Ensuring a secure website environment can indirectly benefit your SEO efforts.

Marketing Analytics: 8 Best Ways to Track Your Online Marketing Activity

12 months ago by erika 11 min read No comments

Do you know how profitable your marketing campaigns are? Have… […]

Read More… from Marketing Analytics: 8 Best Ways to Track Your Online Marketing Activity