Você já notou que quando está em uma página qualquer de um site e ao clicar em um link associado a uma palavra ele te leva até outra parte do texto da mesma página? Esse processo tem tudo a ver com âncora html.
Tal funcionalidade nada mais é do que uma forma de criar atalhos para quem está lendo o conteúdo. No entanto, você sabe como criar uma âncora html de forma simples e prática?
Se você tem dúvida de como fazer isso, nosso artigo vai te ajudar com isso. Além de explicar mais sobre a âncora de link, vamos te ensinar como criá-la, mostrar os vários tipos e, ainda, o benefício de usá-la. Acompanhe nosso conteúdo e boa leitura!
O que é âncora html ou âncora de link?
Uma âncora html ou âncora de link são todos os links que servem para levar o leitor para uma parte específica do conteúdo chave dentro de uma mesma página, de uma maneira quase que instantânea.
A ideia é que a âncora de html sirva como um atalho para chegar a alguma parte do site. Para isso, a HTML usa um hipervínculo (também chamado de hiperlink) para poder se vincular a outro documento na Web.
Para que seja otimizado em relação ao SEO (Search Engine Optimization), ou seja, apareça em primeiro lugar nas páginas de busca do Google, o texto do âncora html deve ser curto, objetivo e sempre relacionado à página que está sendo vinculada.
Como criar link âncora html?
Para criar um link âncora html, é essencial que você crie uma lista de tópicos e ancore os pontos, ou seja, link cada item da lista. A seguir, vamos falar sobre esses pontos para mostrar como é feita essa criação.
Monte uma lista de tópicos
Em primeiro lugar, você deve considerar o conteúdo da sua página e, assim, criar uma lista com todos os tópicos que serão ligados por links.
É normal que essa lista seja adicionada após a introdução do texto, dessa forma, a pessoa já sabe tudo que vai ser abordado durante a página.
No entanto, como você já deve imaginar, somente a lista de tópicos iria ser muito trabalhosa para chegar até o local de interesse do leitor.
Por isso, ao listar os tópicos, chega o momento de ligar os elementos na lista com os tópicos correspondentes ao longo do texto. Com o HTML, isso será possível.
Ancore os pontos (Link cada item da lista)
Para tornar essa lista funcional, será preciso fazer o recurso da âncora html. Portanto, a ancoragem vai precisar com que se é adicional algo que identifique cada elemento,. Com isso, será possível chamá-los de acordo com essa identificação.
Vamos mostrar isso a partir de um exemplo, considerando que o texto fala sobre linguagem de programação. Nele, temos um tópico sobre Phyton.
- <h3>#1 – Linguagem Phyton </h3>
Partindo desse ponto, será preciso escolher uma identificação (id) para este elemento.
- <h3 id=”´linguagem-phyton”>#1 – Linguagem Phyton</h3>
Neste caso em questão, foi adicionado o id como referência linguagem-python, por exemplo. A id sempre vai depender do termo a ser linkado.
Depois disso, será preciso criar um link para o tópico dentro do texto, de acordo com essa identidade. Por isso, serão adicionados links nos itens do índice da seguinte forma:
- <li><a href=”#”>#1 – Linguagem Phyton </a></li>
Nesse momento, ainda não se tem nenhum link para inserir na referência de link (href). Será justamente o id que vamos indicar no href para isso.
- <li><a href=”#linguagem-phyton”>#1 -Linguagem Phyton</a></li>
Para indicar que se deseja pular dentro da página para a id indicada de maneira direta, foi preciso adicionar um “#” antes da indicação (id).
A partir disso, se tem um âncora html criado, na qual a âncora dentro da própria página vai varrer toda a página até encontrar a id correspondente ao indicado na href!
Tipos de texto âncora html a serem utilizados
Além do formato de sumário, os principais tipos de texto âncora html que podem ser usados são nas categorias de:
- URL;
- correspondência exata;
- correspondência parcial;
- marca;
- imagem.
A seguir, vamos falar sobre cada um deles.
URL
Para o caso de um texto âncora em formato URL, o endereço do site é escrito por extenso, sendo simplesmente colado. Nesses casos, é preciso que a URL esteja sempre otimizada.
De forma prática, vamos dar um exemplo: “saiba tudo sobre Open Source na nossa página sobre esse tema”: https://mundomaker.com.br/open-source.
Correspondência exata
O segundo tipo de uso da âncora é o de correspondência exata ao texto. Nesse caso, o termo da âncora deve repetir a palavra-chave da página para a qual está sendo linkado.
Isso acontece em blog posts que trabalham com palavras-chaves de SEO. Por exemplo, dentro de um texto vai se linkar para um post que tem como palavra-chave o termo “drag and drop”, fazendo o link sobre o texto âncora “drag and drop”.
Correspondência parcial (ou contextual)
Diferente da exata, a correspondência parcial ou contextual é a linguagem de um texto que contém a palavra chave em questão, ou seja, o texto âncora inclui a palavra-chave juntamente com outros termos importantes do texto relacionados.
Para exemplificar: “as metodologias ágeis têm sido uma solução cada vez mais comum para as empresas e negócios que querem mais produtividade”.
Marca
Como o nome sugere, o texto de âncora que se refere à marca é aquele que vai usar o nome da empresa, marca ou site para fazer referência.
Embora tenha essa finalidade, acaba não sendo tão informativo para o Google sobre o assunto do link. Um exemplo simples pode ser “saiba mais sobre o assunto no site da Mundo Maker”.
Imagem
Por fim, o texto âncora também pode linkar para uma imagem. Para essa situação, o texto identificado pelo Google é a tag alt text. Dessa forma, será preciso otimizá-la para o buscador.
Benefícios de utilizar âncora html
O maior benefício de utilizar âncora html é facilitar a leitura do leitor e a experiência dentro da página, afinal, o usuário vai chegar bem mais rapidamente na parte que o interessa.
Além disso, a âncora html também pode contribuir para construção de uma snippet, que é a posição 0 do Google.
Ou seja, é possível abordar um conteúdo de forma completa, ainda que o conteúdo fique extenso, pois o usuário consegue encontrar o trecho específico através do Google.
Conclusão
Âncoras html são geralmente usadas para criar “sumários” no início de um documento grande, sendo um grande facilitador principalmente da experiência de leitura de conteúdos nas páginas.
No entanto, como te mostramos mais acima, ela também pode ser atrelada a outras funções como URL, correspondência exata e até mesmo para imagem. Agora, se você quiser criar uma âncora html, já sabe como fazer!
Crie sistemas web e aplicativos mobile de forma simples e visual. Confira!