Links de âncora não é um tópico muito discutido, mas temos tido excelentes resultados com eles! Hoje vamos detalhar 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údo 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? 😉
O que são links de âncora?
Links de âncora, também referidos como links de menu de salto ou índice, são links que o levam instantaneamente a uma parte específica da página (ou a uma página externa). Os destinos de âncora são normalmente especificados usando o elemento A (nomeando-o com o atributo nome), ou por qualquer outro elemento (nomeando com o atributo ID). Ambos os métodos são totalmente compatíveis com os padrões W3C (fonte).
Prefere assistir a versão em vídeo?
Exemplo de um link de âncora
Se ainda está confuso sobre o que são links de âncora, não se preocupe. Veja a imagem de exemplo abaixo. Estamos usando links de âncora em cada um desses itens da lista com os pontos principais. 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.
Em muitos sites, links de âncora são apenas usados para criar um índice de conteúdo no início de artigos de longa duração. Se você conhece um pouco de CSS, você pode ser criativo e fazê-los parecer um pouco mais elegante, como fizemos em nossas páginas de destino.
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 dos links de âncora
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
- Uma das maiores vantagens dos links âncora é criar uma melhor experiência do usuário ao navegar em seu site. Isto é especialmente verdade quando se trata de artigos de longa duração. Nós publicamos um monte de conteúdo detalhado (mais de 4.000 palavras) e a rolagem pode se tornar uma dor. O uso de links âncora permite que o usuário salte instantaneamente para a seção em que está interessado. Deixe seus usuários encontrarem o que precisam mais rapidamente.
- Usando links de âncora em cabeçalhos permite que você compartilhe links diretos para diferentes seções dentro de um artigo. Isto é fantástico para as redes sociais e até mesmo para as equipas de apoio. Por exemplo, nossa equipe de suporte na Kinsta depende fortemente de links de âncora em nossos artigos da Base de Conhecimento para que possamos enviar o usuário para a etapa exata de solução de problemas que ele precisa seguir. Nossa equipe de vendas também utiliza esses recursos para responder mais rapidamente às consultas relacionadas ao Kinsta.
- Quando se trata de páginas de resultados de motores de busca (SERPs), os resultados podem sempre variar com base no que aparece. No entanto, temos visto repetidas vezes os links de âncora (menus de salto) aparecem na nossa lista SERP porque nós os usamos em nossos artigos. Estes são fantásticos porque essencialmente dão-lhe outra linha de texto para a sua listagem orgânica. Eles também podem ajudar a aumentar o CTR como o usuário pode ver algo relacionado à sua consulta que você não transmitiu na meta descrição ou título.
- Os links de âncora também podem ser usados para outras coisas, como o link “retornar ao topo” que a Wikipédia usa junto com suas citações ^ ou notas de rodapé. [1]
Contras
Enquanto nós pensamos que os prós definitivamente superam os contras, aqui estão alguns contratempos que você pode querer considerar.
- links de âncora ou um índice de conteúdo podem diminuir o tempo médio de permanência no sítio por visitante. Porquê? Porquê? Porque eles estão pulando direito ao conteúdo que eles querem em vez de ler todo o seu artigo. No entanto, se você fizer seu visitante feliz, isso poderia resultar que eles se inscreverem para a sua newsletter ou pesquisar mais sobre o que você está vendendo. Então isto pode ser visto como um profissional ou um vigarista.
- Diretamente relacionados ao problema acima, links âncora podem possivelmente impactar sua receita de anúncios. Os visitantes que saltam diretamente para uma determinada seção podem diminuir as impressões e os cliques. Sites que dependem fortemente de publicidade podem querer testar A/B usando links de âncora e índice de conteúdo.
- Se você está mudando domínios ou precisando adicionar 301 redireciona é importante notar que o identificador de fragmento (#) nunca é enviado para o servidor. Isso pode complicar as coisas se você mudar as coisas ao longo da estrada com seus links de âncora. Há maneiras de contornar isso com JavaScript, mas isso não é de forma alguma uma tarefa fácil.
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 artigo 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 três diferentes métodos fáceis. E sim, esses links diretamente abaixo estão usando texto âncora. 😁
- Como criar manualmente links de âncora no WordPress
- Como criar links de âncora no WordPress com um plugin
- Como criar links de âncora no WordPress com o Gutenberg
Como criar manualmente links de âncora no WordPress
A primeira maneira de criar links âncora no WordPress é simplesmente fazê-lo manualmente com HTML em cada um de seus artigos. Vamos criar um para que possa 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.
Passo 2
Ao invés de vincular uma URL, artigo ou página, você irá atribuir um nome da â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 artigo:
<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>Como criar links de âncora no WordPress com um plugin
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 artigo.
Adicionar links de âncora 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.
Passo 1
Depois de ter instalado e ativado o plugin, vá ao seu artigo e crie um hiperlink no seu texto âncora. Ao invés de vinculá-lo a uma URL, artigo ou página, você atribuirá a ele um nome de âncora com um # antes dele.
Passo 2
Realce o cabeçalho ao qual deseja vincular. 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.
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.
Plugin Easy Table of Contents
Talvez queira acelerar ainda mais o processo. 😄 Se você está escrevendo um monte de conteúdo detalhado e sempre quiser incluir um índice de conteúdo em suas mensagens, então você deve tirar proveito do plugin Easy Table of Contents.
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.
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”.
- A opção “Ativar suporte” permite-lhe escolher os tipos de mensagens em que pretende utilizar o índice. Provavelmente este é o seu tipo “Posts”.
- Em seguida, é possível selecionar se deseja ou não inserir um índice automaticamente ou se deseja inseri-lo manualmente. Nós provavelmente recomendaríamos fazer manual se suas postagens mudassem um pouco.
- A opção “Mostrar quando” permite que você defina quantos cabeçalhos a mensagem deve ter antes que um índice apareça. Por exemplo, você provavelmente não quer que um índice apareça em um blog curto, então fazer pelo menos quatro ou mais cabeçalhos é provavelmente melhor.
Passo 2
Para inserir o índice manualmente, basta inserir o atalho [ez-toc] onde você quer que ele apareça no post.
Em seguida, o índice é gerado automaticamente para todos os cabeçalhos no lançamento. Não é fantástico?
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.
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.
Como criar links de âncora no WordPress com o Gutenberg
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.
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.
Resumo
Como você pode ver, há um monte de maneiras criativas para adicionar links de â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.
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Muito obrigada pela conteúdo. Consegui facilmente inserir manualmente na minha landing page!