What You Need to Know About Link Attributes

If you know your way around websites and have a basic understanding of SEO, then you may have come across different rel attributes like norefer, noopener, or nofollow. If you are wondering what they are and what they do then you have come to the right place. 

What are rel attributes?

As you may already be aware a link is a strong clickable connection that allows you to jump between web pages with just a click. This is where the rel attribute comes in. They can be added to any webpage to specify the relationship between the current webpage and the linked webpage. This helps search engines better understand the content on your page.

The proper usage of these tags can help you to inform the search engines in case of any duplicate content. It can also suggest to the search engines which pages to display in their SERPs and which ones to avoid.

There are various types of Rel attributes available in HTML, allowing you to define what your page is about for the search engine. Here are some common Rel attributes: 

• alternate: A link to an alternate representation of the current document.
• author: Link to the author page of the current document.
• bookmark: a permanent URL used for bookmarking.
• canonical: preferred URL of the current page.
• next: A link to the next page in the series.
• help: A link to the help page.
• tag: a keyword to define the contents of the page.

There are many more rel attributes in HTML that can be used to define the contents of a page. We are going to look at 3  rel attributes that will help define the relationship between the two web pages; norefer, noopener, and nofollow. These are generally referred to as link attributes. Before we dive into it let’s look at what a referrer is.

What is a referrer?

When a person visits your website, the most important information that is being recorded is where the person has come from. The URL of the page that led them to your site. If you get that information you can go to the referrer page and check the link that the person has clicked to get into your site. You will get this information from tools like Google Analytics. This way you will know how your customers find you and change your strategy if need be. 

This referrer link can be found in the URL of your website which the customer first visited when they landed on your website. In short, you can find the URL of the previous page you came from on the URL of the page you are currently on. This is called referrer URL. 

Sometimes you may not find the referrer URL that brought traffic to your website. This is because of the rel-tag noreferrer. Let’s take a look at why that is. 

What is rel=”noreferrer”?

If you do not want others to know where the traffic came from you can use the rel=noreferrer attribute. It will make sure the referral shows “direct” instead of the URL of the previous page. When it is added to a link, no referrer information will be leaked. That is you cannot find the webpage that drove traffic to your website. The ultimate aim is not to pass the HTTP referrer header when a person clicks on the hyperlink. If no information is in the header, then it will not be tracked by analytics tools.

Let’s look at this with an example. Consider two websites A and B. Website A contains a link pointing to website B. Usually, when the owner of website B checks analytics he should find website A under referrals, indicating that website B gets traffic from website A. However, when website A uses a noreferrer attribute to link to website B, then it will show up as direct traffic instead of referral, meaning website B will not see Website A in their analytics data. 

Example: 

<a href=”www.cheapflights.com” rel=”noreferrer”> flight ticket</a>

When crawling the above link, search engines will pass link authority to the linked website, but all information regarding the user will not be shared with the target site.

When to use noreferrer attribute?

If you do not want other sites to know that you drove traffic to their site you can use rel=noreferrer attribute in your link. Once implemented traffic you drove will be shown as direct in the Google Analytics Acquisition report. 

Do keep in mind that when you normally add an external link on your website, you will show up as a referrer in the analytics of the site you drove traffic to. The webmaster of that site may notice you driving traffic to them and may choose to return the favor by adding your link on their website. This is something that Google recommends you to do to gain backlinks. However, when you use the rel=”noreferree” attribute in links, the webmaster of the site you drove traffic to will not know about your site and may never add your link on their site. This is the benefit you may lose out on, so be wise when you use it. Also keep in mind that if you use this tag on all your internal links, then your Analytics data will not be accurate.  

Does rel=”noreferrer” affect SEO?

When you click on a link, your browser sends a request to the website server of the link asking for the page. Furthermore, it also sends certain extra information like the type of browser, the referrer page, the location, the device, and so on. This enables the website server to save the information of how the people arrived on the webpage. This is how a rel=noreferrer works. This will have an impact on your analytics. But many people have a misconception that rel=noreferrer will affect SEO. Well, this simply is not true,  rest assured there is zero impact for rel=noreferrer on SEO.

What is rel=”noopener”?

Consider you have an external link on website A that opens website B. When noopener is applied to this external link. It makes sure that website B does not have any kind of access to website A. This is implemented as a security measure to safeguard your website. It is highly recommended that you implement it on your website. 

Example:

<a href=”https://www.example.com” rel=”noopener”>This is an example website</a>

When to use noopener attribute?

It is actually a security fix to prevent malicious links from taking control over a newly opened tab. Normally, window.opener JavaScript object allows the newly opened tab to control the parent window. This may lead to a phishing attack and enable the hackers to collect the user’s login details. Hence we use rel=”noreferrer noopener” to block the use of the window.opener JavaScript object because once the window.opener stops working, then a tab can’t control another tab.

WordPress started adding this attribute automatically from the 4.7.4 update. In this update, you might have noticed a new attribute rel=noopener alongside the target=_”blank” in the HTML header. This is an attribute that is automatically being added to all the internal and external links when you want to open them in a new tab. However WordPress has stopped adding noreferrer automatically to external links when you open them in a new tab, this update was brought in version 5.6. 

Does Rel=”noopener” affect SEO

Just like noreferrer, noopener also does not affect your ranking in any way. You can freely use it and ensure the safety of your website. 

Does noreferrer & noopener Impact Affiliate links

noreferrer & noopener do not affect affiliate links in any way, because affiliate links do not use rel attributes to track conversion. Instead, they use the affiliate id included in the link. This means you do not have to worry about it. 

Example affiliate link:

<a href=”//www.example.com/?ref=19041358″ rel=”noreferrer noopener” target=”_blank”>

