The translation

This article introduces the usage, security and influence of REL =”noopener noreferrer nofollow” on SEO (Search Engine option).Click to view the original article.

If you are involved in Web development or SEO related work, you probably know the three attribute values of Noopener, Noreferrer and Nofollow, but what are the three attribute values? In this article, we will introduce them one by one. And point out their impact on SEO and Web security.

Introduction to the

These three attribute values are the attributes of the REL of the A tag, and it can be said that nofollow is the most well-known among Web developers and SEO experts.

<a href="https://www.pointjupiter.com">
  Click here to visit the Point Jupiter website.
<a>
Copy the code

In the code above, you can see that the A tag has an href attribute that points to the home page of PointJupiter. The text in the middle is displayed to the user and will look different depending on the CSS and browser Settings.

The A tag has A number of different attributes. Rel is one of them. The topic of this article is to introduce three property values of REL: Noopener, NoReferrer and Nofollow.

<a href="https://www.pointjupiter.com" 
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to visit Point Jupiter website.
</a>

Copy the code

You should have noticed that the a tag rel property and the value of the rel property, and there’s also a target=”_blank” property, which is basically used to set the target site that opens the A TAB on the new TAB page.

Target =”_blank” is the main reason for setting rel attributes, as well as the root cause of potential risk and phishing sites.

Let’s talk about them in detail, their importance to SEO, security, and when these attributes need to be added.

noopener

Interesting things happen when you use target=”_blank”. You can skip from page A to page B. Page B can access the information on page A through some methods. Such as Windows. Opener. (A,B pages are mainly for the convenience of description, and have no other meaning).

Then, page B can make the original page A open malicious websites through window.opener. Location. window.opener.location

In this way, phishing attacks can be implemented. Consider the following scenarios:

You create a malicious website C, you put some malicious code in it, and then you share that website through social networks or other means for other people to open it up through target=”_blank” — Facebook is a classic example. An unknown user clicks this link on the Facebook page, the browser opens this page on a new TAB page, and at the same time, your malicious website C can control the TAB where the Facebook page is located through window.opener. Location and jump to a new website. The site then tells the user that your login information has expired and you need to log in again. At this point, users don’t know that their site isn’t really Facebook anymore, and start entering account information, submitting…

For more details

Using the noopener attribute value clearly tells the browser that the new TAB opens the target web site B, but it cannot provide web site B with the permission to control A. The result is that window.opener returns null on B’s website.

The rel=”noopener” attribute doesn’t affect SEO, but you should add it when you’re using target=”_blank” to redirect to an external site.

noreferrer

Similar to Nofollow, noreferrer can also restrict newly opened B websites and operate window.opener objects. In addition, the Noreferrer restricts the browser from passing information about its own web site to B as it jumps to its own page.

Simply put, the noreferrer hides the referrer information when the link is clicked by hand. For example, 🌰, when others put your website address in their website A and set the Noreferrer, then when users click on this link, you cannot see which website the link comes from. In your data analysis platform, this may be classified as direct traffic, rather than drainage.

Similarly, noreferrer doesn’t have any impact on SEO, but it does report more direct traffic, which can affect your data analysis and software tracking.

So, when should noreferrer and noreferrer be used? I suggest you consider using both. At present, mainstream browsers all support Noopener, but in some scenarios, if the browser does not support Noopener, it can be replaced by Noreferrer.

This means that in some scenarios, it may be better to use both in order to be compatible with older browsers. But the best thing to do is to avoid using them unless you have a situation where you absolutely have to use them. (Personal opinion: Many foreign websites are directly opened on the current page, such as GitHub, StackOverflow, etc. Most of the domestic websites are newly opened pages, and I am also used to newly opened pages. After all, I turned over a few pages to find the content, clicked the link, and refreshed the current page. It’s a hassle to come back later.) .

When to use _black.

nofollow

Lots of high quality and high value. Links to your website are very important for SEO. This is called backlinks. But not all links are created equal.

Usually when A site B links to your site A, it will be link juice, meaning that search engines will think your site A has A better reputation. Essentially, you can think of it as propaganda. If a reputable website links to your site, it endorses your site, the search engine will use that as a reference for ranking, and Google will use that to measure the quality of the site.

Sometimes, however, you don’t want to set link weights. For example, you don’t want to pass the link weight of important/valuable sites to mediocre or unimportant sites.

Set rel=”nofollow” on the A TAB to tell the browser not to pass your link juice/ranking to the site you’re linking to.

<a href="https://www.pointjupiter.com" 
   rel="noopener noreferrer nofollow" 
   target="_blank">Click here to visit Point Jupiter website.
</a>
Copy the code

When using nofollow

This is usually done in forums or comments. User input may contain spam or low quality link content that you don’t want to pass on to your blog or forum site link juice/ranking.

Google and other search engines also require you to use this attribute for sponsored links and advertising links, as well as links in news articles and other paid links.

Noopener, Noreferrer and Nofollow are related

Sometimes you’ll see someone refer to the Noopener, Noreferrer tag, and in other cases you’ll see the rel Noreferrer attribute. Although many developers will understand this, there are a few other things to be aware of.

  • Noopener, Noreferrer and nofollow are attribute values without corresponding labels or attributes.
  • Rel is not a tag, it’s an attribute name.
  • <a></a>Is an HTML tag, so it has attributes (rel,href, etc.).

conclusion

This paper mainly describes three attribute values of A tag rel attribute, noopener, Noreferrer and Nofollow.

  • Rel =”noopener”, can be used on all links that need to open a new TAB to avoid unnecessary security risks. If not, malicious websites can change the content and links of the original website by window.opener.

  • Rel =”noreferrer”, and noopener have similar functions, slightly better compatibility, the two are better used together. In addition, noreferrer can affect the data analysis, counting the browsing as direct browsing, rather than as a diversion.

  • Rel =”nofollow”, will affect the search engine delivery link weight (link juice) and site ranking. You can add this value when linking to sites that are not your own. This is the only value of the three that has an impact on SEO.