Os links de âncora são uma ferramenta simples, mas poderosa, para melhorar a navegação em páginas ou publicações mais longas do WordPress. Permitem aos utilizadores saltar rapidamente para secções específicas na mesma página, clicando num link, sem necessidade de percorrer grandes quantidades de conteúdo. Os links âncora podem melhorar a experiência do utilizador e a SEO, tornando-os uma funcionalidade obrigatória para conteúdos longos ou sítios Web de página única.

Este guia irá orientá-lo na criação de links de âncora no WordPress usando o Editor Clássico, o Editor Gutenberg e o Construtor de Páginas WPBakery. Também discutiremos a estrutura dos links de âncora, práticas recomendadas e casos de uso comuns.

O que é uma ligação âncora?

Uma ligação de âncora é uma hiperligação que direciona o utilizador para uma secção específica na mesma página, em vez de o levar para uma página diferente. Por exemplo, numa longa publicação de blogue, pode criar uma tabela de conteúdos na parte superior, e cada ligação irá para a secção relevante do artigo.

Exemplo:

<h2 id="section1">Secção 1: O que é uma ligação âncora?</h2>

<a href="#section1">Vá para a Secção 1</a>

Neste exemplo, quando os utilizadores clicam em "Ir para a Secção 1", são levados diretamente para a parte da página onde se encontra o título "Secção 1: O que é uma ligação âncora?" está localizado.

Benefícios da utilização de Anchor Links:

1. Melhoria da legibilidade: Em artigos longos, os leitores podem saltar rapidamente para a parte que lhes interessa sem terem de percorrer o ecrã sem parar.
2. Melhor navegação: As ligações-âncora podem ser utilizadas para criar secções fáceis de navegar em sítios Web de página única, tais como "Sobre,” “Serviços," e "Contacte.“
3. Maior envolvimento do utilizador: É mais provável que os utilizadores permaneçam mais tempo na sua página se conseguirem encontrar rapidamente as informações que pretendem.
4. Impulso SEO: Os motores de busca como o Google utilizam as ligações âncora para compreender melhor a estrutura da sua página, melhorando potencialmente as suas classificações de SEO.

A estrutura das ligações âncora

Uma ligação de ancoragem é constituída por duas partes essenciais: a ID (identificador) e o ligação.

1. ID (Identificador)

O ID é um identificador único que adiciona ao elemento HTML ao qual pretende ligar (como um título ou parágrafo). Por exemplo:

<h2 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">id="secção1"</mark>&gt;Secção 1: SEO técnica</h2>

O id= "secção1" torna esta rubrica identificável como uma ponto de ancoragem.

2. Ligação

A parte clicável que direciona o utilizador para o ID. É criada utilizando a hashtag # seguido do ID. Por exemplo:

Ir para a Secção 1

O href=" #section1″ diz ao browser para se deslocar para baixo até ao elemento com o ID section1.

Exemplo em ação:

Se está a escrever um artigo detalhado sobre SEOSe quiser, pode adicionar ligações de ancoragem a cada secção principal:

<h2 id="on-page-seo">SEO na página</h2>
<h2 id="off-page-seo">SEO fora da página</h2>
<h2 id="technical-seo">SEO técnico</h2>

No topo do seu artigo, pode então adicionar um índice que ligue a estas secções:

<ul>
   <li><a href="#on-page-seo">SEO na página</a></li>
   <li><a href="#off-page-seo">SEO fora da página</a></li>
   <li><a href="#technical-seo">SEO técnico</a></li>
</ul>

Os utilizadores que clicam em "SEO na página" será levado diretamente para essa secção.

Porquê utilizar ligações âncora?

1. Experiência de utilizador melhorada

Os leitores podem navegar facilmente para o conteúdo que lhes interessa, o que é especialmente útil para conteúdos longos. Isto reduz a frustração e torna o seu sítio Web mais fácil de utilizar.

2. Melhor navegação em sítios Web de página única

Para sítios Web de página única, as ligações âncora podem ser utilizadas para simular menus de navegação. Ao clicar num item de menu, o utilizador desloca-se suavemente para a secção correspondente, criando uma experiência de navegação perfeita.

