Se você é proprietário de um site WordPress, garantir que seus visitantes sempre tenham uma experiência de usuário tranquila e impecável ao navegar em seu site deve ser uma de suas prioridades. Um usuário típico não gastará muito tempo em sua página antes de determinar se deseja continuar navegando ou se deseja sair de vez. Portanto, você não tem mais do que alguns segundos para fazê-los ficar.
Claro, isso pode ser conseguido usando muitas estratégias diferentes, mas quando se trata de melhorar a experiência do usuário em seu site, nada supera a navegação sólida no site. Agora, quando falamos de navegação do site, queremos dizer a criação de diferentes menus de navegação, botões CTA, e espalhar diferentes tipos de links de navegação em todo o seu site, incluindo links de âncora. E desta vez, vamos nos concentrar em links de âncora em particular.
Links de âncora têm o poder de aprimorar a experiência do usuário de seus visitantes, uma vez que eles permitem que eles acessem rapidamente a seção na qual estão interessados. Fique ligado enquanto discutimos a importância desses tipos de links e mostramos algumas das melhores maneiras de adicioná-los ao seu site WordPress – ambos no Gutenberg e editor clássico.
Vamos cobrir:
Como já mencionamos, os links âncora são elementos de navegação bastante úteis, pois têm a capacidade de levar os usuários a uma área específica na mesma página, o que permite que eles acessem rapidamente a seção de interesse. Também conhecido como índice, esses tipos de links costumam ser usados em formas mais longas de conteúdo, como diferentes tipos de artigos, seções de perguntas frequentes ou listas de produtos ou serviços, por exemplo.
Além de melhorar muito a experiência do usuário do seu site em geral, os links âncora também podem ter uma influência positiva no SEO do seu site. Ou seja, o Google tem a tendência de mostrar seus links âncora na forma de um link “pular para” nos resultados de pesquisa, especialmente se os usuários digitarem as palavras-chave contidas em seu link âncora. Tudo isso pode melhorar sua taxa de cliques e, por extensão, trazer mais tráfego para seu site.
Além disso, se você listar seus links âncora como um índice, o Google pode decidir exibi-los como um rich snippet, como este:
Agora que cobrimos alguns dos motivos básicos pelos quais os links âncora podem ser valiosos para um site, vamos dar uma olhada em como você pode adicioná-los no WordPress.
Para fazer seus links âncora funcionarem, há duas coisas que você deve fazer – primeiro, você precisa adicione um sinal # antes do texto âncora e, em seguida, adicione o atributo ID ao texto que você deseja que os usuários sejam direcionados ao clicar no link âncora.
Para criar o seu link de âncora em Gutenberg, você deve selecionar o texto que deseja ter como sua âncora e clicar no botão Ligação botão.
Um pop-up aparecerá onde você geralmente pode adicionar um URL de link.
Mas em vez de fazer isso, você precisa inclua um prefixo # e insira as palavras-chave para a área específica para a qual deseja que os usuários saltem ao clicar neste tipo de link. Obviamente, você deve usar as palavras-chave relacionadas à seção de âncora para a qual está criando um link. Também recomendamos o uso de hifens e / ou letras maiúsculas para tornar o texto âncora mais legível em geral. Aqui está um exemplo de um prefixo #:
#Produtos capilares
Aperte o botão Enter para terminar de adicionar seu link de âncora. Depois de fazer isso, você poderá ver o link da âncora no editor, mas não poderá clicar nele, pois ainda precisará criar um ID para ele.
Para adicionar um ID ao link âncora, você deve encontre a seção para a qual deseja que os usuários sejam direcionados ao clicar em seu link.
Para vincular a uma seção de título, selecione o bloco desejado e escolha o Avançado aba. Então, no Âncora HTML campo, você deveria adicione o mesmo texto que você usou para o seu link âncora – a única diferença é que você deve omita o prefixo #.
Então, você pode acertar o Publicar / Atualizar (ou Salvar rascunho) e visualize o link da âncora para ver como fica ao vivo.
Se você deseja vincular a qualquer outra seção que não seja um título (como um parágrafo ou outros tipos de bloco), clique em um ícone de menu de três pontos (no próprio bloco) e selecione o Editar como HTML botão.
Agora, encontre a tag HTML para a seção ou elemento específico. Por exemplo, <p> é um parágrafo, <h2>, <h3>, etc. são cabeçalhos e assim por diante.
Depois de encontrar seu elemento, simplesmente anexe um atributo de ID junto com sua âncora para a tag HTML.
Assim:
<p >
Depois de ver uma mensagem informando que este bloco contém conteúdo inesperado ou inválido, você deve Clique no Converter para HTML botão.
E é isso – você adicionou com sucesso um link de âncora a uma seção específica em seu parágrafo ou a qualquer outro bloco de sua escolha.
Caso prefira usar o editor Clássico, você também pode, é claro, criar links de âncora a partir deste editor. Veja como você pode fazer isso.
Em primeiro lugar, selecione o texto do link âncora desejado e clique no Inserir / Editar botão de link.
Em seguida, adicione um prefixo # e também um slug para seu link.
Depois de concluir esta etapa, você deve adicione seu atributo de ID à seção para a qual deseja que seus usuários naveguem ao clicar em seu link.
Mude o seu modo para Texto primeiro e depois encontre a tag HTML da seção à qual deseja adicionar o atributo ID (gostar <h2>, <p>, e assim por diante).
Adicione seu atributo ID junto com o slug de seu link de âncora, mas sem o prefixo #. Por exemplo:
<p> id=“Hair-Products”>
Certifique-se de clicar em publicar / atualizar sua página / postagem e, em seguida, visualizá-lo para ver a aparência do seu link âncora.
Se você preferir escrever e editar seu conteúdo usando o modo Texto inteiramente, você também pode usá-lo para criar seus links âncora usando HTML do zero.
Uma vez no Texto modo, você pode crie seu link de âncora usando o <a href-“ “> marcação. Aqui está um exemplo de como seu link âncora pode ficar em HTML:
<a href="#Hair-Products">Hair Products</a>
Em seguida, encontre a área para onde deseja que os usuários sejam conduzidos ao clicar no link âncora (um título que geralmente é marcado como <h2> e <h3>, um parágrafo marcado como <p>, etc.) e adicione seu atributo de ID à tag HTML (mais uma vez, sem o prefixo #):
<p> > Hair Products</p>
Depois de salvar suas alterações, vá em frente e visualize a aparência do link de âncora.
Se você cria e publica regularmente conteúdo de formato longo em seu site (como artigos particularmente longos, por exemplo), também pode considerar a adição de links âncora automaticamente para acelerar o processo. Felizmente, o WordPress tem uma vasta comunidade online que cria regularmente muitas ferramentas e plug-ins úteis – muitos dos quais podem ser usados gratuitamente. Entre esses plugins está também um plugin chamado Índice fácil, que você pode usar para criar links âncora em seu site automaticamente.
Como o próprio nome sugere, este plugin permitirá que você crie facilmente um índice com uma lista de links âncora e adicione-o às suas páginas, postagens e / ou tipos de postagem personalizados. Você também pode habilite a opção de inserção automática para adicionar seus links âncora automaticamente, ou você pode desmarcar esta opção e definir o índice para páginas / postagens específicas apenas.
Já temos um artigo que fala em profundidade sobre como adicionar um índice no WordPress usando este plug-in prático, então recomendamos que você dê uma olhada se quiser dividir suas páginas ou postagens em seções diferentes para melhor navegação.
Resumindo
Links de âncora podem ser um ótimo complemento para qualquer site da Web, pois permitem que os usuários acessem de forma rápida e fácil a seção que desejam ler. Por sua vez, eles podem ajudar a melhorar sua navegação e aprimorar a experiência do usuário do seu site como um todo. Adicionar esses tipos de links às suas páginas ou postagens pode parecer complexo no início, mas quando você examinar mais de perto as instruções apresentadas acima, perceberá que esse processo não é nada difícil. Apenas certifique-se de seguir cuidadosamente todas as etapas e estará tudo pronto.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
