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

Certa vez, ajudamos um usuário cujos visitantes eram redirecionados para sites não seguros após clicarem em links externos normais. O culpado foi um pequeno trecho de código ausente que criava um risco de segurança.

É completamente normal sentir curiosidade ou até um pouco de confusão ao ver jargões técnicos como rel="noopener" no seu editor. Você pode se perguntar o que ele faz e se o seu site precisa dele.

Felizmente, você não precisa ser um desenvolvedor para manter seu site seguro. Nossa equipe na WPBeginner protegeu milhares de sites e sabemos exatamente como lidar com essas configurações de segundo plano.

Vamos ver o que este pequeno atributo de texto realmente faz e como ele protege seus leitores. Não se preocupe, adicionar rel="noopener" é completamente invisível para os visitantes do seu site. Ele não altera a cor dos seus links nem a velocidade com que a nova aba abre. Ele apenas funciona em segundo plano.

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.

Observe que um atributo HTML foi adicionado ao link: rel="noopener". Este atributo é adicionado para resolver uma vulnerabilidade de segurança.

<a href="http://example.com" target="_blank" rel="noopener">external link</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 conhecida como ‘Reverse Tabnabbing’.

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 acham 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, consulte nosso artigo sobre como adicionar título e nofollow a links no WordPress.

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

Em versões mais antigas do WordPress, uma tag rel="noreferrer" também era adicionada automaticamente aos links. Embora a maioria dos programas de afiliados use parâmetros de URL (o que significa que eles não foram afetados), a tag noreferrer ocasionalmente ocultava dados de rastreamento de painéis de afiliados e ferramentas de análise.

Por causa disso, o WordPress removeu a tag noreferrer na versão 5.3.1. Você não precisa mais se preocupar com ela afetando seus links de afiliados.

Em segundo lugar, a maioria dos afiliados usa um plugin de mascaramento 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.

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

Isso porque, se você remover rel="noopener" do link manualmente, o editor de blocos o adicionará automaticamente novamente 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 ter ainda mais controle sobre os atributos dos seus links sem tocar em nenhum código HTML, recomendamos o uso do plugin All in One SEO (AIOSEO).

Enquanto o WordPress lida com a segurança automaticamente, o AIOSEO permite que você adicione facilmente atributos de SEO como nofollow ou sponsored diretamente no pop-up de link do editor de blocos, 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.

Recursos Adicionais 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.