Anchor Tag: guia para melhorar a navegação do seu site

Se você vem pesquisando sobre SEO há algum tempo, com certeza já ouviu falar na importância do link building para os projetos de otimização.

Embora o papel dos hiperlinks na construção das páginas web seja um assunto mais do que conhecido, muita gente não sabe exatamente como esses elementos funcionam “por trás das cortinas”. Mas se você mantém um site ou blog para a sua empresa, é interessante entender o funcionamento da anchor tag.

Afinal, esse é o recurso de código que permite a criação dos links internos e dos famosos backlinks. Utilizada no mundo inteiro para estabelecer atalhos entre páginas diferentes e facilitar a navegação por conteúdos extensos, a anchor tag é tipo o portal de teletransporte do universo web.

Quer saber mais? Então continua aqui com a gente! Hoje, vamos te ajudar a compreender o que é a anchor tag, como ela funciona e por que é tão importante para o bom desempenho dos sites.

Prepare-se para descobrir:

O que é a Anchor Tag? Veja como ela facilita a navegação no site 

A anchor tag ou tag âncora é um elemento do HTML que permite a criação de hiperlinks em páginas de sites. No código, ela começa com o trecho <a e termina com </a>, podendo conter diferentes atributos que determinam o comportamento dos links.

Em outras palavras, a anchor tag é um “pedacinho de código” que você pode usar para fazer com que um fragmento de texto presente em uma página web se torne clicável. Assim, ele vira um hiperlink – um atalho que leva os usuários a uma página diferente quando recebe o clique –.

Portanto, as anchor tags permitem que você vincule as suas páginas com outras páginas (sejam elas do seu site ou de domínios externos) e também com endereços de e-mail, arquivos, imagens, vídeos, números de telefone e basicamente qualquer URL. 

Dentro dessas tags, é possível definir o trecho de texto que receberá o hiperlink – ou seja, o texto âncora – e a URL de destino, que é o endereço que os usuários acessarão ao clicar. Quando a página de destino pertence a o mesmo site da página de origem, é criado um link interno. Se ela for de um domínio diferente, surge um link externo, também conhecido como backlink.

Quer um exemplo? É só prestar atenção no final do parágrafo anterior a este aqui.

Deixamos o termo “backlinks” em destaque justamente para evidenciar que ele é um texto âncora (isto é, contém um hiperlink). Ao clicar, você vai se deparar com outro conteúdo do Blog da Wesearch. Portanto, nesse caso, é um link interno.

Isso significa que o arquivo HTML desta página que você está lendo agora contém uma anchor tag mais ou menos assim:

<a href="https://www.wesearch.media/post/backlinks">backlinks</a>

Além de conectar páginas diferentes, o anchor HTML também é usado com frequência para criar atalhos que levam a seções diferentes de uma mesma página. Esses são os links âncora (anchor links ou jump links). 

Para conferir o funcionamento prático desse tipo de elemento, basta voltar para o índice clicável que aparece na introdução deste conteúdo. Todos os tópicos dele são anchor links, então basta clicar em qualquer um para ir direto para a seção do post que tem o mesmo título.

Graças a todas essas funcionalidades incríveis, as anchor tags ajudam os usuários a navegarem pelas páginas e explorarem os sites com muito mais facilidade. Sem elas, você sempre teria que rolar a tela manualmente para encontrar o que te interessa em blogposts e outros conteúdos longos, por exemplo.

Como funciona o Anchor Element HTML e por que é importante para links 

Para aprofundar o entendimento sobre como as anchor tags funcionam, vamos por partes.

Por trás dos textos, mídias e cores que os usuários visualizam quando acessam o seu site, existem linhas e mais linhas de código HTML (sigla para HyperText Markup Language). Essa é a linguagem de marcação utilizada na construção das páginas web: o arquivo .html é responsável por informar aos navegadores quais são os elementos presentes na página e como eles estão organizados.

Em outras palavras, o HTML define a estrutura das páginas dos sites. Isso é possível por meio das tags, as “etiquetas” que marcam onde os elementos (parágrafos, mídias, títulos, links etc) começam e terminam.

Você também pode controlar o comportamento ou a exibição desses elementos usando os atributos, que são termos específicos inseridos dentro das tags para modificá-las.

