Have you ever wondered what rel=” noopener” in WordPress means?
Table of Contents
WordPress will immediately add the rel=” noopener” tag to the link when you add one that opens in a new tab.
We shall define rel=” noopener” in WordPress and discuss how it impacts your website in this post.
What is rel=” noopener” in WordPress?
rel="noopener" Is an attribute that can be added to a <a> (anchor) element in HTML. It tells the browser to open the link in a new window or tab without setting the new window or tab as the opener window for the original window.
This can be useful in cases where you have a page that opens links in new windows or tabs, but you don’t want the new window or tab to have any access to the original window. This can help to prevent some types of cross-site scripting attacks.
Here’s an example of how rel="noopener" can be used:
<a href="https://example.com" target="_blank" rel="noopener">Click here to open example.com in a new window</a>In this example, when the user clicks on the link, it will open https://example.com In a new window or tab, the new window or tab will not have access to the original window. This can help to prevent the new window or tab from being able to manipulate the original window in any way.
Here is a real-live example:
Linkilo is the best internal linking WordPress plugin.
You can see the word “Linkilo” opens in the same window with no added attributes.
With “best internal linking WordPress plugin” I’ve added the option of “Open in new tab” and the rel=’noopener’
<p><a href="https://linkilo.co/">Linkilo</a> is the <a href="https://linkilo.co/best-internal-linking-wordpress-plugins/" target="_blank" data-type="post" data-id="1973" rel="noreferrer noopener">best internal linking WordPress plugin</a>.</p>The link now has added the rel=” noopener” and rel=” noreferrer” HTML attributes. These qualities have been introduced to fix a security flaw.
Why Is rel=”noopener” used?
The issue is that a new tab might potentially take over control of its referring window via JavaScript code. If you provide a link to an external website that contains harmful code, that website may alter the original page (your website) by using JavaScript’s window.opener property to steal data and disseminate malicious code.
To prevent the new tab from using this JavaScript functionality, WordPress adds rel=” noopener” to the code. Similarly, the rel=” noreferrer” property stops the new tab from receiving the referrer information.
How does rel=”noopener” affect your WordPress SEO?
It does not.
The rel=” noopener” property enhances WordPress security; however, some users choose not to use it because they believe it will harm their website’s SEO.
However, that is a misconception.
It does not affect WordPress performance as a whole or the SEO rankings of your website.
What’s the difference between “noopener” and “nofollow”?
The terms rel=” noopener” and rel=” nofollow” are easily confused. But these are two quite different qualities.
The noopener property enhances WordPress security by preventing cross-site hacking on your website.
The nofollow property, on the other hand, prohibits the connected website from receiving any SEO link juice from your website.
When following a link on your website, search engines search for and take into account the nofollow property. They do not, however, take the noopener tag into account.
WordPress, by default, forbids you from adding nofollow to your external links. You must use a plugin in WordPress if you want to add nofollow.
See our post on adding titles and nofollow links in WordPress for more information.
Combining rel=noopener to Other Link Attributes
While rel=noopener is specifically designed to prevent malicious websites from hijacking your website, other link attributes can help you control the behavior of a link.
The target attribute can be used to open a link in a new window or tab. You can also specify the size of the window or tab with the features attribute.
Additionally, the rel=”noopener noreferrer” attribute combination can be used to open a link without sending an HTTP referrer header. This means that the website you are linking to will not know which website sent the visitor to their site.
When deciding which link attribute to use, it’s important to consider the security implications of each option. If you’re linking to an external website, it’s best to use the rel=noopener attribute to ensure the security of your website.
Does rel=”noreferrer” affect affiliate links in WordPress?
The rel=” noreferrer” attribute does not affect affiliate links in WordPress. Because rel=” noreferrer” stops the referrer information from flowing to the new tab, some people think it affects affiliate links.
However, most affiliate platforms provide you with a special URL containing your affiliate ID. This indicates that the other website receives your affiliate ID as a URL parameter and tracks it.
Second, most affiliate marketers cover their affiliate links with a link-cloaking plugin.
The affiliate link that your users click on with link cloaking is the URL of your website, which takes people to the target URL.
Accessibility Implications of Using rel=noopener
When it comes to accessibility implications of using rel=noopener, it’s important to note that the noopener attribute does not affect the link target in any way. It only affects the window that the link is opened in.
This means that if you are linking to a page that has accessibility features, such as an audio description or closed captions, they will still be available to users who open the link in a new window.
However, since the new window will not have the same context as the original window, it’s important to ensure that users can still access the features they need while they are in the new window.
You can do this by providing additional information or instructions in the link text, or by providing a separate link that provides access to the accessible features.
Which browser support rel=”noopener”?
When it comes to browser support for rel=noopener, the majority of modern browsers support this attribute. Specifically, rel=noopener is supported in Chrome, Firefox, Edge, Safari, Opera, and Internet Explorer.
As such, you can rest assured that by using this attribute, you won’t be leaving any users behind. This is in contrast to other link attributes that may not have the same level of browser support.
How to Use rel=noopener correctly
Using rel=noopener correctly is essential to ensuring your website’s security. With this attribute, you can ensure that any external links on your website are opened in a new window or tab. By doing this, you can prevent malicious websites from hijacking any information from your website.
To make sure you’re using rel=noopener correctly, there are a few steps to take.
First, make sure the target=”_blank” attribute is present in the link. This will ensure that the link opens in a new window or tab.
Then, add the rel=noopener attribute to the link. This will ensure that the opened window won’t have access to the parent page. It’s also recommended to add the rel=noreferrer attribute, which also helps to protect against malicious links.
Finally, make sure to test the link to ensure that it’s working correctly.
<p>Linkilo is the <a href="https://linkilo.co/best-internal-linking-wordpress-plugins/" target="_blank" rel="noreferrer noopener">best internal linking WordPress plugin</a>.</p>How to Test if You’re Using rel=noopener
Having a comprehensive understanding of rel=noopener is essential if you want to keep your website secure. But how can you test to make sure you’re using rel=noopener correctly? Fortunately, there are several ways to test this.
One of the ways to test if you’re using rel=noopener correctly is to inspect the HTML code of your page. Make sure that all external links have the rel=noopener attribute.
Another way to test your use of rel=noopener is to open your page in two separate browsers. In one browser, open the page with the external link. Then, in the other browser, open the page with the external link. You should see two separate windows. This means that the rel=noopener attribute is working correctly.
If you are using Linkilo, by selecting “Open New Window for External Links”, all external links will contain rel=”noopener”
Finally, you can use a tool such as Google’s Lighthouse to check if all of your external links have rel=noopener. Lighthouse will scan your page and generate a report that will tell you if any of your external links need the rel=noopener attribute.
Testing if you’re using rel=noopener correctly is an important step in making sure your website is secure. By using the methods described above, you can ensure that your website is protected from malicious websites.
How do you disable rel=”noopener” in WordPress?
Removing rel=”noopener” from links on your site is not necessary. It improves the security of your website and has no negative effects on its functionality or SEO.
If you must delete it, however, you need to disable WordPress’s Gutenberg block editor and utilize the outdated traditional editor.
That’s because the block editor will automatically add rel=”noopener” back in to protect the security of your website if you manually remove it from the link.
You must add a code snippet to your theme’s functions.php file.
Just copy the below code below:
Add_filter(‘tiny_mce_before_init’,’wpb_disable_noopener’);
Function wpb_disable_noopener( $mceInit ) {
$mceInit[‘allow_unsafe_link_target’]=true;
Return $mceInit;
}By doing this, WordPress won’t apply rel=” nofollow” to new links. To delete the property, you must also manually modify any outdated links.
If you’re tired of the tedious process of manually adding internal links to your WordPress site, give Linkilo.co a try. With its advanced features and easy-to-use interface, you can streamline your internal linking strategy and improve your website’s SEO.
Don’t waste any more time on manual internal linking – sign up for Linkilo.co today and experience the difference it can make!
