O que é rel=”noopener” no WordPress? (Explicado)

Tivemos um cliente cujo site redirecionava os visitantes para sites duvidosos após clicarem em links externos. O problema era um pequeno trecho de código ausente que criava uma grande falha de segurança.

É um pensamento assustador, mas essa vulnerabilidade pode afetar qualquer site WordPress. Jargões técnicos como rel="noopener" podem parecer confusos, deixando você preocupado se o seu site é realmente seguro para seus visitantes.

Aqui no WPBeginner, protegemos milhares de sites e aprendemos que esses pequenos detalhes fazem uma grande diferença. Vamos explicar o que é rel="noopener" em termos simples e por que é tão importante.

Vamos ver como esse pequeno atributo protege você e seus usuários.

O que é rel=”noopener” no WordPress?

Ao adicionar links ao seu site WordPress, você pode usar atributos HTML para controlar o que acontece quando o link é clicado.

Por exemplo, ao criar um link, há um interruptor que permite abri-lo em uma nova aba.

O código HTML gerado pelo WordPress para este link se parece com isto:

<a href="http://example.com" target="_blank" rel="noreferrer noopener">external link</a>

Observe que alguns atributos HTML foram adicionados ao link: rel="noopener" e rel="noreferrer". Esses atributos são adicionados para resolver uma vulnerabilidade de segurança.

Quando você usa target="_blank" para fazer um link abrir em uma nova aba, há algo potencialmente inesperado que acontece nos bastidores por padrão. A nova aba, na verdade, obtém uma espécie de conexão de volta para a aba original em que você estava.

Essa conexão é feita através de algo nos navegadores web chamado window.opener. A página na nova aba pode acessar e até controlar certas propriedades da aba original, como alterar o endereço da página (window.opener.location).

Isso cria uma vulnerabilidade de segurança.

Imagine que você clica em um link em um site confiável e ele abre uma página maliciosa em uma nova aba. Por causa dessa conexão window.opener, essa página maliciosa poderia potencialmente alterar a página confiável *original* que você estava visualizando para uma página de login falsa (um golpe de phishing), enganando você quando você voltar para a aba original.

O atributo de link noopener foi projetado para prevenir esse risco de segurança específico.

Quando você adiciona rel="noopener" a um link que abre em uma nova aba, você diz ao navegador para *não* criar essa conexão window.opener entre as duas abas. Isso protege seus usuários de golpes e tentativas de phishing.

Como o rel=”noopener” Afeta o SEO do Seu WordPress?

Não afeta.

Embora o atributo rel="noopener" melhore a segurança do seu site WordPress, alguns usuários evitam usá-lo porque pensam que isso afetará o SEO do WordPress.

Mas isso é apenas um mito.

Não tem impacto nas classificações de SEO do seu site ou no seu desempenho geral do WordPress.

Qual é a Diferença Entre “noopener” e “nofollow”?

É fácil confundir rel="noopener" com rel="nofollow". No entanto, eles são atributos completamente separados.

O atributo noopener impede que seu site sofra hacking entre sites e melhora a segurança do WordPress.

Por outro lado, o atributo nofollow impede que seu site passe o suco de link de SEO para o site vinculado.

Os mecanismos de busca procuram e consideram o atributo nofollow ao seguir um link em seu site. No entanto, eles não dão nenhuma consideração à tag noopener.

O atributo nofollow informa aos mecanismos de busca para não passar nenhuma autoridade de SEO para o site para o qual você está linkando. Embora o editor de blocos do WordPress tenha uma opção integrada para adicionar nofollow a um link, um plugin é frequentemente necessário para um controle mais avançado.

Por exemplo, você pode querer aplicar automaticamente a tag nofollow a todos os links externos do seu site, e é aí que um plugin de SEO se torna essencial.

Para saber mais, veja nosso artigo sobre como adicionar título e nofollow a links no WordPress.

O rel=”noreferrer” afeta os links de afiliados no WordPress?

O rel="noreferrer" não afeta links de afiliados no WordPress. Alguns usuários acreditam que sim porque rel="noreferrer" impede que as informações de referência sejam passadas para a nova aba.

No entanto, a maioria dos programas de afiliados fornece um URL exclusivo com seu ID de afiliado. Isso significa que seu ID de afiliado é passado como um parâmetro de URL para que o outro site rastreie.