No caso das anchor tags, os atributos mais importantes são: href, hreflang, download, rel e target. A seguir, você confere um pouco mais sobre cada um deles.

Href 

O atributo href (sigla para hypertext reference) é um dos mais básicos quando se trata da construção de anchor tags.

Ele serve para especificar o destino do hiperlink, ou seja, aquilo que o usuário acessará ao clicar. No caso dos links internos e externos, o atributo define a URL da página linkada. 

Vale mencionar que a URL deve aparecer completa na anchor tag, incluindo o trecho referente ao protocolo HTTP ou HTTPS. Ela é inserida entre aspas e depois do href, assim:

<a href="https://exemplodeurl.com">Exemplo de texto âncora</a>

Hreflang 

O atributo hreflang tem a função de indicar o idioma do elemento linkado (da página de destino, por exemplo).

Ele funciona de acordo com as regras de padronização do ISO 639-1, que normatiza as nomenclaturas utilizadas no atributo hreflang.

A presença desse atributo transmite informações importantes para os mecanismos de busca. Ele fornece dados de contexto sobre o idioma e a variação regional utilizada no conteúdo, o que facilita o processo de identificação e categorização das páginas por parte dos bots dos buscadores.

O valor atribuído ao hreflang é um pequeno código composto por letras, que representa o idioma e a região (“en” para inglês e “pt-br” para português do Brasil, por exemplo). Esse atributo só pode ser usado quando a tag também contém o href.

Confira a demonstração:

<a href="https://exemplodeurl.com" hreflang="pt">Exemplo de texto âncora</a> 

Download 

Sabe quando você clica em um hiperlink e percebe que um download foi iniciado?

Então, isso acontece por causa do atributo download. Ele informa ao navegador que o recurso linkado (geralmente um arquivo) deve ser baixado, e não acessado.

Se o recurso em questão for um documento em PDF, por exemplo, a estrutura da anchor tag vai se parecer com isso:

 <a href="exemplo.pdf" download="Exemplo">Exemplo de texto âncora</a> 

O valor dado ao atributo download (nesse caso, “Exemplo”) será usado como nome do arquivo baixado.

Rel 

Nos sites, o atributo rel (do inglês relationship, ou “relação”) é incluído na anchor tag para indicar a relação entre a página em que o hiperlink aparece e o recurso linkado ou informar a natureza da página de destino. 

Geralmente, o objetivo é fornecer mais contexto aos algoritmos de busca durante o rastreamento e a indexação.

Para passar essas informações, é preciso atribuir um valor ao rel. Aqui estão alguns dos valores mais comuns e os significados que eles trazem para os hiperlinks:

• rel=“author”: o recurso linkado traz informações sobre o autor que criou o conteúdo do recurso de origem (página ou arquivo em que o hiperlink é exibido);

• rel=“alternate”: o recurso linkado é uma versão alternativa do recurso de origem (versão traduzida de uma página, por exemplo);

• rel=“help”: o recurso linkado contém informações de apoio ou instruções sobre o recurso de origem;

• rel=“nofollow”: o recurso linkado não deve ser acessado pelos bots rastreadores dos mecanismos de busca (ou seja, é uma forma de dizer aos bots do Google que é melhor eles ignorarem aquele link durante o rastreamento);

• rel=“next”: o recurso linkado vem depois do recurso de origem em uma série de conteúdos (como uma coletânea de notícias, artigos ou fotos)

• rel=“prev”: o recurso linkado vem antes do recurso de origem em uma série.

Vale mencionar que existem vários outros valores possíveis para o atributo rel.

Imagine que você quisesse linkar uma página que fala sobre o autor de um blogpost na página da própria publicação.

Nesse caso, ao final do texto, você poderia incluir um trecho assim:

Artigo escrito por <a href="https://exemplo.com/PáginaSobreFulano" 

rel="author">Fulano de Tal</a>.

Target 

Por sua vez, o atributo target existe para informar ao navegador como o link deve ser acessado.

Já percebeu que alguns hiperlinks abrem as páginas de destino em novas abas em vez de substituir a página de origem? 

Pois é, esse é o trabalho do target. Dependendo do valor atribuído a ele, o recurso linkado é aberto na mesma aba/janela ou em uma aba/janela diferente. Nesse caso, os valores mais comuns são:

target="_self": o recurso será aberto na mesma aba ou janela;

