Anchor links não é um tópico muito discutido, mas temos tido excelentes resultados com eles! Hoje vamos mergulhar em como criar links âncora no WordPress e explorar por que você pode querer começar a usá-los. A partir da nossa experiência, os links âncora podem ajudar a melhorar a experiência do utilizador, tornar a navegação por conteúdos de formulários longos muito mais fácil e até mesmo dar-lhe uma ligeira vantagem no Google. Quem não quer uma vantagem gratuita no Google? 😉

Exemplo de uma ligação de ancoragem

Se ainda estás um pouco confuso sobre o que são as ligações de âncora, não te preocupes. Veja a imagem de exemplo abaixo. Estamos usando links de âncora em cada um desses itens da lista com balas. Quando você clica neles, ele o leva diretamente para o cabeçalho H2 que contém esse conteúdo. Você pode verificar isso por si mesmo mais abaixo no post. Os links de âncora podem ser usados em qualquer coisa, como texto, imagens e cabeçalhos H1-H6.

Ligações de âncora

Ligações de âncora

Em muitos sites, links de âncora são apenas usados para criar um índice de conteúdos no início de posts de longa duração. Se você conhece um pouco de CSS, você pode ser criativo e fazê-los parecer um pouco mais elegantes, como fizemos em nossas páginas de destino.

Links de âncora em um artigo de longa duração

Links de âncora em um artigo de longa duração

Em outros sites, você pode não ver o link de âncora, em vez disso, eles estão sendo usados em cabeçalhos simplesmente para que eles possam compartilhar links diretamente para as seções específicas.

Prós e contras das ligações de ancoragem

Só porque estamos a fazer algo, nem sempre significa que deves fazê-lo. Aqui estão alguns prós e contras a considerar ao usar links âncora em seu site WordPress.

Pros

Links de âncora no exemplo do Google

Links de âncora no exemplo do Google

Contras

Enquanto nós pensamos que os prós definitivamente superam os contras, aqui estão alguns contratempos que você pode querer considerar.

Transição do Anchor Link

Você também pode querer pensar em mudar a transição do link de âncora. Por padrão, links de âncora saltarão repentinamente para o ID mais abaixo na página. Isto pode ser chocante para alguns. Você pode mudar isso para que seja uma transição de rolagem suave. Isto é na verdade o que fazemos no blogue Kinsta. Você pode utilizar um plugin livre como o Page scroll to id ou adicionar algum CSS ao seu site, como o scroll-behavior: smooth;. Este post do Stack Overflow tem algumas dicas adicionais para desenvolvedores.

Como acontece com a maioria das dicas do WordPress, há algumas maneiras diferentes que você pode ir sobre a adição de links âncora no WordPress. Confira estes quatro diferentes métodos fáceis. E sim, esses links diretamente abaixo estão usando texto âncora. 😁

A primeira maneira de criar links âncora no WordPress é simplesmente fazê-lo manualmente com HTML em cada uma de suas postagens. Vamos criar um para que possas ver como funcionam.

Passo 1

Crie o texto para o seu link e adicione um hyperlink nele como você normalmente faria para qualquer outro link.

Crie um link de âncora com HTML

Crie um link de âncora com HTML

Passo 2

Ao invés de vinculá-lo a uma URL, postagem ou página, você irá atribuir-lhe um nome de âncora. URIs que designam âncoras contêm um caractere “#” seguido do nome da âncora. Você pode nomear o que quiser, embora normalmente recomendemos que o nome seja curto e relacionado ao nome real do cabeçalho.

Se você olhar para a vista de texto (HTML), ele se parece com isto:

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

Aqui está um exemplo de todos os links de âncora que estamos usando neste post:

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

Passo 3

Em seguida, você precisa adicionar um ID no cabeçalho para o qual deseja que o link de âncora salte. Para isso, você precisará mudar para a visualização de texto (HTML) no editor do WordPress. No cabeçalho, neste caso, um cabeçalho H2, adicione o ID junto com o nome da âncora que você escolheu na etapa 2. O nome da âncora e o atributo ID devem ser exatamente os mesmos para que o link funcione.

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

Não quer se preocupar com código HTML todas as vezes? Não se preocupe, existem alguns plugins WordPress gratuito incrível que você pode utilizar para adicionar facilmente links âncora e até mesmo um índice de conteúdo para cada post.

Adicionar Anchor Link com um Plugin

Uma das maneiras mais fáceis de adicionar um link âncora é com o plugin TinyMCE Advanced gratuito. Este plugin basicamente adiciona funcionalidade extra ao editor com botões de atalho rápido. Como de escrever isso, o plugin tem mais de 2 milhões de instalações ativas com uma classificação de 4,5 de 5 estrelas.

TinyMCE Advanced WordPress plugin

TinyMCE Advanced WordPress plugin

Passo 1

Depois de ter instalado e ativado o plugin, vá ao seu post e crie um hiperlink no seu texto âncora. Ao invés de vinculá-lo a uma URL, post ou página, você atribuirá a ele um nome de âncora com um # antes dele.

Adicionar nome da âncora

Adicionar nome da âncora

Passo 2

Realce o cabeçalho ao qual deseja vinculá-lo. Em seguida, clique em “Inserir” no botão no topo e selecione “Âncora”. Este botão aparece no editor por causa do plugin TinyMCE Advanced.

Adicionar âncora

Adicionar âncora

Passo 3