Em segundo lugar, a maioria dos afiliados usa um plugin de ocultação de links para seus links de afiliados.

Com a ocultação de links, o link de afiliado no qual seus usuários clicam é, na verdade, o próprio URL do seu site, que então redireciona os usuários para o URL de destino.

Como Desativar rel=”noopener” no WordPress?

Não há necessidade de remover rel="noopener" dos links no seu site. É bom para a segurança do seu site e não tem impacto de desempenho ou SEO no seu site.

No entanto, se você precisar removê-lo, terá que desativar o editor de blocos Gutenberg no WordPress e usar o editor clássico.

Isso ocorre porque, se você remover rel="noopener" do link manualmente, o editor de blocos o adicionará automaticamente de volta para manter seu site seguro.

Uma vez que o editor de blocos esteja desativado, você precisará adicionar um trecho de código ao arquivo functions.php do seu tema ou ao plugin WPCode (recomendado). Você pode aprender como usar o Plugin Gratuito WPCode em nosso guia sobre como adicionar facilmente código personalizado no WordPress.

Simplesmente copie o seguinte código para um novo trecho de PHP:

add_filter('tiny_mce_before_init','wpb_disable_noopener');
function wpb_disable_noopener( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

Certifique-se de ativar o alternador 'Ativo' e, em seguida, clique no botão 'Salvar Trecho'.

Isso impedirá que o WordPress adicione rel="noopener" a novos links. Você também precisará editar manualmente quaisquer links antigos para remover o atributo.

Para ainda mais controle sobre os atributos dos seus links, recomendamos o uso do plugin All in One SEO (AIOSEO). O AIOSEO permite adicionar facilmente atributos como nofollow ou sponsored diretamente no editor do WordPress, ajudando você a gerenciar seus links externos para as melhores práticas de SEO.

Perguntas Frequentes Sobre rel=”noopener”

Aqui estão as respostas para algumas das perguntas mais comuns que recebemos sobre o atributo “noopener” no WordPress.

1. Qual é o principal propósito de usar rel=”noopener”?

O principal objetivo de rel="noopener" é a segurança. Ele impede que uma nova aba consiga controlar a aba original que a abriu, o que protege seus visitantes de golpes de phishing maliciosos.

2. O rel=”noopener” é bom para SEO?

O atributo rel="noopener" não tem impacto direto, positivo ou negativo, no SEO do seu site. Sua função é puramente de segurança, e os motores de busca não o utilizam como fator de ranqueamento.

3. Devo remover o rel=”noopener” dos meus links?

Não, não há um bom motivo para remover rel="noopener". Ele oferece um benefício de segurança importante sem efeitos negativos no SEO ou no desempenho do site, portanto, é melhor deixá-lo no lugar.

4. O WordPress adiciona rel=”noopener” automaticamente?

Sim, o WordPress adiciona automaticamente rel="noopener" aos links configurados para abrir em uma nova aba. Este importante recurso de segurança foi introduzido pela primeira vez no WordPress 4.7.4 e é parte padrão do editor de blocos moderno.

Guias de Especialistas sobre o Uso de Links no WordPress

Esperamos que este artigo tenha ajudado você a aprender sobre rel="noopener" no WordPress. Você também pode querer ver outros guias sobre o uso de links no WordPress:

• Guia para Iniciantes sobre Como Adicionar um Link no WordPress
• Como Abrir Links Externos em uma Nova Janela ou Aba com WordPress
• Como Adicionar Links Nofollow no WordPress (Guia Simples para Iniciantes)
• Como Adicionar Título e NoFollow ao Popup de Inserir Link no WordPress
• Como usar Nofollow em Todos os Links Externos no WordPress
• Como Rastrear Cliques em Links e Botões no WordPress (Maneira Fácil)
• Como Rastrear Links de Saída no WordPress
• Como Alterar a Cor do Link no WordPress (Guia para Iniciantes)
• Linkagem Interna para SEO: O Guia Definitivo das Melhores Práticas
• Como Pré-carregar Links no WordPress para Velocidades de Carregamento Mais Rápidas
• Como Encontrar e Corrigir Links Quebrados no WordPress (Passo a Passo)
• Melhores Plugins de Linkagem Interna para WordPress (Automático + Manual)

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.