target="_blank":o recurso será aberto em uma aba ou janela nova;

Se quisermos garantir que uma página de destino será exibida em uma nova aba quando os usuários clicarem, por exemplo, podemos usar uma anchor tag assim:

<a href="https://exemplo.com" target="_blank">Texto Âncora</a>

Exemplos de Anchor Tags 

Até aqui, você já teve a oportunidade de conhecer vários exemplos de anchor tags com estruturas diferentes. Mas que tal conferir outras demonstrações para descobrir como esses elementos de código aparecem em contextos de uso distintos?

Na lista abaixo, você encontrará mais alguns exemplos de anchor tags bem interessantes:

• Anchor tag simples para uma página web: utiliza apenas o href, para indicar o endereço da página de destino.

<a href="https://www.wesearch.media/blog">Visite o nosso blog!</a>

• Anchor tag com o valor nofollow no atributo rel: esse recurso pode ser usado nos casos em que você não deseja endossar a página linkada e nem “recomendá-la” para os mecanismos de busca. É útil nos casos em que você precisa incluir um hiperlink em um blogpost, por exemplo, mas não confia totalmente no site linkado ou não deseja transferir autoridade para ele.

<a href="https://siteduvidoso.com" rel="nofollow">Nome do Site Duvidoso</a>.

• Anchor tag para endereço de e-mail: quando o hiperlink recebe um clique, o serviço de e-mail padrão do computador – como o aplicativo Apple Mail, nos Macbooks – é aberto. O campo de destinatário da mensagem é preenchido automaticamente com o endereço de e-mail definido na tag (destacado em itálico no exemplo). 

<a href="mailto:hello@wesearch.media">Entre em contato conosco</a>

• Anchor tag para número de telefone: embora isso possa parecer inusitado, também é possível incluir um número de telefone em uma anchor tag. Ao clicar, o usuário é direcionado para as interfaces capazes de realizar ligações (como o Skype, nos computadores, ou o espaço para telefonemas dos celulares).

<a href="tel:021934673245">(021)93467-3245</a>

Por que o uso correto do Anchor Element HTML é importante para o SEO?

Mas, afinal de contas, qual é a relação entre anchor tags e SEO?

Bem, antes de mais nada, o uso adequado do HTML anchor é capaz de melhorar a experiência do usuário e tornar a navegação mais fluida. Isso, por si só, já é um critério superimportante para quem deseja conquistar bons posicionamentos nas SERPs (páginas de resultados de buscas).

O destaque que o Google dá à usabilidade em seus materiais oficiais revela a relação íntima entre UX e SEO. Segundo a documentação da Central da Pesquisa Google, “os principais sistemas de classificação do Google recompensam conteúdo que oferece uma boa experiência na página”. Portanto, o uso de anchor tags pode te ajudar a mostrar aos buscadores que você se preocupa com os usuários.

Além disso, a presença do HTML anchor nas páginas pode aumentar as suas chances de obter rich snippets nos resultados de buscas. Isso significa que os conteúdos do seu site podem aparecer com informações complementares nas SERPs, o que chama a atenção dos usuários e tende a atrair mais visitantes.

Isso sem falar, é claro, no fato de que as anchor tags podem fornecer informações úteis para os mecanismos de busca, o que deixa os processos de rastreamento e indexação mais eficientes. Em outras palavras, esses elementos “facilitam a vida” dos Googlebots encarregados de desbravar as páginas do seu site e entender o conteúdo delas.

Âncora HTML: criando uma estrutura de links eficiente no seu site

Não dá para falar sobre as anchor tags sem mencionar a importância que elas têm na construção da estrutura de links do site. Por meio dessas tags, é possível controlar a distribuição dos “pontos de autoridade” do seu domínio e fazer essa autoridade circular internamente entre as páginas do portal.

De maneira simplificada, a autoridade é o nível de importância e confiabilidade que um domínio (site ou blog) tem em relação aos outros domínios da internet. Quanto mais autoridade um portal ou página consegue acumular, mais destaque ele tende a receber nas SERPs.

Os “pontos de autoridade” são passados de um site para o outro por meio dos links: quando um blog reconhecido e bem estabelecido publica um conteúdo com um link para o seu site, por exemplo, você recebe um pouquinho da autoridade dele. A mesma lógica de distribuição vale para as páginas individuais dentro de um mesmo site.