3. SEO melhorado

As ligações âncora contribuem para a ligação interna, o que ajuda os motores de busca como o Google a compreender melhor a estrutura da sua página. Isto pode melhorar a indexação do seu conteúdo e conduzir a melhores classificações.

4. Maior envolvimento do utilizador

Permitir que os utilizadores encontrem rapidamente o conteúdo que procuram pode aumentar o tempo que passam no seu site e reduzir as taxas de rejeição, o que é benéfico para as métricas de envolvimento do utilizador.

5. Acessibilidade

As ligações âncora também tornam o seu sítio mais acessível, permitindo que os utilizadores com deficiência ou que utilizam leitores de ecrã naveguem no seu conteúdo de forma mais eficiente.

Como criar links âncora no WordPress

Veja como criar links de âncora usando diferentes editores do WordPress.

Criando links de âncora no Editor clássico

Se estiver a utilizar o Editor clássico， tem de editar manualmente o HTML para adicionar ligações de ancoragem. Veja como:

Passo 1: Adicione um ID único ao seu elemento alvo

1. Abra o post ou a página que pretende editar no Editor clássico.
2. Mude para a opção "Texto" para editar o HTML.

3. Localize o elemento (como um título ou parágrafo) ao qual pretende ligar e adicione um ID único. Por exemplo:

<h2 id="secção1">Secção 1: O que é uma ligação âncora?

Passo 2: Crie o link âncora

1. Volte a mudar para o ecrã "Visual".

2. Na parte superior da sua publicação (ou onde quer que queira o link), realce o texto que pretende tornar clicável.

3. Clique no botão "Inserir/Editar ligação" na barra de ferramentas.
4. No campo URL, introduza #secção1 (o ID que definiu anteriormente).

<a href="#section1">Vá para a Secção 1</a>

Passo 3: Guarde e pré-visualize

Depois de ter guardado as alterações, pode pré-visualizar a sua página para garantir que a ligação funciona como esperado. Se clicar na ligação, deverá deslocar a página para a secção com o ID correspondente.

Criar Ligações Âncora no Editor do Gutenberg

O Gutenberg é o editor de blocos do WordPress, que oferece uma forma mais simplificada de criar ligações de âncora.

Passo 1: Adicione um ID a um bloco

1. Abra a publicação ou página que pretende editar no Gutenberg.
2. Selecione o bloco ao qual pretende adicionar a âncora (por exemplo, um bloco de título).
3. Na barra lateral direita, em "Avançado," encontre o "ÂNCORA HTML".

4. Introduza o seu ID único (por exemplo, secção2).

Passo 2: Adicione o link âncora

1. Volte ao topo da sua publicação ou ao local onde pretende adicionar a hiperligação.
2. Realce o texto que pretende tornar clicável e clique no ícone de ligação na barra de ferramentas.

3. No campo URL, escreva #section2.

4. Prima "Enter" para criar a ligação.

Passo 3: Guarde e teste

Guarde a sua publicação e pré-visualize-a. Quando clicar nele, o link deve saltar para a secção com o ID da âncora.

Criar links de âncora no WPBakery Page Builder

WPBakery é um famoso construtor de páginas de arrastar e largar para WordPress. Pode criar facilmente links de âncora utilizando esta ferramenta.

Passo 1: Adicione um ID único ao elemento

1. Abra a página ou o post no WPBakery Page Builder.
2. Clique no elemento ao qual pretende ligar e aceda às suas definições.

3. Nas definições, localize a opção "ID do elemento" e introduza uma identificação única (por exemplo, secção1).

Passo 2: Crie o link âncora

1. Selecione o texto ou o botão a partir do qual pretende estabelecer a ligação.
2. Abra as definições da ligação e introduza #secção1 como URL.

2. Guarde as alterações.

Passo 3: Guarde e pré-visualize

Depois de guardar o seu trabalho, pré-visualize a página para testar a ligação.

Melhores práticas para a utilização de ligações âncora

Para tirar o máximo partido das ligações âncora, siga estas práticas recomendadas:

1. Garanta IDs únicos

Cada ID deve ser único dentro de uma página. Se dois elementos tiverem o mesmo ID, o browser não saberá para onde se deslocar e a ligação poderá não funcionar corretamente.

2. Evite caracteres especiais

Os IDs não devem conter espaços, sinais de pontuação ou caracteres especiais. Limite-se a letras, números e hífenes. Por exemplo, secção-1 é bom, mas secção 1 ou secção#1 pode causar problemas.

3. Utilize um texto âncora claro

Evite textos âncora vagos como "Clique aqui" ou "Saiba mais". Em vez disso, utilize texto descritivo que diga aos utilizadores exatamente para onde o link os levará. Por exemplo, "Vá para a secção SEO na página" é muito mais informativo.

4. Teste as suas ligações

Teste sempre as suas ligações de ancoragem antes de as publicar. Certifique-se de que cada ligação se desloca para a secção correta. As ferramentas de desenvolvimento do seu browser podem ajudar a diagnosticar quaisquer problemas.

5. Evite URLs não visíveis

Evite apresentar URLs âncora em bruto no seu texto (como https://example.com/#section1). Em vez disso, utilize um texto de ligação claro e descritivo que forneça contexto ao utilizador.

Casos de utilização de ligações âncora

Os links âncora são úteis em muitos cenários. Eis alguns exemplos comuns:

1. Índice

Para blogues longos, adicione um índice no início para que os utilizadores possam saltar para secções específicas sem terem de se deslocar. Isto melhora a navegação e torna o conteúdo mais digerível.

2. Websites de página única

As ligações âncora são uma excelente forma de criar menus de navegação em sítios Web de página única. Se clicar em itens de menu como "Acerca de nós" ou "Serviços", o utilizador será encaminhado para essas secções na mesma página.

3. Botões de chamada para ação (CTA)

Utilize ligações âncora para encaminhar os utilizadores para acções específicas, como o preenchimento de um formulário ou a visualização de um produto. Por exemplo, um botão "Saiba mais" pode ligar a uma secção detalhada mais abaixo na página.

4. Botões de deslocação para o topo

A adição de um botão "Deslocar para o topo" permite aos utilizadores regressar rapidamente ao topo de uma página longa sem terem de se deslocar manualmente.

Perguntas mais frequentes

1. Em que é que as ligações de ancoragem são diferentes das ligações normais?

Os links de âncora navegam dentro da mesma página, enquanto os links normais normalmente levam-no para uma página diferente. As ligações de âncora melhoram frequentemente a navegação em conteúdos longos ou em sítios Web de página única.

2. As ligações de ancoragem ajudam a SEO?

Sim, as ligações âncora podem fazer parte de uma boa estratégia de ligação interna, ajudando os motores de busca a compreender a estrutura da sua página e melhorando a acessibilidade e a experiência do utilizador da sua página.

3. Como é que testo as ligações de ancoragem?

A forma mais simples é clicar no link e ver se o leva para a secção correta. Também pode utilizar as ferramentas de desenvolvimento do browser para inspecionar e resolver quaisquer problemas com as suas ligações de ancoragem.

4. Existe algum plugin para criar ligações de âncora?

Sim, muitos construtores de páginas como o WPBakery e o Elementor permitem-lhe criar facilmente ligações de âncora. Também pode utilizar plug-ins de índice dedicados que geram automaticamente ligações de âncora para os títulos.

Conclusão

Os links âncora são essenciais para melhorar a navegação do utilizador, especialmente em conteúdos longos e sítios Web de página única. Permitir que os utilizadores saltem diretamente para secções específicas melhora a legibilidade, aumenta o envolvimento e contribui positivamente para a SEO. Quer esteja a usar o Editor clássico, o Gutenberg ou o WPBakery Page Builder, adicionar links de âncora é um processo simples que pode melhorar significativamente a experiência do utilizador no seu site. Ao seguir as práticas recomendadas - como usar IDs exclusivos, texto âncora claro e testar seus links - você pode garantir uma navegação tranquila e melhor usabilidade para seus visitantes.