What is rel=”nofollow”?

When rel=nofollow is added, it asks the search engines not to follow the specific link. It does not pass authority to the website. This means if you have added a link on your website with nofollow attribute then that link will not be considered a backlink. Considering your website is website A and you have linked to website B. Usually, this link you have added will be considered a backlink for website B. However, if you have used the nofollow attribute, this link will not be considered a backlink. 

Example:

<a href=”www.cheapflights.com” rel=”nofollow”> flight ticket</a>

Here the anchor text ‘flight ticket’ is hyperlinked with ‘www.cheapflights.com’. Since it is a nofollow link, it asks the search engines not to give credits to the link.

When to use rel=”nofollow”?

If you are worried about spam and don’t want your website to get a higher spam score, because of the content others post on your website. Then you should consider the use of nofollow attribute. 

You can use rel=nofollow is to control the spam attack on your site. At times, there may be a situation where you do not have control of what people publish on your websites, for instance blog comments and forum posting. In this case, if you do not use, nofollow links then you are inviting the spammers, this will flag Google to penalize your site. This is implemented by default in WordPress.comment section.

Does rel=”nofollow” affect SEO?

Using rel=”nofollow” restricts the flow of link juice. consider backlinks as a voting mechanism. The more votes a site gets the better the chances they have of ranking higher. This means rel=”nofollow” does affect your ranking. Because using nofollow means the link will not be considered a backlink. That in turn means the link will not be considered a vote and with fewer votes your chance of ranking higher is low.

That said it can also be beneficial to use nofollow because search engines recognize that not all links are equal. That means they realize that not all votes are equal because anyone can create a backlink. A website can manipulate the number of backlinks they get. To prevent manipulation search engines classify links as spammy based on where and how they appear. A spammy link has a high spam score and is generally sites that have taken part in manipulating backlinks. If your site is found to have backlinks to spammy sites then search engines may consider your site to be spam. To avoid this you can use nofollow in areas of your site where others post content namely blog comments and forums. 

Search engines do not want sites to purchase a backlink and if done may consider it spammy. However, they now see the need for good quality paid links for advertising. That means if you want a product reviewer to add your product’s link on their blog to promote your product, it can now be done without being considered spam. This is done by adding the attribute rel=”sponsored”. This tells the search engines that it’s promoted content or sponsored content and will not consider it spam. For the same purpose, they have also introduced another attribute rel=”UGC” to define user-generated content. 

The Difference Between Nofollow and Noreferrer

The difference between nofollow and noreferrer is that with no follow, the links are not considered backlinks while noreferrer restricts data to be passed from one page to another. This also means that with nofollow page information is passed to the next site and with noreferrer the link is considered as a backlink. 

The other major difference is that nofollow has an impact on page rank while noreferrer does not have any effect on ranking. 

How to implement “nofollow” “noreferrer” & “noopenar” attributes to your website

Now let’s take a look at how to implement the link attributes to your website. It’s really easy, all you have to do is replace “www.example.com” in the syntax below with your external link and replace “attribute” with one of the 3 link attributes you like nofollow noreferrer or noopenar

Syntax:

<a rel=”attribute” href=”http://www.example.com/”>example website</a>

For example, if you relace “attribute” with noopenar and the link to “http://www.techwyse.com/” then the syntax should look like this.

Example:

<a rel=”noopenar” href=”http://www.techwyse.com/”>TechWyse Home page</a>

You can also combine all 3 link attributes or 2 together depending on your requirement. If you combine all 3 it should look like this

<a rel=”nofollow noopenar noreferrer” href=”http://www.techwyse.com/”>TechWyse Home page</a>

norefferrer & noopener on WordPress

On WordPress when you insert a link and set it to open a new tab, they used to apply rel=”noopener noreferrer” to the link automatically. This was done to increase security and prevent phishing attacks. As a result, it will show up as direct traffic in the analytics data, because no information is passed on to the new tab. However, this is not the case anymore WordPress only adds rel=”noopener” to external links and not rel=”noreferrer”

Example:

<a href=”https://www.example.com/” target=”_blank” rel=”noopener noreferrer”>another website</a>

If you like to remove rel=”noopener noreferrer” from WordPress all that you have to do is not set the link to open in a new tab. Meaning set it to open in the same tab. 

How to Remove rel=”noopener noreferrer” from WordPress?

Note: WordPress has stopped adding noreferrer to your external links when you open them in a new tab. This was implemented in version 5.6. Check the documentation here. So, if you are using WordPress 5.6 or above you do not have to follow the below steps to remove the automatic addition of noreferrer.

You can remove rel=”noopener noreferrer” from your webpage but this will not have any effect. This is because nooener noreferrer attribute is integrated into the source code and will be added back when you save the webpage. 

The best way to remove it is by adding the following code to your WordPress theme’s function.php file. 

add_filter(‘tiny_mce_before_init’,’wpb_disable_noopener’);

function wpb_disable_noopener( $mceInit )

$mceInit[‘allow_unsafe_link_target’]=true;

return $mceInit;

Once done it will stop the automatic addition of the noopener attribute when you create a new web page. However, you may still need to remove it manually from existing pages.

Conclusion

I hope this article helped you understand the differences between noopener, noreferrer and nofollow. Now you can check your website to see how it’s been implemented and change them if need be. As a thumb rule if you do not want the other site to know you send them traffic use noreferrer, if you want to protect your site from phishing attacks use nopener and if you do not want to pass on the link trail use nofollow. 

Post By Joseph Abishek (4 Posts)

Joseph is a social media analyst at TechWyse. He’s passionate about growing client’s digital presence using proven marketing methods. In his free time, he enjoys listening to music and reading books.

Website: →