Como usar HTML achor para melhorar o UX do seu site

Erich Casagrande

jan 31, 20235 min de leitura
html anchor
Compartilhar

ÍNDICE

O que é HTML achor?

No código HTML, as tags de âncora são geralmente utilizadas para criar hiperlinks. Essas tags modificadas com o atributo “href” criam links clicáveis, permitindo que você aponte para outras páginas no seu próprio site ou em outros domínios.

Você também pode usá-las para criar os chamados links âncora, que apontam para diferentes partes de uma mesma página.

Ao criar links com a tag “a”, você precisa usar algum tipo de texto âncora. Trata-se da parte do link que pode ser clicada. O Google usa esse texto para saber mais sobre o link e o conteúdo para o qual ele aponta.

Youtube video thumbnail

Os links âncora podem ajudar a melhorar a experiência do usuário (UX) de um site. Os usuários os utilizam para navegar por uma página mais facilmente, o que pode melhorar sua experiência de navegação.

Esses links são comumente usados no sumário de páginas mais longas ou visualmente densas. Quando as pessoas acessam uma página, elas querem saber se as informações ali são de fato úteis e relevantes para sua pesquisa.

Um sumário que inclui links claros e clicáveis resume o conteúdo da página e ajuda os leitores a pular para a seção que eles estão mais interessados em ler.

Os links âncora podem não ter um impacto significativo nas classificações do seu site no Google. Mas, como vimos, eles ajudam a melhorar a experiência do usuário e também a ganhar featured snippets, fato que, sim, tem impacto na sua classificação.

Em 2021, o Google lançou sua atualização do algoritmo Core Web Vitals, enfatizando a experiência do usuário como fator a ser considerado para a classificação de um site.

Os principais focos da atualização incluem a interatividade do usuário, o que significa que o Google agora presta mais atenção em como os usuários interagem com as páginas de um site, incluindo quanto tempo eles permanecem nelas.

Se um usuário não conseguir entender do que se trata o conteúdo de uma página ao bater o olho nela, ele provavelmente deixará o site, aumentando sua taxa de rejeição.

O Google informou anos atrás que os links âncora podem se tornar featured snippets nas SERPs. Quando isso acontece, os usuários veem uma lista de links nos trechos em destaque, o que ajuda a sinalizar que sua página é útil e relevante para a intenção de busca deles.

No exemplo a seguir, vemos uma lista de links âncora extraídos de uma página e convertidos em um featured snippet:

exemplos html anchor - links âncora como featured snippet

Quando você cria links âncora, o Google também pode incluí-los no snippet da sua página. No exemplo a seguir, o Google inclui um link âncora para “Diretrizes nutricionais” em uma página sobre gordura trans, para que os usuários possam ir direto para essa seção da página a partir da SERP:

exemplo html anchor - link âncora como snippet da página

Portanto, mesmo que você não seja penalizado por não usar links âncora, pode valer a pena incluí-los nas suas páginas de vez em quando. Use-os para informar o Google sobre o conteúdo da sua página e ajudar os leitores a encontrar e acessar as partes do conteúdo que eles mais desejam ler.

Para adicionar um HTML anchor, siga as seguintes etapas:

1. Adicione o atributo ID com a tag <a>

Podemos anexar um ID a um dos títulos da página com a tag ‘a’ de uma forma parecida que usamos para criar hiperlinks.

Digamos que criamos uma página sobre ferramentas de SEO e queremos criar um link para uma seção sobre SEO local. Basta criarmos um título H2 e adicionarmos um link âncora com a tag ‘a’:

<a id="SEOlocal"><h2>SEO local</h2></a>

Como alternativa, podemos incluir o anchor ID na heading tag:

<h2 id="SEO-Local">Nome da seção</h2>

Para adicionar um anchor ID a uma imagem, inclua-o na tag HTML da imagem como um atributo:

<img id="nome-âncora" src="/imagens/seolocal.jpeg"/>

Para criar um link âncora, use o atributo href. No entanto, em vez de adicionar um link para uma página b, você usará o anchor ID com um sinal de cerquilha ou hashtag (#):

<a href="#SEOlocal">Seção de SEO local</a>

Quando o usuário clicar no link acima, ele pulará para o título H2 com o ID “SEOlocal”.

Você pode adicionar links âncora a qualquer texto da sua página. No entanto, é uma boa ideia utilizá-los com títulos e subtítulos: eles ajudam a resumir o conteúdo da sua página para visitantes e para os rastreadores dos mecanismos de pesquisa.

Quando você adiciona links âncora aos seus títulos, o texto de cada um deles funciona também como o texto âncora do link. Portanto, é importante escolher títulos e subtítulos relevantes que usem palavras-chave que informem aos leitores e bots sobre o que se trata cada seção da página.

Tente escolher uma frase-chave para seus links âncora. Às vezes, links de uma única palavra podem ser confusos e não fornecem ao Google muito contexto sobre o link ou a página para a qual ele aponta.

Use palavras descritivas que deem aos leitores uma melhor ideia do que eles verão ao clicar ali. Se o seu link âncora for “SEO local”, por exemplo, os leitores esperam pular para a parte da página com informações sobre esse assunto.

Você pode usar a ferramenta Topic Research, da Semrush, para pesquisar possíveis títulos para o conteúdo da sua página. Comece com a palavra-chave que deseja segmentar e selecione um domínio.

Se você quiser criar conteúdo direcionado a leitores em uma área ou país diferente, use o recurso de localização para definir a região e idioma de destino:

tela inicial ferramenta topic research

A ferramenta mostrará subtemas relevantes e uma lista de palavras-chave relacionadas para cada um deles.

Você pode clicar em cada página para ler artigos sobre cada tópico e para entender melhor como os sites mais bem classificados no Google estruturam seus conteúdos.

A ferramenta SEO Content Template, da Semrush, também pode ajudar a escolher títulos para o seu conteúdo. Ela analisa os 10 primeiros resultados para a palavra-chave pesquisada e cria um template com recomendações que você pode usar para criar seu próprio conteúdo.

O template inclui sugestões de legibilidade, tamanho do texto, backlinks e títulos:

recomendações da ferramenta seo content template

Conclusão

  • Links âncora estruturados oferecem uma melhor experiência do usuário e podem ajudar a conquistar featured snippets.
  • Crie títulos relevantes e com palavras-chave para que os leitores e os mecanismos de pesquisa possam entender facilmente a estrutura das suas páginas.
  • As ferramentas de marketing de conteúdo da Semrush ajudam você a criar conteúdo otimizado para SEO e que seja fácil de ler.
Compartilhar
Author Photo
Trabalho como Marketing Manager Lead da Semrush no Brasil e sou responsável pelas ações de marketing que envolvem a marca em diferentes canais. Sou apaixonado por comunicação e por aprender cada vez mais sobre o universo do Marketing Digital.