Já clicou em um link e foi parar exatamente onde queria: na metade de uma página? Esse é um link de âncora em ação. Ele leva você diretamente à parte que interessa, sem a necessidade de rolagem.
Quando comecei a criar posts de blog e tutoriais mais longos no WordPress, percebi rapidamente a necessidade de links de âncora. Os leitores passavam os olhos, saltavam ou perdiam completamente as seções. A adição de um índice simples com links de âncora mudou isso. Isso facilitou a navegação e ajudou algumas postagens a mostrar links "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 no SEO e na experiência do usuário.
Índice
- Métodos de links âncora comparados
- Como faço para adicionar links âncora no Block Editor do WordPress?
- Posso criar links âncora no editor clássico do WordPress?
- Como adicionar manualmente links âncora em HTML
- Como adicionar automaticamente links âncora com um plug-in do WordPress
- Adição de links âncora a páginas de destino
Métodos de links â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 | Melhor para | Precisa de código? | Precisa de um plug-in? |
|---|---|---|---|
| Editor de blocos | Sites modernos em WordPress | Não | Não |
| Editor clássico | Instalações mais antigas do WordPress | HTML básico | Não |
| Manual HTML | Layouts personalizados, páginas de destino | Sim | Não |
| Plug-in (por exemplo, Easy TOC) | Tabelas de conteúdo automáticas | Não | Sim |
| Criador do SeedProd | Páginas de destino e temas | Não | Não |
O que é um link âncora no WordPress?
Um link âncora é um tipo de link interno que permite que os usuários saltem para uma seção específica na mesma página. Ele usa um hash (#) seguido de um ID para direcionar esse ponto no HTML.
Como você pode ver no exemplo acima, ao clicar em um link de âncora, você é levado instantaneamente para esse tópico na página.
Quando você deve usar links â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 permanecer e interagir com seu conteúdo.
A maneira mais fácil de manter os leitores envolvidos é ajudá-los a encontrar rapidamente as informações de que precisam. Você pode fazer isso criando links de âncora para que os usuários possam pular o restante do conteúdo e ir direto para as seções que lhes interessam. Essa é 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 o SEO do WordPress. O Google geralmente exibe links de âncora nos resultados de pesquisa como um link "pular para" para que os leitores possam ir 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 "jump to". 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 você cria um link para ir para uma parte específica de uma página no WordPress? Vamos descobrir!
Como faço para adicionar links âncora no Block Editor do WordPress?
A criação de links de âncora no editor de blocos do WordPress é bastante simples. Você só precisa fazer duas coisas para que seus links de âncora funcionem:
- Crie um link com o sinal # logo antes do texto âncora
- Adicione o atributo ID ao texto para o qual você deseja que o usuário salte
Siga as instruções abaixo para saber como fazer isso por conta própria.
Etapa 1: Crie seu link âncora
A primeira etapa é destacar o texto ao qual você deseja adicionar o link âncora. Em seguida, clique no ícone de inserção de link no editor de blocos do WordPress.
Clicar no ícone mostra a janela pop-up de inserção de link onde, normalmente, você adicionaria um link de página ou procuraria uma página para vincular.
No entanto, para links de âncora, é necessário inserir o sinal # e as palavras-chave da seção para a qual você deseja que os usuários saltem.
As palavras-chave que você usa devem ser:
- Esteja relacionado à seção para a qual você está criando o link
- Não ser muito longo ou complicado
- Use letras maiúsculas para tornar o texto âncora mais legível
- Inclua hífens para separar as palavras e facilitar a leitura
Depois de inserir as palavras-chave do link âncora, clique em Enter para criar o link. Você poderá ver o link criado no editor do WordPress, mas clicar nele não fará nada.
Isso ocorre porque não há um ID conectado ao link âncora, que o navegador procura quando você clica no link.
Você pode corrigir isso adicionando o atributo ID à área de conteúdo para a qual deseja criar o link, o que exploraremos a seguir.
Etapa 2: Adicionar o atributo ID ao texto vinculado
No editor de conteúdo do WordPress, role para baixo até o conteúdo para o qual deseja que os usuários saltem quando clicarem no 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 para a qual deseja criar um link e navegue até as Configurações do bloco no lado direito da página.
Nas configurações do bloco, expanda a guia Advanced (Avançado ) e insira as mesmas palavras-chave que você usou para o seu link de texto âncora na caixa âncora HTML. A única diferença é que você não precisará do sinal # no início.
Ao salvar o artigo e visualizá-lo, você poderá ver o link âncora em ação. Basta clicar nele para acessar o conteúdo que você vinculou anteriormente.
Se a área de conteúdo para a qual você deseja criar um link não for um título, mas um parágrafo ou um trecho de texto comum, o processo será um pouco diferente.
Nessa situação, clique no bloco para mostrar 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 do bloco inteiro de conteúdo.
Now you need to find the HTML tag for the information you want to point to. For example, look for <p> if it’s a paragraph, or <table> if it is a table, and so on.
Depois de encontrar a tag, adicione suas palavras-chave de âncora como o atributo id, como no exemplo abaixo:
<p id="bali-hiking-adventures">
Depois de adicionar suas palavras-chave, você poderá ver um aviso explicando que o bloco contém conteúdo inválido ou inesperado.
Portanto, clique no botão Converter em HTML para salvar suas alterações.
Posso criar links âncora no editor clássico do WordPress?
Se você ainda estiver usando o editor clássico do WordPress, adicionar um link de âncora é um pouco diferente. Siga as etapas abaixo para saber como criar links de âncora no editor de conteúdo visual clássico do WordPress.
Etapa 1: Crie seu link âncora
Primeiro, destaque o texto que você deseja vincular e clique no botão Inserir link na parte superior do editor de conteúdo.
Em seguida, adicione suas palavras-chave âncora com o prefixo #, seguido do texto que você deseja vincular.
Etapa 2: Adicionar o atributo ID ao texto vinculado
A próxima etapa é direcionar os navegadores para a seção do conteúdo para a qual você deseja que os usuários saltem ao clicar no link âncora.
Para fazer isso, alterne para o modo Texto no editor clássico do WordPress e, em seguida, role até a seção que deseja exibir.
Next, find the HTML tag you want your anchor link to target. For example, <h2>, <h3>, <p>, etc.
Agora, adicione o atributo ID com as palavras-chave de seus links âncora sem o prefixo #. Aqui está um exemplo de como isso ficaria:
<h2 id="bali-hiking-adventures">
Agora você pode salvar as alterações e visualizar o conteúdo para ver o funcionamento do link âncora.
Como adicionar manualmente links âncora 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.
First, create an anchor link with the # prefix using the <a href=” “> tag, similar to the example below:
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Then scroll to the section of content you want to display when users click on your link. Usually, the section is an H2 or H3 tag, but it can also be another HTML element, like a simple paragraph <p> tag.
Depois de encontrar a tag HTML, adicione o atributo ID e o texto âncora sem o prefixo # da seguinte forma:
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Agora você pode salvar as alterações e visualizar o conteúdo para testar o link âncora.
Como adicionar automaticamente links âncora com um plug-in do WordPress
Se você publica artigos longos regularmente, pode economizar tempo adicionando automaticamente links de âncora a diferentes títulos do seu conteúdo e criando um índice com um plug-in 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 plug-in Easy Table of Contents, instale-o e ative-o em seu site do WordPress. Se você precisar de ajuda para fazer isso, siga estas instruções para instalar um plug-in do WordPress.
O plug-in usa os títulos do seu conteúdo para adivinhar para quais seções os links devem ser direcionados, e você pode personalizar totalmente as configurações com base nas suas necessidades.
Depois de instalar e ativar o plug-in, navegue até Settings " Table of Contents para definir suas configurações.
Em seguida, ative o plug-in para os tipos de post aos quais você deseja adicionar links de âncora e desmarque as áreas em que não deseja mostrar um índice.
Você também pode ativar a opção de inserção automática. Isso permite que o plug-in crie um índice automaticamente para todos os tipos de conteúdo selecionados, inclusive conteúdo mais antigo.
Se você quiser criar automaticamente um índice apenas para artigos específicos, deixe essa opção desmarcada.
Em seguida, role a página para baixo para escolher onde deseja exibir o índice e quando deseja acioná-lo.
Por exemplo, você pode mostrar o índice antes ou depois do primeiro título e quando um determinado número de títulos estiver presente no artigo.
Mais adiante na página, você pode escolher um tema que combine com a marca do seu site e revisar configurações mais avançadas.
Lembre-se de clicar no botão Save Changes (Salvar alterações) para preservar suas configurações.
Se você ativar a opção de inserção automática, poderá visualizar um artigo com o número certo de títulos para ver o índice em ação.
No entanto, se quiser gerar um índice manualmente, você 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 guia Table of Contents (Índice ) abaixo do editor.
A partir daí, clique na caixa de seleção "insert table of contents" (inserir índice) e selecione os títulos que você deseja incluir como links de âncora.
Agora você pode salvar suas alterações e visualizar o artigo. O plug-in Easy Table of Contents mostrará automaticamente uma lista de links de âncora como seu índice.
Adição de links âncora a páginas de destino
Abordamos vários métodos para adicionar links de âncora ao seu site WordPress, mas e se você estiver criando uma página de destino?
Felizmente, o SeedProd, o melhor tema do WordPress e construtor de páginas de destino, 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 de sua página de destino a outra. Se estiver usando o SeedProd para criar um tema personalizado do WordPress, poderá usar o mesmo método que mostraremos a seguir para criar links de âncora em qualquer lugar do tema.
Basta arrastar o bloco Anchor Link para a parte da página para a qual você deseja ir e digitar um nome.
Em seguida, selecione o texto em sua página de destino a partir do qual deseja criar o link, adicione o nome do link âncora com uma hashtag no início e clique em salvar.
Agora, quando você visualizar a página e testar o link, ele saltará automaticamente para a seção correta.
Você pode seguir este guia passo a passo para criar uma página de destino no WordPress se precisar de ajuda para começar.
Aí está!
Agora você sabe como criar um link â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 "jump to" no Google.
Precisa de mais maneiras de melhorar a usabilidade e o SEO de seu site? Dê uma olhada nestes guias práticos:
- Melhores plug-ins do WordPress para renovar seu site
- Os melhores plug-ins de votação para WordPress que você precisa
- Melhores ferramentas sem código para sites WordPress
- Melhores plug-ins do modo de manutenção do WordPress
- Melhores plug-ins de banner do WordPress para aumentar os leads
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
Tenho um link no rodapé (modelo), digamos que se chama "contato". Ao clicar nele, a página sobre será carregada e a rolagem será feita até a seção de contato. Como isso é feito?
Olá, Max. Para fazer isso, você criaria um link para a página sobre e adicionaria a âncora ao link de URL /sobre/#contato. Espero que isso ajude!
Olá! Adicionei o link â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 algum. Não consigo encontrar nenhum artigo sobre propostas do que pode estar errado? O que pode ser? Juro que está tudo configurado como deveria. Pode haver um plug-in ou algo em meu tema que impeça isso? Obrigado!
Oi Tuija,
Sua versão do WordPress está atualizada para a versão mais recente? Você também pode tentar garantir que todos os seus plug-ins e temas também estejam atualizados. Se isso não funcionar, tente desativar seus plug-ins e ativá-los um de cada vez para ver se há algum conflito.
Hi
Estou procurando uma solução para que a âncora funcione com o menu. A primeira página está bem e rola até o local apropriado. No entanto, ao clicar no link com ID de âncora da página Contact Me, por exemplo, ele não funciona. Descobri que ele mostra MYDOMAIN.com/contact-me/#anchorID em vez de MYDOMAIN.com/#anchorID
Substituí o menu por um URL completo, como MYDOMAIN.com/#anchorID. Funcionou, mas os botões com esse URL mostram sempre a cor ativa que defini para os botões ativos. Além disso, no menu móvel, o próprio menu não fica oculto.
O URL completo funciona, mas como resolver o problema dos botões ativos e não ocultar o menu no celular?
Alguém já encontrou uma solução para isso? Obrigado pela ajuda
Olá, Andrew, você pode entrar em contato com nossa equipe de suporte https://www.seedprod.com/contact/ para obter ajuda com esse problema? Eles estão muito mais bem equipados para ajudar com questões mais técnicas.