What are rel=”noopener” and rel=”noreferrer” in WordPress
Website security is and has always been one of the top concerns of every WordPress website owner. As the number of external links any site can have has grown, it became important to have a layer of security that will make using them safe. To have a tool that ensures the security of your website from malicious attacks by hackers that want to exploit those links. WordPress version 4.7.4 that came out in 2017 introduced a helpful feature—the rel=”noopener” and rel=”noreferrer” HTML attributes.
This feature raised a lot of controversies and was subject to misconception when it was introduced. To avoid that, every website owner needs to understand the purpose and effects of the rel=”noopener” and rel=”noreferrer”attributes in WordPress. Therefore, we have dedicated this article to providing answers to different questions our readers may have:
Whenever you add a link to your website’s content, you can choose if you want to open it in the same or a new tab. With external links, the usual choice is to have the links open in a separate tab, as you don’t want visitors to leave your website. And when you arrange links to open in a new tab, they will have an HTML target attribute that is set to “_blank”. Those links will also, by default, have two additional values added to the rel HTML attribute – noopener and noreferrer. In this section, we are going to take a closer look at the rel=”noopener” attribute.
In general, the links that you set to open in a new tab will have the following HTML structure:
<a href="link-url-goes-here" target="_blank" rel="noopener noreferrer">link text goes here</a>
Please note that this is an example and a real link will have the URL and link text properly filled out.
And it would look a bit like this:
Adding the rel attribute to the <a> tag serves to specify the relationship between your website and the target web page or document.
The purpose of the noopener value is to prevent external malicious websites from accessing the website where the link is located. This is designed specifically to combat malicious phishing attacks called reversed tabnabbing. It is a type of a hacking attack best described in the following manner: the link target page, often called a child page, can contain malicious code. That code can be employed to send users to a copy of the page where the link originated. So, instead of the original, parent page users are reassigned using window.opener.location.assign() to a fake parent page. Then the fake parent page can be used to acquire sensitive user information or spread malware.
Both rel attribute values are quite beneficial as they serve to improve website security. However, there is concern among website owners that these values could negatively impact their site’s SEO rankings. This is a common misconception that we will address now.
The mistaken belief is mostly due to people confusing the rel=”noopener” and rel=”nofollow” attributes. Only the rel=”noopener” attribute relates to website security. It tells the browsers to stop using the window.opener Javascript property. This does not affect SEO in any way as search engines don’t consider it relevant when ranking a website. On the other hand, the rel=”nofollow” is very relevant to a website’s SERP ranking. The rel=”nofollow” attribute tells search engines not to follow the link, which means your site won’t pass any link authority to the link target.
Qode Themes: Top Picks
View Collection
The rel=“noreferrer” attribute serves a similar purpose to rel=”noopener”. It prevents the browser from collecting information about the parent page (also known as a link referrer) and passing it onto a child page. 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. Since rel=”noreferrer” hides the link referrer information, analytics tools can’t determine where a user came from. That means you won’t know the source of your incoming traffic.
Both the rel=”noreferrer” and the rel=”noopener” serve to improve your site’s security. In fact, noreferrer value was added to WordPress as a fallback because the noopener value wasn’t always supported across all browsers.
Just like with the rel=”noopener, users can sometimes confuse the rel=“noreferrer” and rel=”nofollow” attributes. However, there is a significant difference. Links with the rel=”noreferrer” attribute don’t pass referrer information while passing the link juice, which is exactly the opposite of what rel=”nofollow” links do.
Another common concern WordPress website owners have is whether rel=”noreferrer” affects their affiliate links. Despite not passing referrer information to the child page, the rel=”noreferrer” attribute doesn’t affect affiliate links. This is because most affiliate programs include referral URLs containing unique IDs. That affiliate ID, contained in the given URL, is used for tracking and ensures you will get your well-earned commission.
However, most affiliate marketers often use cloaking plugins to hide the URLs. This can be because they don’t want to disclose such information publicly. Or they prefer to hide the long query-like permalinks (that look like affiliate-website-url/products/?product_id=x&affiliate=y, with x and y being numbers).
Cloaking plugins will obscure the query parameters that would otherwise be visible in the URL. However, their effect is cosmetic and it doesn’t stop users from being redirected to the appropriate affiliated website, or you from getting your commission.
Links with the rel=”noreferrer” might not affect your SEO or affiliate links, but they do play a role in analytics. You might be running several interconnected sites, or own a site with several subdomains, and you want to create links between them. In that case, it might benefit you to know which page and link appealed to the users and inspired them to engage further. Alternatively, you might other website owners to know you’re linking to them so they would consider linking back to you.
Whatever your reason may be, if you decide to remove the rel=”noreferrer” attribute from your site, you need to use custom code. That is because this attribute is currently integrated in WordPress by default. We will carefully explain the process for removing the rel=”noreferrer” attribute and then you can decide whether you want to implement it or not.
As a requirement for this process, you will need to disable the Gutenberg editor. One way you can do this is by installing a plugin called Classic Editor. Then, to remove the noreferrer value, you will need to add some code, either in the functions.php file of your theme or inside your site-specific plugin.
We will show you the steps using a site-specific plugin. Make sure you brush up on your knowledge of FTP, as you will need it in further steps. Also, we strongly suggest making a backup of your website before proceeding, just in case.
First, connect to the server using your FTP credentials and navigate to your root WordPress directory, often called public_html.
Then, navigate to the wp-content/themes directory and click on your theme’s directory to open it.
Find the functions.php file within your theme’s directory, right-click on it, and select the View/Edit option.
Open the file using your preferred text editor and insert 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 );
Afterward, save the changes you made and upload the file back to the server, which will override the old file.
You might have noticed we added a comment before the code. This is good practice and can help you keep track of the code you add and what it does. In this case, the code removes the noreferrer value from new or updated links, meaning they will be the only ones affected by this change.
You can also remove the noreferrer value from existing links if you need to. That can be done manually, using the Classic Editor, or automatically, using a database-alteration plugin like Better Search Replace. Since using a plugin is far quicker and easier than doing it manually, we suggest opting to perform a search-replace on your WordPress website. With it, you can simply insert noreferrer in the Search for string field and keep the Replace field empty.
Final thoughts
Since its inception WordPress has always improved and tried to address any security concerns that could arise. This led to the introduction of the rel=”noopener” and rel=”noreferrer” attributes for links that open in a new window.
These attributes contribute to the overall safety of your site, which helps both you and your users. Using rel=”noopener” and rel=”noreferrer” in WordPress won’t affect your SERP ranking or your user’s experience of your site, it will simply make the browsing experience a safe and fun one for all. So, if you had any misconceptions about these attributes, hopefully, this article managed to clear them up.
