Surely if you use WordPress you will have seen some strange tags in the links if you have looked at the code.
At first it's scary since you know you haven't added it yourself and you think where did that come from? Do not worry, nothing bad has happened, it is WordPress itself who has added it.
Why does he do this? To protect you, I explain in more detail.
It is an HTML attribute that helps us to be protected from any vulnerability that occurs when placing an external link within our web page.
Every time we create a link to open in a new window with target=”_blank”. By doing this, we have been exposed to malicious hackers who could, via the window.opener selector, modify things thanks to the JavaScript programming language.
Such things as taking us to a fake page and asking us to enter our data.
For this reason, starting with version 4.7.4 of WordPress, any link generated to a new tab with target=”_blank” will be linked with rel=”noreferrer noopener” thus avoiding any vulnerability to any external link.
How can I verify that I have rel=»noreferrer noopener»?
Here I show you my WordPress editor and we are going to make an example.
We create a post and add a test external link.
Now we are going to see the entry in HTML format, to do this we click on the three dots that appear in the block header on the right side and select "Edit as HTML"
Now we will see how my link is structured. We can notice that by default WordPress calls the code rel=”noreferrer noopener”
Are you wondering what Noreferrer is?
It is another attribute that comes with Noopener to avoid passing our personal information to the new tab that we are going to.
Does adding noopener noreferrer affect SEO?
Of course not, it does not affect the positioning of the links.
You may also be wondering if it would affect links that have the nofollow attribute.
Let's see it, if for example we had a link like this:
<a rel="nofollow" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>
And now it should be as follows:
<a rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>
Let me tell you, it wouldn't affect SEO either.
And I'm not saying it, Google itself says it.
As they have responded from Google, adding noopener to our links does not affect the positioning.
And for my affiliate links? If the Noreferrer attribute does not allow me to pass personal information, will I be harmed?
Also, most affiliate programs do not provide you with a unique URL that includes your affiliate ID.
Can I alternate Noopener and Noreferrer?
Yes you can, this does not affect the protection of the link.
Let's see the following example, inside my test input I have placed the codes backwards
I save the entry and click Preview. Once I'm viewing I'm going to see the source code, clicking Ctrl+U (If you work in Chrome)
We can realize that the attributes are still present performing the protection function.
Can I disable this functionality?
You can do it, but you'd be exposed again, so it wouldn't make sense to do it.
Similarly, if you want to disable it, you would have to go into your active child theme's functions.php file and add the following code:
// Esto desactiva voluntariamente una funcionalidad de seguridad de tinyMCE.
// NO ES RECOMENDABLE usar este código.
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
$mceInit['allow_unsafe_link_target']=true;
return $mceInit;
}
I hope this article has helped you understand how the noopener attribute works on external links.
We recommend you not to modify anything because that way you will be protected and safe.
Until the next tutorial 😉