HTML could be considered the backbone because it helps navigate between web pages. When you notice HTML, you will see the code rel= “noopener noreferrer” after some external links of a page on WordPress website. You probably wonder if this code is strange because it appears automatically and you did not add. Then, you feel worried about its impact on your site’s SEO? If so, you should not worry much.
In this article, we will learn about the rel noopener noreferrer code, the reason why this code appears particularly outbound links and its impact on SEO, security as well as privacy.
What Is rel noopener noreferrer?
rel= “noopener noreferrer” is a tag of the HTML links and the target=”_blank” attribute that is used for external links. The rel= “noopener noreferrer” code ensures that when a link is clicked, the new webpage cannot take control of the original page. This link attribute protects the security and privacy of the original page, prevents potential risks and enhances a safer browser behavior.
The rel noopener noreferrer links do not affect directly to SEO rankings or link acquisition, but they could prove the security and trustworthiness to user experience. To see which links on user page have this code, user can try one of these ways below:
One, on WordPress, the user opens the code editor and finds rel= “noopener noreferrer” by the browser’s “Find” feature.
Two, in a browser, the user opens the page, then right-clicks and chooses “Inspect.” User’s screen will be divided into 2 tabs and the page’s code is usually on the right. User just finds the code snippet in the code tab.
From two pictures above, user can see the code generally looks like:
<a href=”https://externallink.com” target=”_blank” rel=”noopener noreferrer”>Visit External Site</a>
href: is showing the destination of outbound link
The text between the <a> and closing </a>: the text that the user sees and clicks on. (For example, users will see and click Visit External Site)
target=”_blank”: This feature requires the browser to open the link in a new tab, but the original site is still keeping.
Last is rel= “noopener noreferrer”
This code is divided into 2 separate parts: rel= “noopener” and rel= “noreferrer”. Both of these tags affect how the original website and the linked website interact. However, two tags have different effects on user experience.
What Is rel= “noopener”?
rel=”noopener” tag is a very important HTML attribute that helps protect the security of your website. The rel= “noopener” attribute helps stop a security issue called reverse tabnapping. Reverse tabnapping is a type of attack where an attacker exploits a vulnerability that occurs when you open a website in a new tab. When a user clicks on a link, the destination page opens in a new tab as expected.
However, the referring page (the page the user is on) will be redirected to a toxic website or toxic links controlled by the attacker. This website may be a fake page used to trick users into providing login information or downloading malware. This type of attack is very effective because users tend to trust malicious websites because they come from a website they trust (the original page). For example, if a user clicks on a link from a trusted blog, they may be lured in without suspicion.
When you add rel= “noopener” to links that open in a new tab. The rel=”noopener” attribute stops the page from opening in a new tab from being able to use JavaScript to manipulate the original page (the page the user was on before clicking the link). This is important because without rel= “noopener”, the new page could interfere with the referring page, creating a security risk. This means the destination page cannot change or manipulate the source page, which helps prevent reverse tabnapping attacks.
What is rel= “noreferrer”?
If the rel= “noopener” tag is for security, then rel= “noreferrer” will keep the referral site private. The purpose of this tag is to hide the traffic’s origin data in the analytics tools like Google Analytics users link to. To put it simply, when you click on a link that this tag appears in, the new page will open but the owner will not know who clicked.
With normal links, when clicked, the original website can record the URL that sent traffic to the website owner’s site. However, if users visit a website via a link with rel= “noreferrer” tag, the external website will not collect any data about the website from the visit website.
Therefore, the rel= “noreferrer” tag has two main effects:
Firstly, this tag stops sending “referrer” information. When a user clicks on a link, the browser will not send information about the original website to the destination page. This “referrer” information usually indicates which website sent the user to the destination page.
Secondly, it does not affect SEO implications. Even though it does not send referrer information, rel= “noreferrer” does not lose the SEO value of the link. The backlink (link pointing back) is still tracked by Google and other search engines and transmits SEO power such as domain authority and page rank from the source page to the destination page.
And if the website owner sees a sudden but unseen traffic spike in direct traffic in Google Analytics, probably referral traffic is the reason. Users should use rel= “noreferrer” tag when users do not like their competitors knowing their article while users link to them.
Moreover, users want referrer information private. Or in case, the site that users link to is untrustworthy.
Impact Of rel= “noopener noreferrer” On SEO Implication
In fact, rel noopener noreferrer does not affect SEO much. Therefore, tags rel= “noopener” and rel= “noreferrer” also do not influence SEO.
Regarding rel= “noopener”, it does not affect the SEO of the website. Google’s crawlers all understand the HTML structure of your website with or without this attribute. This means that search rankings will not be affected by the use of rel=”noopener” and use it without worrying about penalties from Google.
Regarding rel= “noreferrer”, it is similar to rel= “noopener” in that it has no direct effect on SEO. However, When you use rel= “noreferrer”, the destination page will not receive referrer information. This can affect the development of organic link-building relationships. These relationships play a vital role for optimizing SEO strategies.
SEO professionals and marketers often invest a lot of money and effort into quality link building. A quality backlink can cost more than $1,000. Therefore, hiding the referrer information (through rel= “noreferrer”) can reduce the ability to develop these link building relationships, indirectly affecting the SEO strategy.
In addition, users should not use rel noopener noreferrer for internal links. Firstly, internal links usually don’t have the same security issues as external links, because they lead to pages within the same domain. So users this code is not necessary in this case.
Secondly, if users use this code for internal links, it will not help improve the SEO of the site because internal links do not need to hide the “referrer” (origin information) and stopping JavaScript access between internal pages does not bring significant benefits. Finally, if users adding rel= “noopener noreferrer” may make it difficult to interact between pages, although this is not always obvious to users.
Final Thought
In the current web development context, rel= “noopener noreferrer” plays an important role in information security and privacy. This code can be separated into 2 tags and each tag has its own function to suit the user’s needs.
