Procurando uma maneira fácil de adicionar navegação de migalhas de pão ao seu site?
Há benefícios para o SEO e para o usuário ao adicionar a navegação de migalhas de pão.
Neste tutorial, você aprenderá a adicionar navegação de migalhas de pão e algumas opções para personalizar suas trilhas de migalhas de pão.
Neste artigo
O que é navegação Breadcrumb?
Breadcrumbs são pequenos links que mostram aos usuários o caminho percorrido até a página atual em que se encontram.
Esses links também são chamados de trilha de migalhas de pão.
O termo vem do conto de fadas Hansel e Gretel. Hansel deixa um rastro de migalhas de pão quando ele e sua irmã entram na floresta. Ele espera usar essas migalhas de pão para encontrar o caminho de volta para casa.
Benefícios do Breadcrumb
Os breadcrumbs ajudam os mecanismos de pesquisa a entender o tópico da sua página e a hierarquia do site.
Esses breadcrumbs podem ajudar sua página a se classificar para suas palavras-chave alvo ou relacionadas.
E como as trilhas de migalhas de pão são links internos, elas também podem ajudar os mecanismos de pesquisa a rastrear seu site.
Marcação de esquema
Também há um benefício de SEO ao adicionar a marcação de esquema de migalhas de pão às suas páginas da Web. Esse tipo de código HTML ajuda o Google a entender melhor sua página.
Os plug-ins de SEO do WordPress, como o All in One SEO (AIOSEO), adicionarão automaticamente esse código para você.
Melhoria da experiência do usuário
Os breadcrumbs também ajudam os usuários a navegar em um site sem usar o botão voltar do navegador. Por esse motivo, os breadcrumbs podem proporcionar uma melhor experiência ao usuário, reduzir as taxas de rejeição e aumentar o envolvimento.
Sites complexos, incluindo lojas de comércio eletrônico com hierarquias aninhadas, beneficiam-se significativamente da navegação por breadcrumb.
Neste tutorial, mostraremos como adicionar breadcrumbs e como exibi-los e personalizá-los.
Usaremos o plug-in All in One SEO (AIOSEO).
Etapa 1: Faça o download e instale o All in One SEO (AIOSEO)
Primeiro, faça o download e instale o All in One SEO (AIOSEO).
Esse plug-in inclui um gerador de breadcrumb. Ele também tem tudo o que você precisa para SEO. E é amigável para iniciantes.
O All in One SEO (AIOSEO) é um plug-in estabelecido com milhares de avaliações 5 estrelas no WordPress.org. Atualmente, mais de 3 milhões de proprietários de sites estão usando o plug-in.
Etapa 2: Ativar Breadcrumbs
Depois de instalar o plug-in, vá para AIOSEO " Configurações gerais " Breadcrumbs.
Ative o botão Enable Breadcrumbs (Ativar migalhas de pão).
Abaixo disso, você verá 4 opções para adicionar breadcrumbs ao seu site.
Etapa 3: Escolha uma opção de exibição
Veja a seguir quais são as 4 opções
- Bloco ou shortcodedo Gutenberg: Use-os para adicionar breadcrumbs a páginas individuais.
- Widget: Use-o para adicionar breadcrumbs à barra lateral ou ao rodapé da postagem do blog.
- Código PHP: Use isso para adicionar breadcrumbs em todo o site (em todas as páginas) instantaneamente.
Todos esses métodos são fáceis de usar. Vamos examiná-los passo a passo.
Método 1: Bloco Gutenberg
Como você deve saber, o WordPress vem com o editor Gutenberg, que usa blocos clicáveis para adicionar elementos a uma página.
Esses elementos podem ser um parágrafo, uma lista com marcadores, uma imagem ou uma tabela.
O All in One SEO oferece alguns blocos especiais do Gutenberg, incluindo o bloco AIOSEO - Breadcrumbs.
Para usar esse bloco, abra uma página e posicione o cursor onde deseja adicionar os breadcrumbs.
- Clique no sinal preto "+" para adicionar um novo bloco.
- Na janela pop-up, pesquise "breadcrumbs", e o bloco AIOSEO - Breadcrumbs será exibido.
- Clique nele para adicionar breadcrumbs à sua página.
Método 2: Shortcode
Há também um shortcode AIOSEO exclusivo para adicionar breadcrumbs.
Os códigos de acesso do WordPress são pequenos trechos de texto que você copia e cola em uma página para adicionar um elemento, como um índice.
Assim como os blocos do Gutenberg, os códigos de acesso são rápidos e fáceis de usar.
Retorne ao AIOSEO " Configurações gerais " Breadcrumbs para obter o shortcode do breadcrumb.
- Clique no ico do Shortcode.
- E copie o shortcode de breadcrumbs do AIOSEO abaixo dele.
Agora, navegue até uma página em seu site à qual deseja adicionar breadcrumbs.
Em seguida, cole o shortcode em seu artigo.
Ao visualizar sua página da Web, você pode ver que os breadcrumbs foram adicionados.
Método 3: Widget
Os widgets do WordPress permitem que você adicione recursos a partes permanentes do seu site, como barras laterais e rodapés.
Os widgets incluem calendários, caixas de pesquisa e arquivos.
Para adicionar breadcrumbs ao seu site usando a opção de widget, vá para Appearance " Widgets.
(Se o seu tema for compatível com áreas de widget, você o verá no menu).
Isso abrirá uma nova janela. Você verá uma réplica rolável da sua barra lateral no lado direito.
Agora, clique no ícone "+" ao lado da palavra Widgets.
Isso abrirá uma caixa de pesquisa. Comece a digitar "breadcrumbs" e o widget de breadcrumbs do AIOSEO será exibido.
Arraste o widget para onde você deseja que ele apareça na barra lateral.
Em nosso exemplo, vamos arrastá-lo para a área do rodapé.
Agora, nossos breadcrumbs serão exibidos no rodapé da barra lateral.
É claro que você pode ter breadcrumbs na barra lateral e na parte superior das páginas.
Método 4: Código PHP
Você pode adicionar facilmente breadcrumbs em todo o site usando um trecho de código PHP.
Você copiará e colará esse trecho da mesma forma que faria com um texto comum.
A vantagem de usar essa opção é que ela adicionará automaticamente breadcrumbs a todas as suas páginas, e você nunca precisará repetir essa ação.
Estas são as etapas:
- Copie o trecho de código.
- Abra o editor de temas.
- Clique em header.php.
- Cole o trecho de código.
Vamos examinar essas etapas.
1. Copie o snippet de código
Na página Breadcrumbs do AIOSEO,
- Clique em Código PHP. Isso fará com que uma pequena linha de código seja exibida.
- Clique no pequeno ícone de cópia à direita do trecho de código.
Agora que você copiou essa linha de código, cole-a em seu tema.
2. Abra o editor de temas.
- Na navegação à esquerda do WordPress, vá para Appearance " Theme File Editor.
Uma nova janela será aberta assim:
3. Clique em header.php
- Na coluna da direita(Arquivos de tema), role até encontrar header.php e clique nele.
Isso fará com que uma nova janela de código seja exibida à esquerda.
4. Cole o código.
- Look for the </head> tag.
- Abaixo dele, cole o trecho de código PHP.
- Em seguida, clique em Update File (Atualizar arquivo) para salvar suas alterações.
Here’s a close-up of the </head> tag and the PHP breadcrumb code snippet.
Depois de clicar em Update File, todas as suas páginas da Web terão breadcrumbs adicionados.
E os novos posts ou páginas também os terão.
Watch out: Before the </head> tag, there’s a <head> tag (without the slash). The PHP code snippet must go after the </head> tag.
Agora que você sabe como adicionar navegação de migalhas de pão em seu site WordPress, mostraremos como personalizar a aparência delas.
Configurações de navegação
A alteração das configurações de breadcrumb alterará a aparência das trilhas de breadcrumb.
Essas configurações incluem opções para:
- Inclua ou omita sua página inicial.
- Use diferentes estilos de separadores.
- Incluir ou omitir a página atual (título da página) em que o usuário está.
Primeiro, você verá a visualização na parte superior da área Breadcrumb Settings.
À medida que você ajustar as configurações, essa visualização será alterada.
Abaixo da visualização, você pode experimentar diferentes estilos de separador.
E você pode desativar o link da página inicial ou dar a ele um rótulo diferente. ("Home" é o rótulo padrão).
Role a tela para baixo um pouco.
Aqui você tem mais duas opções de personalização.
- Prefixo da trilha de navegação: Se quiser que o texto seja exibido no início da trilha de navegação, digite-o aqui.
- Show Blog Home: Alterne para "Off" se não quiser que o nome do seu blog apareça na trilha de navegação.
Saiba mais sobre as configurações de Breadcrumb.
Uso de modelos de Breadcrumb Pro
Se estiver usando a versão Pro do All in One SEO (AIOSEO), você verá as opções de modelo de Breadcrumb na parte inferior do AIOSEO " General Settings " Breadcrumbs.
Os modelos permitem que você altere a aparência dos breadcrumbs. Você pode escolher diferentes opções para diferentes tipos de post.
Saiba mais sobre os modelos de breadcrumb.
Tipos de navegação Breadcrumb
Além dos breadcrumbs baseados em hierarquia abordados acima, há dois outros tipos de navegação por breadcrumbs.
Os breadcrumbs baseados em hierarquia também são chamados de breadcrumbs baseados em localização.
Breadcrumbs com base no histórico (Breadcrumbs com base no caminho)
Esse tipo de navegação exibe as páginas que você visitou em um site.
Ele pode se tornar pesado quando os usuários visitam muitas páginas.
Breadcrumbs baseados em atributos
Alguns sites de comércio eletrônico incluem atributos de produtos, como cor, acabamento ou tamanho, em suas trilhas de navegação.
Eles podem ser combinados com breadcrumbs baseados em hierarquia.
Práticas recomendadas
O Google recomenda que os breadcrumbs correspondam à hierarquia do seu site.
Dito isso, eles não devem replicar ou substituir seus principais itens de navegação.
Resumo
Os breadcrumbs podem melhorar a usabilidade do seu site e ajudar suas páginas a se classificarem melhor nos resultados de pesquisa do Google.
Os sites de comércio eletrônico com muitas páginas de produtos e sites ricos em informações se beneficiarão significativamente da navegação por breadcrumb. Mas qualquer proprietário de site pode adicioná-la.
O que vem a seguir?
Agora que você aprendeu a adicionar farinha de rosca, o que vem a seguir?
É fácil aprender a adicionar um mapa do site em HTML ao seu site WordPress. E explore nossos projetos de SEO DIY para iniciantes.
Se você achou este artigo útil, inscreva-se em nosso canal do YouTube. Você encontrará muitos outros tutoriais úteis lá. Você também pode nos seguir no X (Twitter), no LinkedIn ou no Facebook para ficar por dentro das novidades.
Quer experimentar o AIOSEO gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.
Este artigo começa bem, mas depois não há explicação suficiente para mim sobre por que (e como) devo realizar determinadas ações relacionadas ao breadcrumb em meu site - o autor pressupõe um conhecimento que eu não possuo. Portanto, não me sinto confiante para tomar qualquer atitude. Em geral, esse artigo não é suficientemente amigável para iniciantes.