Explicando: follow, noreferrer, noopener e external

Este artigo explica o que são rel = ”noopener noreferrer nofollow”, seu uso e implicações de segurança e otimização de mecanismo de pesquisa (SEO).

Se você está envolvido em desenvolvimento web ou otimização de mecanismo de pesquisa (SEO), é provável que tenha tropeçado nos termos noopener, noreferrer e nofollow. O que é noopener noreferrer? Que tal nofollow? Neste post, estamos explicando todos eles e suas implicações em SEO e segurança na web.

Introdução

Todos os três termos (noopener, noreferrer e nofollow) são valores do atributo rel da tag âncora em HTML. Indiscutivelmente, nofollow é o mais conhecido entre os desenvolvedores web e SEO experts.

Anchor <a> tag âncora é comumente usada em HTML para definir um URL/link.

Por exemplo: Considere a seguinte linha de código.

<a href=”https://www.dannybia.com”>
Clique aqui para visitar o site Danny’a Home Page.
</a>
Exemplo detalhado hospedado por GitHub (https://github.com/)

Você pode ver que há um atributo href (href vindo do Hypertext REFerence) que é usado e que o valor desse atributo é o endereço da web da página inicial da Danny’s Home Page. O que se segue é o texto que é exibido para você como um usuário. Dependendo do seu CSS e navegador, este texto pode ser sublinhado, colorido de forma diferente ou ambos.

O tag âncora pode ter muitos atributos diferentes – um deles sendo rel (rel vindo de RELationship [RELacionamento]). O tópico principal desta postagem do blog é sobre noopener, noreferrer e nofollow – todos os três sendo os valores do atributo rel.

Novamente, considere a seguinte linha de código.

<a href=”https://www.dannybia.com/”>
rel=”noopener noreferrer nofollow”
target=”_blank”>Clique aqui para visitar o site Danny’a Home Page.
</a>
Exemplo detalhado hospedado por GitHub (https://github.com/)

Você pode notar rapidamente três valores do relatributo. Mas agora você também pode ver o atributo target com o valor target="_blank". Esta parte do código instrui o navegador da web a abrir esse link em uma nova guia.

E esta é a principal razão pela qual os valores gostam noopener e noreferrer são usados. É também a causa raiz de possíveis desafios de segurança e phishing.

Vamos discuti-los em mais detalhes e sua importância para SEO e segurança e quando você deve adicionar rel, adicionar nofollow e qual é a importância de adicionar rel noopener.

O que é noopener?

Quando você está usando o valor target="_blank", algo interessante acontece. A página para a qual você está criando um link obtém acesso parcial à página do link. Isso é feito por meio do objeto window.opener.

Em seguida, a página de link pode ser usada window.opener.location para abrir o site malicioso.

 

Usar target _blank pode levar a problemas de segurança.

Isso pode ser explorado para ataques de phishing. Considere o seguinte cenário.

Você cria um site malicioso e coloca conteúdo viral nele. Em seguida, você compartilha este site nas redes sociais ou outras fontes que abrem links externos usando o target="_blank". O Facebook é o principal exemplo aqui.

O usuário desavisado clica no link e sua página da web é aberta em uma nova guia. Nesse momento, seu site malicioso agora tem o controle da guia anterior (“Facebook”). Usando o window.opener.location e navega para o novo site – digamos, um formulário de login emulando a tela de login do Facebook com uma mensagem: “Sua sessão anterior do Facebook expirou. Faça login novamente para continuar usando o Facebook ”.

Agora, o usuário é induzido a inserir suas informações de login e é vítima de um ataque de phishing.

Este é apenas um caso hipotético, já que o Facebook está usando o rel="noopener" em seus links target="_blank". Acredito que consegiu entender.

Mais alguns detalhes

O uso de noopener efetivamente informa ao navegador para abrir um link em uma nova guia sem fornecer o acesso de contexto à página da web que abriu o link. Isso é obtido ao não definir a propriedade window.opener, retornando assim um valor nulo.

Instrui o navegador a abrir o link sem conceder acesso ao novo contexto de navegação ao documento que o abriu – não definindo window.opener na janela aberta (ele retorna null).

Dessa forma, o atributo rel= "noopener" e o valor não afetam a otimização do mecanismo de pesquisa (SEO) de forma alguma. É independente de SEO. Mas deve ser usado nos casos em que você estiver lidando com links com a target blank.

O que é noreferrer?

Semelhante em sua função a noreferrer, noreferrer também evita que o site recém-aberto manipule o objeto window.opener. Mas, além disso, noreferrer evita que o navegador, ao navegar para outra página, envie o endereço da página de referência.

Simplificando, o valor noreferrer ocultará as informações do referenciador quando o link for clicado. Por exemplo, se alguém postar seu link em sua página da Web e usar o noreferrer, e em seguida, os usuários clicarem nesse link, você não será capaz de dizer de onde esses usuários vêm. Em seu software de análise (digamos, Google Analytics), isso aparecerá como tráfego direto, não como uma referência.

Novamente, noreferrer também não tem efeito sobre o SEO, mas pode distorcer os números em seu software de análise e rastreamento, relatando tráfego mais direto.

também algumas considerações a respeito do marketing de afiliados noreferrer, mas estão fora do escopo deste artigo. Em geral, os links de afiliados e programas de afiliados agora usam abordagens e técnicas que não dependem do valor noreferrer.

Então, quando você deve usar noreferrer e quando noopener? Eu sugiro que você considere usar ambos. A maioria do suporte do navegador moderno noopener, mas em alguns casos, se noopener não for compatível, você pode usar noreferrer.

Isso significa que, em termos práticos, faz sentido usar os dois para oferecer suporte a navegadores mais antigos. Mas a melhor abordagem seria evitar o uso do target="_blank". A menos que você tenha um excelente motivo para usá-lo.

O que é nofollow?

Na otimização de mecanismos de pesquisa, é crucial obter muitos links valiosos e de qualidade com links para sua página. Esses são chamados de backlinks. Mas nem todos os links são criados iguais.

Em geral, quando uma página está criando um link para a sua – está passando seu link – ou seja – dá mais credibilidade ao seu site e sinaliza para os mecanismos de pesquisa que eles valorizam o seu site. Em essência, você pode considerar isso como um endosso. Se uma página da Web de alta autoridade tem um link para você – ela o está endossando, e o Google/Bing vai considerar isso um fator de classificação. O Google usa o termo PageRank como uma medida de quantidade e qualidade de links.

No entanto, às vezes você não quer passar o suco do link. Esse pode ser o caso ao vincular suas páginas internamente – por exemplo – você pode não querer passar seu suco de link de páginas mais valiosas para aquelas que não são tão importantes.

Entre Entre rel="nofollow". Assim como seus primos noopener noreferrer, nofollow é um valor do atributo rel. Ao adicionar esse valor, ele sinalizará aos mecanismos de pesquisa que você não deseja passar seu link juice/PageRank para a página para a qual está vinculando.

<a href=”https://www.dannybia.com/”>
rel=”noopener noreferrer nofollow”
target=”_blank”>Clique aqui para visitar o site Danny’a Home Page.
</a>

Exemplo detalhado hospedado por GitHub (https://github.com/)

Na linha de código acima, colocamos todos os três valores – ao adicionar o valor nofollow, estamos sinalizando ao Google que o PageRank/link juice não é passado para o site https://www.dannybia.com/.

Quando você deve usar o nofollow?

A regra geral é usar nofollow links em comentários ou fóruns. O conteúdo gerado pelo usuário pode ser uma fonte de spam e links de baixa qualidade. Você não quer que seu blog ou site de fórum passe seu valor para essas páginas de baixa qualidade.

Além disso, o Google e outros mecanismos de pesquisa exigem que você use nofollow em todos os links e anúncios patrocinados. O mesmo vale para links em comunicados à imprensa e diferentes tipos de links pagos.

Um pouco sobre a terminologia – noopener noreferrer nofollow

Às vezes, você notará que as pessoas estão mencionando a tag noopener ou noreferrer. Em outros casos, você pode identificar o atributo rel noreferrer. Embora sejam compreensíveis para a maioria dos desenvolvedores da Web, vale a pena observar o seguinte.

• noopener, noreferrer, e nofollow não são tags ou atributos. Eles são valores de atributos.
• rel não é uma tag. É um atributo da tag âncora.
• <a> Como tal, tem atributos (i.e., rel), e esses atributos têm valores (noopener noreferrer nofollow)

Conclusão

Existem três valores fundamentais do relatributo da tag âncora. Eles são noreferrer, noopener, e nofollow.

• rel="noopener" você usa em todos os links que abrem em novas guias usando o target _blank. Haverá implicações de segurança se você não usar o valor noopener nos links que abrem em novas guias. Um invasor mal-intencionado pode usar o objeto window.opener para alterar o conteúdo e a localização da página de origem.
• rel="noreferrer" pode servir a um propósito semelhante ao noopener, especialmente nos navegadores mais antigos. Portanto, faz sentido usar os dois. Além disso, noreferrer pode afetar suas análises e relatar o tráfego como direto em vez de referência.
• rel="nofollow" informará aos mecanismos de pesquisa para não passar o link juice para a página vinculada e não passará no PageRank. Você pode considerá-lo como um valor que é usado quando você deseja criar um link para outra página, mas sem “endossá-lo”. É o único valor rel nesta lista com um efeito tangível nos esforços de SEO.