Introduza o nome da âncora que lhe deu no Passo 1 e clique em “OK”. Este plugin poupa-lhe tempo porque nunca tem de sair da vista do editor visual. Se você está fazendo isso manualmente com HTML você tem que saltar entre o editor visual e o editor de texto (HTML) vistas.

ID da âncora

ID da âncora

Adicionar Índice com um Plugin

Talvez queira acelerar ainda mais o processo. 😄 Se você está escrevendo um monte de conteúdo em profundidade e sempre quer incluir um índice de conteúdo (listas de links âncora / menu de salto) em suas mensagens, então você deve tirar proveito de um índice de plugin de conteúdo.

Um dos melhores plugins gratuitos é o Easy Table of Contents. Este plugin gera automaticamente links de âncora para seus cabeçalhos e permite que você insira seu índice em qualquer lugar do seu post com um simples atalho. Ao escrever isto, o plugin tem mais de 30.000 instalações ativas com uma classificação de 4,5 de 5 estrelas.

Easy Table of Contents WordPress plugin

Easy Table of Contents WordPress plugin

Passo 1

Depois de ter instalado e ativado o plugin, existem algumas configurações que você provavelmente vai querer alterar. Estes podem ser encontrados em “Settings → Tabela de Conteúdos”.

Configurações do Easy Table of Contents

Configurações do Easy Table of Contents

Passo 2

Para inserir o índice manualmente, basta inserir o atalho [ez-toc] onde você quer que ele apareça no post.

Atalho EZ-TOC

Atalho EZ-TOC

Em seguida, o índice é gerado automaticamente para todos os cabeçalhos no lançamento. Não é fantástico?

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
Índice do WordPress

Índice do WordPress

Você também pode fazer mais alterações nas configurações em relação ao que deve aparecer, exclusões, aparência, etc. Por exemplo, talvez tenha sempre um título “Resumo” no final das suas mensagens. É possível entrar esse cabeçalho na lista de exclusões nas opções para que ele não seja incluído no índice.

Outra tabela de conteúdo plugin que você pode querer verificar é o Shortcode Table of Contents. Este é um plugin mais recente no mercado, mas foi desenvolvido por James Kemp, que tivemos o prazer de entrevistar.

Adicionar Links de Âncora em Cabeçalhos Automaticamente com um Plugin

Quer simplesmente adicionar links de âncora em todos os seus cabeçalhos automaticamente? Então você deve conferir o plugin gratuito do WP Anchor Header. Isso adicionará links de âncora a todos os seus cabeçalhos H1-H6.

WP Anchor Header plugin

WP Anchor Header plugin

Este é um plugin muito básico e não há nenhuma configuração. Basta instalá-lo, ativá-lo, e você está pronto para ir. Cada cabeçalho receberá automaticamente um nome de âncora (derivado do nome do cabeçalho), e eles até recebem um pequeno ícone de âncora legal que aparece quando você passa o mouse sobre o cabeçalho. Isso permite que os visitantes vejam facilmente que há um link lá que eles poderiam copiar se quisessem.

Ligações de ancoragem automáticas nos cabeçalhos

Ligações de ancoragem automáticas nos cabeçalhos

O novo editor do Gutenberg está mesmo ao virar da esquina e está projetado para ser lançado com o WordPress 5.0. Com ele é aprimorado e incorporado suporte para adicionar IDs de âncora aos cabeçalhos.

Passo 1

Realce o cabeçalho no bloco Gutenberg e clique em “Avançado” no lado direito. Você verá uma opção para adicionar um âncora HTML.

Adicionar âncora HTML no editor do Gutenberg

Adicionar âncora HTML no editor do Gutenberg

Passo 2

Se você quiser vincular-se a ele, simplesmente crie um hyperlink no seu texto âncora. Ao invés de vinculá-lo a uma URL, post ou página, você atribuirá a ele um nome de âncora com um # antes dele.

Adicionar link de âncora em Gutenberg

Adicionar link de âncora em Gutenberg

Não quer criar links de âncora com HTML ou instalar um plugin? Então devias ver o Anchor Links Chrome extension grátis. Isto é totalmente compatível com WordPress auto-hospedado, WordPress.com, e Medium.

Passo 1

Depois de instalar a extensão Chrome, basta realçar o cabeçalho no qual pretende adicionar a ligação de âncora. Em seguida, clique no pequeno ícone da extensão Anchor Link Chrome na barra de ferramentas do navegador.

Extensão cromada add anchor link

Extensão cromada add anchor link

Nos bastidores, ele cria o ID de âncora (derivado do nome do cabeçalho). Neste exemplo: #Header_1. Quando você clica no ícone, ele o copia automaticamente para a área de transferência.

Copiado para a área de transferência

Copiado para a área de transferência

Passo 2

Em seguida, vá até o texto que você deseja adicionar o link de âncora, crie um hyperlink como você normalmente, e clique em “Colar”.

Adicionar link de âncora

Adicionar link de âncora

E é tudo! A extensão Chrome ajuda a torná-la rápida e fácil sem depender de quaisquer plugins de terceiros.

Resumo

Como você pode ver, há um monte de maneiras criativas para adicionar links âncora no WordPress. Alguns são mais fáceis do que outros. Se você estiver publicando muito mais conteúdo, isso ajuda seus visitantes a obter o conteúdo que desejam imediatamente. Nós também vimos links de âncora ajudar a obter “jump to menus” em SERPs, o que ajuda a aumentar o CTR em sua listagem orgânica.

Você está usando links de âncora ainda em seu site WordPress? Se assim for, adoraríamos ouvir a sua experiência ou pensamentos.


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos