Certamente, se você usa o WordPress, já deve ter visto algumas tags estranhas nos links, caso tenha visto o código.
No começo é assustador, pois você sabe que não adicionou e pensa de onde veio isso? Não se preocupe, nada de ruim aconteceu, é o próprio WordPress que o adicionou.
Porque ele faz isto? Para protegê-lo, explico com mais detalhes.
É um atributo HTML que nos ajuda a estar protegidos de qualquer vulnerabilidade que ocorra ao colocar um link externo em nossa página web.
Toda vez que criamos um link para abrir em uma nova janela com target=”_blank”. Ao fazer isso, fomos expostos a hackers maliciosos que poderiam, através do seletor window.opener, modificar coisas graças à linguagem de programação JavaScript.
Coisas como nos levar a uma página falsa e nos pedir para inserir nossos dados.
Por esta razão, a partir da versão 4.7.4 do WordPress, qualquer link gerado para uma nova aba com target=”_blank” será vinculado com rel=”noreferrer noopener” evitando assim qualquer vulnerabilidade a qualquer link externo.
Como posso verificar se tenho rel=»noreferrer noopener»?
Aqui eu mostro meu editor WordPress e vamos fazer um exemplo.
Criamos um post e adicionamos um link externo de teste.
Agora veremos a entrada em formato HTML, para isso clicamos nos três pontos que aparecem no cabeçalho do bloco do lado direito e selecionamos "Editar como HTML"
Agora vamos ver como meu link está estruturado. Podemos notar que por padrão o WordPress chama o código rel=”noreferrer noopener”
Você está se perguntando o que é o Noreferrer?
É outro atributo que vem com o Noopener para evitar passar nossas informações pessoais para a nova aba que vamos.
Adicionar noopener noreferrer afeta o SEO?
Claro que não, isso não afeta o posicionamento dos links.
Você também pode estar se perguntando se isso afetaria os links que têm o atributo nofollow.
Vamos ver, se por exemplo tivéssemos um link como este:
<a rel="nofollow" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>
E agora deve ficar assim:
<a rel="nofollow noopener noreferrer" href="https://misitio.es/mi-enlace/">Texto de mi enlace</a>
Deixe-me dizer-lhe, isso também não afetaria o SEO.
E eu não estou dizendo isso, o próprio Google diz isso.
Como eles responderam do Google, adicionar noopener aos nossos links não afeta o posicionamento.
E para meus links de afiliados? Se o atributo Noreferrer não me permitir passar informações pessoais, serei prejudicado?
Além disso, a maioria dos programas de afiliados não fornece um URL exclusivo que inclua seu ID de afiliado.
Posso alternar Noopener e Noreferrer?
Sim, você pode, isso não afeta a proteção do link.
Vamos ver o exemplo a seguir, dentro da minha entrada de teste eu coloquei os códigos de trás para frente
Eu salvo a entrada e clico em Visualizar. Assim que estiver visualizando, verei o código-fonte, clicando em Ctrl+U (se você trabalha no Chrome)
Podemos perceber que os atributos ainda estão presentes desempenhando a função de proteção.
Posso desabilitar esta funcionalidade?
Você pode fazer isso, mas ficaria exposto novamente, então não faria sentido fazê-lo.
Da mesma forma, se você quiser desativá-lo, você teria que entrar no arquivo functions.php do seu tema filho ativo e adicionar o seguinte código:
// 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;
}
Espero que este artigo tenha ajudado você a entender como o atributo noopener funciona em links externos.
Recomendamos que você não modifique nada, pois assim estará protegido e seguro.
Até o próximo tutorial 😉