Portanto, se o seu site tem páginas com muita autoridade acumulada, você pode usar os links internos criados com anchor tags para distribuí-la e dar um up na performance das suas outras páginas.

Uma boa estrutura de linkagem interna também faz com que os usuários se sintam estimulados a conferir os conteúdos linkados e explorar outras páginas do site. Isso pode fazer com que o Google identifique que aquele domínio é relevante e interessante para as pessoas, o que traz bons resultados para o SEO.

Melhores práticas para usar Anchor Tags e melhorar a experiência do usuário e a performance nas buscas

E o que exatamente é o uso adequado de anchor tags?

Bem, segundo os nossos especialistas e as recomendações do Google, existem algumas boas práticas que você pode adotar para garantir que os links do seu site serão úteis para os usuários e compreensíveis para os mecanismos de busca.

As principais dicas são:

• Sempre utilize o atributo href nas suas tags âncora. Esse elemento é obrigatório, já que faz com que os links sejam rastreáveis para os buscadores;

  
  

• Utilize endereços da web válidos e funcionais nas anchor tags. URLs erradas ou incompletas dão origem a links quebrados e prejudicam a experiência do usuário;

  
  

• Nunca deixe o espaço do texto âncora vazio nas anchor tags. O trecho clicável correspondente ao hiperlink precisa estar entre os elementos <a> e </a> para que o Google consiga rastreá-lo;

  
  

• Escolha textos âncora concisos (não muito longos), descritivos e intuitivos. A ideia é que o trecho clicável ajude os usuários a entenderem o contexto geral da página linkada;

  
  

• Ao incluir links externos – ou seja, para outros sites – nos seus conteúdos, utilize as meta tags adequadas para classificá-los e evitar penalizações. Caso você tenha recebido um pagamento para inserir um backlink em uma de suas páginas, use as tags sponsored ou nofollow no anchor HTML. Assim, você informa ao Google que se trata de um backlink pago e de uma menção espontânea.

  
  

• Certifique-se de que os textos âncora estão visivelmente destacados, para que sejam facilmente encontrados pelos usuários.

Veja como configurar Anchor Links para facilitar a navegabilidade em páginas longas 

Lembra que mencionamos o recurso de anchor link, utilizado no índice clicável do nosso conteúdo?

Pois bem, essa é uma das funcionalidades mais comuns e úteis das anchor tags. Especialmente comuns em blogs, portais de notícias e outras plataformas que costumam veicular conteúdos mais longos ou densos, os anchor links servem para ajudar os usuários a navegarem pelas páginas com facilidade.

Eles funcionam como links para partes específicas de uma mesma página – portanto, nesse caso, o link não leva a um recurso à parte, como um arquivo ou uma página diferente –. Na prática, quando o usuário clica em um anchor link, a janela de visualização “pula” para uma seção específica do conteúdo.

Este post que você está lendo, por exemplo, tem um total de 16 partes, incluindo seções e subseções. Graças aos anchor links, é só clicar em qualquer tópico do índice que você irá diretamente para a seção escolhida.

Fácil, né?

Se você quiser integrar esse recurso às páginas do seu site, o passo a passo é o simples:

1. Escolha a seção que será o destino do hiperlink e vincule uma anchor ID a ela. Isso é possível inserindo o atributo id na heading tag (tag de cabeçalho) que traz o título da seção.

Se quiséssemos criar um anchor link para o H2 “Exemplos de Anchor Tag” deste conteúdo, essa etapa geraria uma linha de código mais ou menos assim: 

<h2 id="exemplos-anchor-tag”>Exemplos de Anchor Tag</h2>

É como se a ID exemplos-anchor-tag virasse o endereço da seção “Exemplos de Anchor Tag” dentro da página. Todas as partes da página que você quiser incluir em anchor links precisam ter IDs únicas.

2. Agora, basta criar um hiperlink no texto âncora desejado utilizando a estrutura padrão de anchor tag simples. 

