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.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
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>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: O que é uma ligação âncora?” is located.
Benefícios da utilização de Anchor Links:
- 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.
- Melhor navegação: Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “Sobre,” “Serviços,” and “Contacte."
- 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.
- Impulso SEO: Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
A estrutura das ligações âncora
Uma ligação de ancoragem é constituída por duas partes essenciais: a ID (identificador) e o ligação.
- 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 class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="secção1"</mark>>Secção 1: SEO técnica</h2>O id= “section1” torna esta rubrica identificável como uma ponto de ancoragem.
- Ligação
The clickable part that directs the user to the ID. It’s created using the hashtag # seguido do ID. Por exemplo:
Ir para a Secção 1O href=” #section1″ diz ao browser para se deslocar para baixo até ao elemento com o ID section1.
Exemplo em ação:
If you’re writing a detailed article about 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>
Users who click “SEO na página” will be taken straight to that section.
Porquê utilizar ligações âncora?
- 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.
- 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.
- 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.
- Maior envolvimento do utilizador
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- 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
Here’s how to create anchor links using different WordPress editors.
Criando links de âncora no Editor clássico
If you’re using the Editor clássico， tem de editar manualmente o HTML to add anchor links. Here’s how:
Passo 1: Adicione um ID único ao seu elemento alvo
- Abra o post ou a página que pretende editar no Editor clássico.
- Switch to the “Texto” mode to edit the HTML.
- 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
- Switch back to the “Visual” mode.
- Na parte superior da sua publicação (ou onde quer que queira o link), realce o texto que pretende tornar clicável.
- Clique no botão "Inserir/Editar ligação” button in the toolbar.
- 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
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
Criar Ligações Âncora no Editor do Gutenberg
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
Passo 1: Adicione um ID a um bloco
- Abra a publicação ou página que pretende editar no Gutenberg.
- Selecione o bloco ao qual pretende adicionar a âncora (por exemplo, um bloco de título).
- In the right-hand sidebar, under “Avançado,” find the “ÂNCORA HTML".
- Introduza o seu ID único (por exemplo, secção2).
Passo 2: Adicione o link âncora
- Volte ao topo da sua publicação ou ao local onde pretende adicionar a hiperligação.
- Realce o texto que pretende tornar clicável e clique no ícone de ligação na barra de ferramentas.
- No campo URL, escreva #section2.
- Press “Enter” to create the link.
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
- Abra a página ou o post no WPBakery Page Builder.
- Clique no elemento ao qual pretende ligar e aceda às suas definições.
- In the settings, find the “ID do elemento” field and enter a unique ID (e.g., section1).
Passo 2: Crie o link âncora
- Selecione o texto ou o botão a partir do qual pretende estabelecer a ligação.
- Abra as definições da ligação e introduza #secção1 como URL.
- 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:
- Garanta IDs únicos
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- 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.
- Utilize um texto âncora claro
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- Teste as suas ligações
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- 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:
- Í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.
- Websites de página única
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- Botões de chamada para ação (CTA)
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- Botões de deslocação para o topo
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
Perguntas mais frequentes
- 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.
- As ligações de ancoragem ajudam a SEO?
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- 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.
- 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.