Website security is and always has been one of the top concerns of every WordPress website owner. As the number of external links any site can have, it has become important to have a layer of security that will make them safe to use. Having a tool that secures your website against malicious attacks by hackers who want to take advantage of these links. WordPress version 4.7.4 released in 2017 introduced a useful feature: the rel=”noopener” and rel=”noreferrer” HTML attributes.
This feature sparked a lot of controversy and was subject to misunderstanding when introduced. To avoid this, every website owner needs to understand the purpose and implications of the rel=”noopener” and rel=”noreferrer” attributes in WordPress. Therefore, we dedicate this article to providing answers to different questions our readers may have:
When you add a link to your website content, you can choose whether you want to open it in the same tab or in a new tab. With external links, the general preference is to open links in a separate tab as you don’t want visitors to leave your website. When you set links to open in a new tab, they will have an HTML target attribute set to “_blank”. These links will also have two additional values added to the rel HTML attribute by default – unopened and without reference. In this section, we’ll take a closer look at the rel=”noopener” attribute.
In general, links you set to open in a new tab will have the following HTML structure:
<a href="https://qodeinteractive.com/magazine/wordpress-noopener-noreferrer/link-url-goes-here" target="_blank" rel="noopener noreferrer">link text goes here</a>
Please note that this is an example and in a real link the URL and anchor text will be filled in appropriately.
And it will look a bit like this:
The purpose of the noopener value is to prevent external malicious websites from accessing the website to which the link is located. It is designed to combat so-called malicious phishing attacks. reverse tab. This is a type of hacking attack that is best described as: the link target page, often called a subpage, may contain malicious code. This code can be used to send users a copy of the page the link came from. Therefore, users of the parent page instead of the original are reassigned to a fake parent page using window.opener.location.assign(). Then the fake homepage can be used to obtain sensitive user information or to spread malware.
Both rel attribute values are very useful as they serve to increase website security. However, there is concern among website owners that these values may negatively impact their site’s SEO ranking. This is a common misconception that we will now address.
The misconception is that people often confuse the rel=”noopener” and rel=”nofollow” attributes. Only the rel=”noopener” attribute is relevant to website security. It tells browsers to stop using the window.opener Javascript feature. This does not affect SEO in any way, as search engines do not see a website as relevant when ranking it. On the other hand, rel=”nofollow” has a lot to do with a website’s SERP ranking. The rel=”nofollow” attribute tells search engines not to follow the link, which means your site will not pass any link authority to the link target.
The rel=”noreferrer” attribute serves a similar purpose as rel=”noopener”. It prevents the browser from collecting information about the home page (also known as a link referrer) and passing it to a subpage. Essentially, it hides information about the referrer when a link is clicked. While this has no effect on your SEO, it can affect your analytics. Because rel=”noreferrer” hides link referrer information, analytics tools cannot determine where a user is coming from. This means you won’t know the source of your inbound traffic.
Both rel=”noreferrer” and rel=”noopener” increase the security of your site. Actually, the value noreferrer was added to WordPress as a fallback because of the value of noopener. not always supported in all browsers.
As with rel=”noopener, users can sometimes confuse rel=”noreferrer” and rel=”nofollow” attributes. However, there is an important difference. Links with the rel=”noreferrer” attribute do not pass referrer information as they pass the link juice, the opposite of what rel=”nofollow” links do.
Another common concern of WordPress website owners is whether the phrase rel=”noreferrer” affects affiliate links. The rel=”noreferrer” attribute does not affect affiliate links, although it does not forward referrer information to the subpage. This is because most affiliate programs contain referrer URLs with unique IDs. This affiliate ID found in the given URL is used for tracking and ensures you get the commission you deserve.
However, most affiliate marketers often use cloaking plugins to hide URLs. This may be because they do not want to make such information public. Or they prefer to hide long query-like permalinks (which they look like). affiliate-website-url/products/?product_id=x&affiliate=yx and y are numbers).
Hide plugins will hide query parameters that would otherwise appear in the URL. However, the effects are cosmetic and do not prevent users from being directed to the appropriate affiliate website or from receiving your commission.
Links with rel=”noreferrer” may not affect your SEO or affiliate links, but they do play a role in analytics. You may be running several linked sites, or you may have a site with several subdomains and want to create links between them. In this case, it can be helpful to know which page and link appeals to users and encourages them to engage more. Alternatively, you can let other website owners know that you have linked to them so they may consider linking to you again.
If, for whatever reason, you decide to remove the rel=”noreferrer” feature from your site, you will need to use custom code. because this this feature is currently integrated into WordPress by default. We will carefully explain the process of removing the rel=”noreferrer” attribute, and then you can decide if you want to apply it.
You will need to disable the Gutenberg editor as a requirement for this process. One way to do this is to install a plugin called Classic Editor. Then you will need to add some code to remove the noreferrer value, in your theme’s function.php file or in your site-specific plugin.
We will show you the steps using site specific plugin. Be sure to refresh your FTP knowledge as you will need it in the next steps. We also strongly recommend that you make a backup of your website before proceeding, just in case.
Firstly, connect to server using your FTP credentials and go to your root WordPress directoryusually called public_html.
At that time, Go to wp-content/themes directory and Click on your theme’s directory to open.
Find the functions.php file inside your theme’s directory, right click onand Select View/Edit.
Open the file using your preferred text editor and add the following code at the end of the file.
//This code removes the noreferrer value from the rel attribute of your new or updated links
function removing_noreferrer_link_rel( $rel_values ) {
return 'noopener';
}
add_filter( 'wp_targeted_link_rel', 'removing_noreferrer_link_rel', 999 );
After that, save changes you did and restore the file to the serverthis overrides the old file.
You may have noticed that we have added a comment in front of the code. This is good practice and can help you keep track of the code you’ve added and what it’s doing. In this case, the code removes the noreferrer value from new or updated links, meaning only they will be affected by this change.
You can also remove the noreferrer value from existing links if needed. This can be done manually using the Classic Editor or automatically using a database replacement plugin like below. Better Search Replace. We recommend choosing to perform a search-replace on your WordPress website, as using a plugin is much faster and easier than doing it manually. With this, you can add noreferrer to the Search String field and keep the Replace field blank.
final thoughts
WordPress has always evolved since its inception and tried to address any security concerns that might arise. This led to the introduction of the rel=”noopener” and rel=”noreferrer” attributes for links that open in a new window.
These features add to the overall security of your site, which helps both you and your users. Using rel=”noopener” and rel=”noreferrer” in WordPress does not affect your SERP ranking or user experience with your site, it just makes browsing experience safe and enjoyable for everyone. So, if you have any misconceptions about these attributes, I hope this article has managed to clear them up.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