Mas já que o recurso linkado não é uma página à parte, o endereço informado como valor do atributo href não será uma URL, e sim a ID da seção linkada. Ela vem depois de um símbolo de hashtag (#). No nosso índice, ficou desse jeito:

<a href="#exemplos-anchor-tag">Exemplos de Anchor Tag</a>

E pronto! Assim, quando os usuários clicarem no tópico Exemplos de Anchor Tag no índice, serão imediatamente transportados para a parte da página onde a ID exemplos-anchor-tag está “escondida”.

O papel das Anchor Tags na acessibilidade: criando links acessíveis e inclusivos 

Para que as anchor tags do seu site sejam capazes de melhorar a experiência dos usuários, elas precisam ser úteis para todo mundo!

É importante tocar nesse ponto porque, em alguns casos, o anchor HTML pode não funcionar da mesma maneira em jornadas de navegação que fujam ao tradicional acesso pelo desktop – em que os usuários utilizam o movimento do mouse para navegar pelas páginas e se guiam pelos elementos exibidos na tela –.

Pense em alguém que tem uma deficiência visual e acessa a web utilizando leitores de tela, por exemplo. Em alguns casos, a estrutura das anchor tags pode dificultar a identificação dos hiperlinks para essa pessoa. 

O mesmo vale para elementos HTML anchor que não são exibidos da maneira adequada em dispositivos móveis (algo bem negativo considerando os princípios do SEO mobile).

Se você quiser que os seus hiperlinks sejam relevantes e acessíveis, lembre-se:

1. Utilize textos âncora úteis, que deem uma noção sobre o que o usuário encontrará na página linkada. Evite textos âncora genéricos, como “Clique aqui”, “Acesse o link” ou “Descubra mais”. Prefira trechos mais específicos e descritivos, como “Conteúdo sobre SEO local”, “Acesse a documentação completa” ou “Envie um e-mail para o nosso time”.

2. Não use o atributo title em anchor tags. A gente ainda não tinha mencionado esse elemento aqui por um motivo simples: não recomendamos usá-los em tags <a>! Eles não são exibidos de maneira acessível para usuários que utilizam tecnologias assistivas para navegar (e nem em alguns dispositivos touch).

3. Jamais remova o focus outline (indicador de foco proporcionado pela propriedade de contorno do CSS) das páginas do seu site. Esse recurso é uma espécie de destaque visual que serve para indicar quais links estão selecionados quando os usuários utilizam o teclado para navegar pela página. 

Alguns web designers propõem remover o outline por questões estéticas, mas se esquecem de que essa propriedade fornece feedback visual para quem não usa o mouse para acessar os links. 

Se quiser aprender mais sobre o tema, confira as Diretrizes de Acessibilidade para Conteúdo Web do W3C.

Erros comuns com Anchor Tags e como evitá-los para otimizar seu HTML 

Você já aprendeu bastante sobre o que fazer para utilizar as anchor tags da melhor maneira no seu site, mas também é importante saber o que não deve ser feito.

Em alguns casos, inconsistências e deslizes na construção dos elementos HTML anchor podem causar consequências negativas bem variadas: desde a possibilidade de causar frustração e confusão nos usuários até o risco de receber penalizações nos rankings dos buscadores, os riscos são dignos de preocupação.

Melhor evitar essas dores de cabeça, né?

Então fique por dentro dos erros mais comuns no uso de anchor tags:

1. Confundir anchor tags com link tags. As anchor tags são inseridas na seção <body> do código HTML, que é onde ficam os elementos visíveis para os usuários (justamente porque o texto âncora presente nessas tags é exibido na interface do site). Elas criam caminhos rápidos para os recursos linkados. 

Já as link tags representam um outro elemento HTML, que é inserido na seção <head>. Nesse caso, o conteúdo das tags não é visível para os usuários, e elas servem para referenciar recursos externos ligados à página (como arquivos CSS, ícones usados no site etc). São coisas diferentes, hein?

2. Inserir endereços incompletos, inexistentes ou com erros de digitação nas anchor tags. Sempre confira se as URLs para as quais os seus hiperlinks direcionam os usuários realmente estão funcionando! Caso contrário, os links ficarão quebrados, o que é desagradável tanto para os usuários quanto para os rastreadores dos mecanismos de busca.

3. Utilizar anchor tags para criar hiperlinks irrelevantes. Não adianta inserir links nas suas páginas se eles não forem realmente interessantes, úteis ou capazes de melhorar a experiência dos usuários.

4. Usar o mesmo texto âncora várias vezes em uma página. Isso causa confusão em todo mundo – humanos e bots –! Escolha trechos diferentes para atrelar links diferentes, ok?

5. Levar os rastreadores do Google a domínios não confiáveis ou de baixa qualidade. Já mencionamos isso aqui, mas vale repetir: caso você precise linkar um site meio duvidoso ou simplesmente fraco em termos de conteúdo e usabilidade, inclua o nofollow na anchor tag. Caso contrário, os robôs rastreadores acessarão o link ao ler a sua página, o que pode “pegar mal” com o Google. 

Se você achar que a página linkada pode ter conteúdos problemáticos, inapropriados, sensíveis etc ou oferecer algum risco de cibersegurança, é interessante deixar alguma advertência para os usuários também (na verdade, o ideal mesmo é nem linkar um site desses…).

Saiba como criar um Anchor Tag otimizado para SEO e melhorar a indexação 

Quando se fala em otimização das anchor tags para SEO, os pontos de atenção mais importantes são o funcionamento prático dos hiperlinks e a seleção dos textos âncora.

Além de monitorar o perfil de linkagem do seu site regularmente para encontrar e corrigir os links quebrados, não deixe de dedicar uma atenção especial à escolha dos trechos que receberão os hiperlinks.

Tenha em mente que o anchor text pode se encaixar nas seguintes categorias:

• Correspondência exata: quando o texto âncora é exatamente igual à principal palavra-chave da página de destino. 

Exemplo: E aí, que tal aprender sobre tom de voz da marca? 

O hiperlink leva a um blogpost otimizado para a keyword primária “tom de voz da marca”, que corresponde exatamente ao texto âncora.

• Correspondência parcial: quando o anchor text tem a palavra-chave principal da página de destino, mas também inclui outros termos. 

Exemplo: Confira também o nosso conteúdo especial sobre alternate text.

Aqui, a palavra-chave principal da página linkada é somente o trecho “alternate text”.

• Marca: textos âncora que consistem basicamente no nome de uma empresa, site, blog etc. 

Exemplos: Conheça nosso trabalho no Blog da Wesearch.

      O WordPress é o CMS mais utilizado do mundo.

                  A Coca-Cola acabou de lançar sua nova campanha de Natal.

• Marca + palavra-chave: textos âncora que utilizam o nome de uma marca ou portal e incluem a palavra-chave da página de destino, ao mesmo tempo. 

Exemplo: Descubra como criar as melhores landing pages no Blog da Wesearch!

Nesse caso, a keyword da página linkada é “landing page”, mas o anchor text também tem o nome do blog.

• URL: esse é o tipo de anchor text em que o trecho clicável lembra o formato de um endereço web (ou pode ser realmente uma URL escrita por extenso).

Exemplo: Utilize o vocabulário do portal Schema.org para estruturar seus metadados.

• Genérico: anchor texts que não oferecem informações contextuais e nem descritivas sobre o recurso linkado.

Exemplo: Quer saber tudo sobre a ferramenta de análise de dados oficial do Google? Então clique aqui!

“Tá, mas por que saber de tudo isso?”, você pergunta.

Porque o uso de textos âncora adequados tem um peso na performance SEO das páginas.

Entenda que não existe uma fórmula pronta para definir a proporção em que esses tipos de anchor text devem aparecer nos seus conteúdos. Embora os textos âncora de correspondência exata sejam altamente eficazes em termos de SEO, você não deve se limitar a eles!

Em geral, o ideal é variar os tipos de textos âncora utilizados nas suas páginas (só os genéricos devem ser evitados). Na interpretação dos mecanismos de busca, essa diversidade mostra que os links do site são distribuídos de forma natural, o que é positivo para o ranqueamento. 

Além disso, procure fugir de anchor texts descontextualizados ou “forçados” – aqueles que parecem incluídos no texto só porque você queria linkar alguma coisa mesmo –. Lembre-se de que o Google gosta de páginas que priorizam a relevância dos conteúdos e a experiência de leitura, sem exagerar em nome da otimização.

Ah, e se você quiser ajuda para aprimorar o uso das anchor tags e a estrutura de links do seu site, pode contar com a gente! Na consultoria de SEO da Wesearch, você recebe uma estratégia de otimização personalizada que inclui desde os aspectos mais técnicos até o planejamento de conteúdo.

Para saber mais, é só entrar em contato com o nosso time de especialistas.