Já clicou em um link e foi levado exatamente para onde queria — no meio de uma página? Esse é um link de âncora em ação. Ele leva você direto para a parte que importa, sem precisar rolar.
Quando comecei a criar posts de blog e tutoriais mais longos no WordPress, percebi rapidamente a necessidade de links de âncora. Os leitores estavam apenas passando os olhos, saindo ou perdendo seções inteiras. Adicionar uma simples tabela de conteúdos com links de âncora mudou isso. Tornou a navegação mais fácil e ajudou alguns posts a mostrarem links de “pular para” diretamente nos resultados do Google.
Neste guia, mostrarei exatamente como criar links de âncora no WordPress. Você aprenderá como eles funcionam, onde adicioná-los e como eles podem ajudar com SEO e experiência do usuário.
Sumário
- Anchor Link Methods Compared
- How Do I Add Anchor Links in the WordPress Block Editor?
- Can I Create Anchor Links in the Classic WordPress Editor?
- Como Adicionar Links de Âncora Manualmente em HTML
- Como Adicionar Links de Âncora Automaticamente com um Plugin do WordPress
- Adicionando Links de Âncora a Landing Pages
Métodos de Link de Âncora Comparados
Aqui está uma rápida olhada nas diferentes maneiras de adicionar links de âncora no WordPress, dependendo do seu editor ou configuração.
| Método | Ideal para | Precisa de Código? | Precisa de Plugin? |
|---|---|---|---|
| Editor de Blocos | Sites WordPress Modernos | Não | Não |
| Editor Clássico | Instalações Antigas do WordPress | HTML básico | Não |
| HTML Manual | Layouts personalizados, landing pages | Sim | Não |
| Plugin (ex: Easy TOC) | Tabelas de conteúdo automáticas | Não | Sim |
| Construtor SeedProd | Landing pages e temas | Não | Não |
O Que é um Link de Âncora no WordPress?
Um link de âncora é um tipo de link interno que permite aos usuários pular para uma seção específica na mesma página. Ele usa um hash (#) seguido por um ID para direcionar esse ponto no HTML.
Como você pode ver no exemplo acima, clicar em um link de âncora leva você instantaneamente para aquele tópico na página.
Quando Usar Links de Âncora?
Leva apenas alguns segundos para os usuários decidirem ficar ou sair do seu site. É seu trabalho usar esses poucos segundos para convencê-los a ficar e interagir com seu conteúdo.
A maneira mais fácil de manter os leitores engajados é ajudá-los a encontrar as informações de que precisam rapidamente. Você pode fazer isso criando links de âncora para que os usuários possam pular o resto do seu conteúdo e ir direto para as seções que lhes interessam. Esta é uma ótima maneira de melhorar a experiência do usuário e conquistar mais leitores.
Como mencionamos anteriormente, os links de âncora também podem melhorar seu SEO no WordPress. O Google frequentemente exibe links de âncora nos resultados de pesquisa como um link de “pular para” para que os leitores possam pular direto para uma seção específica da página de resultados.
Às vezes, o Google também mostra vários links de uma única página como links de “pular para”. Esses links comprovadamente aumentam as taxas de cliques nos resultados de pesquisa, o que significa mais tráfego para o seu site.
Então, como criar um link para pular para uma parte específica de uma página no WordPress? Vamos descobrir!
Como Adicionar Links de Âncora no Editor de Blocos do WordPress?
Criar links de âncora no editor de blocos do WordPress é bem simples. Você só precisa fazer 2 coisas para que seus links de âncora funcionem:
- Crie um link com o sinal de # logo antes do texto da âncora
- Adicione o atributo ID ao texto para onde você deseja que o usuário pule
Siga as instruções abaixo para aprender como fazer isso você mesmo.
Etapa 1: Crie seu Link de Âncora
O primeiro passo é destacar o texto ao qual você deseja adicionar seu link de âncora. Em seguida, clique no ícone de inserir link no editor de blocos do WordPress.
Clicar no ícone exibe o pop-up de inserir link onde, normalmente, você adicionaria um link de página ou pesquisaria por uma página para vincular.
No entanto, para links de âncora, você precisa inserir o sinal de # e as palavras-chave para a seção para a qual deseja que os usuários pulem.
As palavras-chave que você usa devem:
- Ser relacionadas à seção à qual você está vinculando
- Não ser muito longas ou complicadas
- Usar capitalização para tornar o texto da âncora mais legível
- Incluir hifens para separar palavras e torná-las mais fáceis de ler
Depois de inserir as palavras-chave do seu link de âncora, pressione Enter para criar o link. Você poderá ver o link criado dentro do editor do WordPress, mas clicar nele não fará nada.
Isso ocorre porque não há um ID conectado ao link de âncora, que seu navegador procura quando você clica no link.
Você pode corrigir isso adicionando o atributo ID à área de conteúdo à qual deseja vincular, o que exploraremos a seguir.
Etapa 2: Adicione o Atributo ID ao Texto Vinculado
No seu editor de conteúdo do WordPress, role para baixo até o conteúdo para o qual você deseja que os usuários pulem ao clicar no seu link de âncora. A seção de que você precisa é geralmente um título ou o início de um novo parágrafo.
Agora, clique no bloco que contém a seção à qual você deseja vincular e navegue até as Configurações do Bloco no lado direito da sua página.
Nas configurações do bloco, expanda a guia Avançado e insira as mesmas palavras-chave que você usou para o link de texto da sua âncora na caixa de âncora HTML. A única diferença é que você não precisará do sinal de # no início.
Ao salvar seu artigo e visualizá-lo, você poderá ver seu link de âncora em ação. Simplesmente clique nele para pular para o conteúdo que você vinculou anteriormente.
Se a área de conteúdo à qual você deseja vincular não for um título, mas um parágrafo comum ou um trecho de texto, o processo é um pouco diferente.
Nessa situação, clique no bloco para exibir as configurações do bloco e clique no menu de três pontos para revelar mais opções.
A partir daí, selecione a opção Editar como HTML, que permite editar todo o HTML desse bloco de conteúdo inteiro.
Agora você precisa encontrar a tag HTML para as informações às quais deseja apontar. Por exemplo, procure por <p> se for um parágrafo, ou <table> se for uma tabela, e assim por diante.
Depois de encontrar a tag, adicione suas palavras-chave de âncora como o atributo id, semelhante ao exemplo abaixo:
<p id="bali-hiking-adventures">
Após adicionar suas palavras-chave, você pode ver um aviso explicando que o bloco contém conteúdo inválido ou inesperado.
Portanto, clique no botão Converter para HTML para salvar suas alterações.
Posso Criar Links de Âncora no Editor Clássico do WordPress?
Se você ainda usa o editor clássico do WordPress, adicionar um link de âncora é um pouco diferente. Siga as etapas abaixo para aprender como criar links de âncora no editor de conteúdo visual clássico do WordPress.
Etapa 1: Crie seu Link de Âncora
Primeiro, destaque o texto que você deseja vincular e clique no botão Inserir Link na parte superior do seu editor de conteúdo.
Em seguida, adicione suas palavras-chave de âncora com o prefixo #, seguido pelo texto que você deseja vincular.
Etapa 2: Adicione o Atributo ID ao Texto Vinculado
O próximo passo é direcionar os navegadores para a seção do conteúdo para a qual você deseja que os usuários pulem ao clicar no link de âncora.
Para fazer isso, mude para o modo Texto no editor clássico do WordPress e, em seguida, role até a seção que você deseja exibir.
Em seguida, encontre a tag HTML que você deseja que seu link de âncora tenha como alvo. Por exemplo, <h2>, <h3>, <p>, etc.
Agora adicione o atributo ID com as palavras-chave dos seus links de âncora sem o prefixo #. Aqui está um exemplo de como isso ficaria:
<h2 id="bali-hiking-adventures">
Agora você pode salvar suas alterações e visualizar seu conteúdo para ver o link de âncora funcionando.
Como Adicionar Links de Âncora Manualmente em HTML
Se você costuma usar o modo Texto para escrever conteúdo no editor clássico do WordPress, veja como criar manualmente um link de âncora em HTML.
Primeiro, crie um link de âncora com o prefixo # usando a tag <a href=” “>, semelhante ao exemplo abaixo:
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Em seguida, role até a seção de conteúdo que você deseja exibir quando os usuários clicarem no seu link. Geralmente, a seção é uma tag H2 ou H3, mas também pode ser outro elemento HTML, como uma tag de parágrafo simples <p>.
Depois de encontrar a tag HTML, adicione o atributo ID e o texto da âncora sem o prefixo #, assim:
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Agora você pode salvar suas alterações e visualizar seu conteúdo para testar seu link de âncora.
Como Adicionar Links de Âncora Automaticamente com um Plugin do WordPress
Se você publica artigos longos regularmente, pode economizar tempo adicionando automaticamente links de âncora a diferentes títulos em seu conteúdo e criando um índice com um plugin do WordPress. Isso facilita para os usuários encontrarem as informações de que precisam e elimina a necessidade de criar cada link de âncora manualmente.
Para fazer isso, baixe o plugin Easy Table of Contents e instale-o e ative-o em seu site WordPress. Se precisar de ajuda para fazer isso, siga estas instruções para instalar um plugin do WordPress.
O plugin usa os títulos em seu conteúdo para adivinhar quais seções vincular, e você pode personalizar totalmente as configurações de acordo com suas necessidades.
Depois de instalar e ativar o plugin, navegue até Configurações » Tabela de Conteúdo para configurar suas opções.
Em seguida, habilite o plugin para os tipos de postagem aos quais você deseja adicionar links de âncora e desmarque as áreas onde você não deseja mostrar uma tabela de conteúdo.
Você também pode ativar a opção de inserção automática. Isso permite que o plugin crie uma tabela de conteúdo automaticamente para todos os tipos de conteúdo selecionados, incluindo conteúdo antigo.
Se você deseja criar uma tabela de conteúdo apenas para artigos específicos automaticamente, deixe esta opção desmarcada.
Em seguida, role a página para escolher onde você deseja exibir seu sumário e quando deseja ativá-lo.
Por exemplo, você pode exibir seu sumário antes ou depois do seu primeiro título e quando um certo número de títulos estiver presente em seu artigo.
Mais abaixo na página, você pode escolher um tema para combinar com a identidade visual do seu site e revisar configurações mais avançadas.
Lembre-se de clicar no botão Salvar Alterações para manter suas configurações.
Se você habilitar a opção de inserção automática, poderá visualizar um artigo com o número correto de títulos para ver seu sumário em ação.
No entanto, se você quiser gerar um sumário manualmente, precisará editar cada artigo individualmente.
Para fazer isso, vá para a tela de edição do seu conteúdo e role para baixo até a aba Sumário abaixo do editor.
A partir daí, marque a caixa de seleção "inserir sumário" e selecione quais títulos você deseja incluir como links de âncora.
Agora você pode salvar suas alterações e visualizar seu artigo. O plugin Easy Table of Contents exibirá automaticamente uma lista de links de âncora como seu sumário.
Adicionando Links de Âncora a Landing Pages
Cobrimos vários métodos para adicionar links de âncora ao seu site WordPress, mas e se você estiver criando uma landing page?
Felizmente, SeedProd, o melhor construtor de temas e landing pages do WordPress, permite que você crie links de âncora facilmente.
Em seu editor visual de arrastar e soltar, você pode usar o prático bloco de links de âncora para vincular uma parte da sua landing page a outra. Se você estiver usando o SeedProd para criar um tema personalizado do WordPress, pode usar o mesmo método que mostraremos a seguir para criar links de âncora em qualquer lugar do seu tema.
Basta arrastar o bloco de Link de Âncora para a parte da página para a qual você deseja pular e inserir um nome.
Depois, selecione o texto na sua landing page que você gostaria de vincular, adicione o nome do link de âncora com uma hashtag no início e clique em salvar.
Agora, quando você visualizar sua página e testar o link, ele pulará para a seção correta automaticamente.
Você pode seguir este guia passo a passo para criar uma landing page no WordPress se precisar de ajuda para começar.
Aí está!
Agora você sabe como criar um link de âncora no WordPress. Esses pequenos links podem parecer pequenos, mas podem fazer uma grande diferença. Melhor experiência do usuário, navegação mais rápida e até mesmo links extras de "pular para" no Google.
Precisa de mais maneiras de melhorar a usabilidade e o SEO do seu site? Confira estes guias práticos:
- Melhores Plugins do WordPress para Renovar Seu Site
- Melhores Plugins de Votação para WordPress que Você Precisa
- Melhores Ferramentas No-Code para Sites WordPress
- Melhores Plugins de Modo de Manutenção do WordPress
- Melhores Plugins de Banner do WordPress para Aumentar Leads
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
Eu tenho um link no rodapé (template), digamos que ele se chama "contato". Clicar nele deve carregar a página "sobre" e rolar para a seção de contato. Como isso é feito?
Oi Max. Para fazer isso, você vincularia à página "sobre" e adicionaria a âncora ao link da URL /sobre/#contato. Espero que isso ajude!
Olá! Adicionei o link de âncora e criei o atributo id corretamente (verifiquei duas e três vezes), mas meu link simplesmente não funciona – ele não me leva a lugar nenhum. Não consigo encontrar nenhum artigo com propostas sobre o que pode estar errado? O que pode ser? Juro que está tudo configurado como deveria. Pode haver algum plugin ou algo no meu tema que impeça isso? Obrigado!
Olá Tuija,
Sua versão do WordPress está atualizada para a versão mais recente? Você também pode tentar garantir que todos os seus plugins e temas estejam atualizados. Se isso não funcionar, tente desativar seus plugins e ativá-los um por um para ver se há algum conflito.
Olá
Procuro uma solução para fazer a âncora funcionar com o menu. A primeira página está boa e rola para o local apropriado. No entanto, ao clicar no link com o ID da âncora de, digamos, página Contato, ele não funciona. Descobri que mostra MEUDOMINIO.COM/contato-me/#anchorID em vez de MEUDOMINIO.COM/#anchorID
Substituí o menu por um URL completo como MEUDOMINIO.COM/#anchorID. Funcionou, mas os botões com esse URL mostram sempre a cor Ativa que defini para botões ativos. Além disso, no menu móvel, o próprio menu não se esconde.
O URL completo funciona, mas como resolver os botões ativos e não esconder o menu no celular?
Alguém tem uma solução para isso? Obrigado
Olá Andrew, você pode entrar em contato com nossa equipe de suporte https://www.seedprod.com/contact/ para obter ajuda com este problema, por favor? Eles estão muito mais bem equipados para ajudar com perguntas mais técnicas.