Noopener and Noreferrer Attributes - What Do They Mean?

Nowadays, website security and performance are key aspects that both webmasters and SEO specialists pay close attention to. A link attribute is a crucial HTML element that provides additional information to browsers and search engine crawlers. One of the elements that can significantly impact these aspects are HTML attributes such as noopener and noreferrer. In this article, we will examine what these link attributes are, how they work, why they are important, and what benefits they bring in the context of SEO and security.

What are link attributes?

These are additional pieces of information that can be added to HTML links to modify their behavior or define the relationship between the source page and the target page. They are extremely important from the perspective of search engine crawlers and SEO specialists because they help control how links are interpreted and how they affect page rankings in search results.

Basic information about link attributes

They are HTML elements that provide additional information about links. They can modify the way links work or define the relationship between the source page and the target page. These attributes are written in the format rel="attribute-value" and can contain various values, such as noopener, noreferrer, nofollow, and others. Thanks to them, webmasters can better control how links affect their websites as well as the pages they point to.

The rel attribute and its significance

This is one of the most important link attributes, defining the relationship between the document containing the link and the target document to which the link leads. The rel attribute can be used not only in hyperlinks, but also in link rel tags, which are used to define relationships between pages in the context of navigation, CSS stylesheets, and other resources.

The role of the rel attribute in security and SEO

It plays a key role in the context of security and SEO. For example, the rel="noopener" attribute prevents the target page from accessing the window.opener object, which protects against "tabnabbing" attacks. In turn, the rel="noreferrer" attribute hides information about the source page, which increases user privacy. Additionally, the rel="nofollow" attribute informs search engine crawlers not to follow a given link, which can be useful in controlling the flow of SEO link equity between pages.

What are the noopener and noreferrer attributes?

The noopener and noreferrer attributes are values of the rel attribute that can be added to HTML links. Their main purpose is to enhance website security and performance. Noopener instructs the browser not to expose the window.opener object to the target page, while noreferrer prevents the transmission of traffic source information.

Basic information about the noopener and noreferrer attributes:

1. The rel="noopener" attribute prevents the linked page from accessing the window.opener object.
2. The rel="noreferrer" attribute hides information about the source page from the target page.
3. Both attributes are particularly important for links opening in a new tab (target="_blank").
4. Using these attributes can improve website security and its evaluation by search engine crawlers.
5. These attributes can be combined with others, such as nofollow, for additional control over links.

Why should you use the noopener and noreferrer attributes?

Risks associated with the absence of these attributes when opening links

The lack of noopener and noreferrer attributes can lead to "tabnabbing" attacks. This is a technique where a malicious page opened in a new browser tab can take control of the source page, changing its URL and attempting to phish for user data. The absence of these attributes can also impact traffic analytics for the linking site.

Benefits from a security perspective

Using the noopener attribute protects the source page from manipulation by the target page. The noreferrer attribute further increases user privacy by hiding traffic source information.

Impact of the noopener and noreferrer attributes on SEO

Page optimization

The noopener and noreferrer attributes can positively affect SEO by improving page security and performance. Secure websites are evaluated more favorably by Google, which can boost their positions in search results.

Examples of situations beneficial for SEO

Using the noopener and noreferrer attributes is particularly important for links opening in a new tab. Thanks to them, you can avoid issues related to tabnabbing, which enhances user experience and reduces the risk of malicious activity.

Impact of attributes on the linked page

Link attributes can have a significant impact on the target page. They can pass or hide information about the source page, such as its URL or HTTP headers. For example, the rel="noreferrer" attribute conceals this information, which can be advantageous from a privacy standpoint. Conversely, the rel="nofollow" attribute can prevent the transfer of the linking domain's authority to the target page, which directly impacts SEO.

How attributes affect the target page

• rel="nofollow" attribute: Prevents the transfer of the linking domain's authority to the target page, which can affect its ranking in search results.
• rel="noopener" attribute: Prevents the newly opened website from accessing the original page, protecting against "tabnabbing" attacks.
• rel="noreferrer" attribute: Hides source page information, such as the URL and HTTP header, increasing user privacy.

By default, every link has a "dofollow" relationship. Applying appropriate link attributes can help prevent phishing attacks, protect user privacy, and control how links influence search engine rankings.

How to add noopener and noreferrer attributes to links in a new browser tab?

Adding the noopener and noreferrer attributes to links is simple. Just add the rel attribute with the corresponding values to any link that opens in a new tab.

Exam


<a href="https://przyklad.com" target="_blank" rel="noopener">Link with noopener</a>

<a href="https://przyklad.com" target="_blank" rel="noreferrer">Link with noreferrer</a>

<a href="https://przyklad.com" target="_blank" rel="noopener noreferrer">Link with noopener and noreferrer</a>


Common Mistakes and How to Avoid Them

One of the most common mistakes is omitting the rel attribute in links that open in a new tab. Another mistake is improper use of the rel attribute values, which can lead to incomplete protection against threats. For example, if we only add noopener without noreferrer, the destination page will still be able to obtain information about the traffic source. To avoid mistakes, it is best to always use both attributes together in links that open in a new browser tab. Regularly reviewing and updating your website's code can help identify and fix potential issues.

Summary

The noopener and noreferrer attributes are key elements that can significantly affect website security and performance. Using these attributes helps protect users from "tabnabbing" attacks and increases privacy by hiding information about the traffic source. In addition, secure and efficient websites are rated higher by Google, which can positively impact SEO. Remember that taking care of your website's security by using the right link attributes is not just a technical matter, but an ethical one as well. By protecting our users, we build trust and improve the overall Internet experience. If you need help analyzing your internal links - contact us.