Procurando uma maneira fácil de adicionar navegação por breadcrumbs ao seu site?
Existem benefícios de SEO e para o usuário ao adicionar navegação por breadcrumbs.
Neste tutorial, você aprenderá como adicionar navegação por breadcrumbs e algumas opções para personalizar seus trilhos de breadcrumbs.
Neste Artigo
O que é Navegação por Breadcrumbs?
Breadcrumbs são pequenos links que mostram aos usuários o caminho que percorreram até a página atual em que estão.
Esses links também são chamados de trilha de breadcrumbs.
O termo vem do conto de fadas João e Maria. João deixa um rastro de migalhas de pão enquanto ele e sua irmã entram na floresta. Ele espera usar essas migalhas para encontrar o caminho de volta para casa.
Benefícios dos Breadcrumbs
Breadcrumbs ajudam os mecanismos de busca a entender o tópico da sua página e a hierarquia do seu site.
Esses breadcrumbs podem ajudar sua página a classificar para suas palavras-chave alvo ou relacionadas.
E como os trilhos de breadcrumbs são links internos, eles também podem ajudar os mecanismos de busca a rastrear seu site.
Marcação Schema
Há também um benefício de SEO ao adicionar markup de schema de breadcrumb em suas páginas da web. Esse tipo de código HTML ajuda o Google a entender melhor sua página.
Plugins de SEO para WordPress, como o All in One SEO (AIOSEO), adicionarão automaticamente esse código para você.
Melhora da Experiência do Usuário
Breadcrumbs também ajudam os usuários a navegar em um site sem usar o botão de 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 engajamento.
Sites complexos, incluindo lojas de e-commerce com hierarquias aninhadas, se beneficiam significativamente da navegação por breadcrumbs.
Neste tutorial, mostraremos como adicionar breadcrumbs e exibi-los e personalizá-los.
Usaremos o plugin All in One SEO (AIOSEO).
Passo 1: Baixe e Instale o All in One SEO (AIOSEO)
Primeiro, baixe e instale o All in One SEO (AIOSEO).
Este plugin inclui um gerador de breadcrumbs. Ele também tem tudo o que você precisa para SEO. E é fácil para iniciantes.
O All in One SEO (AIOSEO) é um plugin 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 plugin.
Etapa 2: Habilitar Breadcrumbs
Após instalar o plugin, vá para AIOSEO » Configurações Gerais » Breadcrumbs.
Ative o botão Ativar Breadcrumbs.
Abaixo disso, você verá 4 opções para adicionar breadcrumbs ao seu site.
Etapa 3: Escolha uma Opção de Exibição
Aqui estão as 4 opções
- Bloco Gutenberg ou shortcode: Use estes para adicionar breadcrumbs a páginas individuais.
- Widget: Use este para adicionar breadcrumbs à barra lateral ou ao rodapé do seu post.
- Código PHP: Use este para adicionar breadcrumbs a todo o site (a todas as páginas) instantaneamente.
Todos esses métodos são fáceis de usar. Vamos percorrê-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 este bloco, abra uma página e coloque o cursor onde você deseja que os breadcrumbs sejam adicionados.
- Clique no sinal preto “+” para adicionar um novo bloco.
- Na janela pop-up, pesquise por “breadcrumbs” e o bloco AIOSEO – Breadcrumbs aparecerá.
- Clique nele para adicionar breadcrumbs à sua página.
Método 2: Shortcode
Há também um shortcode exclusivo do AIOSEO para adicionar breadcrumbs.
Os shortcodes 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 Gutenberg, os shortcodes são rápidos e fáceis de usar.
Volte para AIOSEO » Configurações Gerais » Breadcrumbs para obter o shortcode de breadcrumbs.
- Clique no ícone Shortcode.
- E copie o shortcode de breadcrumbs do AIOSEO abaixo dele.
Agora, navegue até uma página em seu site onde você 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 Aparência » Widgets.
(Se o seu tema suportar áreas de widget, você a 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 da AIOSEO aparecerá.
Arraste o widget para onde você deseja que ele apareça na barra lateral.
Em nosso exemplo, o arrastaremos para a área do rodapé.
Agora nossos breadcrumbs aparecerão no rodapé da barra lateral.
Claro, você pode ter breadcrumbs na sua barra lateral e no topo das suas páginas.
Método 4: Código PHP
Você pode facilmente adicionar breadcrumbs em todo o site usando um trecho de código PHP.
Você copiará e colará este trecho como faria com texto normal.
O benefício de usar esta opção é que ela adicionará automaticamente breadcrumbs a todas as suas páginas, e você nunca precisará repetir esta 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 percorrer estas etapas.
1. Copie o Trecho de Código
Na página Breadcrumbs da AIOSEO,
- Clique em Código PHP. Isso fará com que uma pequena linha de código apareça.
- Clique no pequeno ícone de cópia à direita do trecho de código.
Agora que você copiou essa linha de código, você a colará no seu tema.
2. Abra o editor de temas.
- Na navegação do lado esquerdo do WordPress, vá para Aparência » Editor de Arquivos do Tema.
Uma nova janela se abrirá assim:
3. Clique em header.php
- Na coluna da direita (Arquivos do Tema), role para encontrar header.php e clique nele.
Isso fará com que uma nova janela de código apareça à esquerda.
4. Cole o código.
- Procure pela tag </head>.
- Cole o trecho de código PHP abaixo dela.
- Em seguida, clique em Atualizar Arquivo para salvar suas alterações.
Aqui está um close-up da tag </head> e do trecho de código PHP de breadcrumbs.
Após clicar em Atualizar Arquivo, todas as suas páginas da web terão breadcrumbs adicionados.
E novas postagens ou páginas também as terão.
Atenção: Antes da tag </head>, existe uma tag <head> (sem a barra). O trecho de código PHP deve ser colado após a tag </head>.
Agora que você sabe como adicionar navegação por breadcrumbs ao seu site WordPress, mostraremos como personalizar sua aparência.
Configurações de Breadcrumbs
Alterar suas configurações de breadcrumb modificará a aparência das suas trilhas de breadcrumb.
Essas configurações incluem opções para:
- Incluir ou omitir sua página inicial.
- Usar estilos de separador diferentes.
- 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 Configurações de Breadcrumb.
À medida que você ajusta as configurações, esta visualização mudará.
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. ("Início" é o rótulo padrão.)
Role um pouco para baixo.
Aqui você tem mais 2 opções de personalização.
- Prefixo do Breadcrumb: Se você quiser que um texto seja exibido no início da sua trilha de breadcrumb, insira-o aqui.
- Mostrar Página Inicial do Blog: Desative se você não quiser que o nome do seu blog apareça na trilha de breadcrumb.
Saiba mais sobre Configurações de Breadcrumb.
Usando Modelos de Breadcrumb Pro
Se você estiver usando a versão Pro do All in One SEO (AIOSEO), verá as opções de Modelo de Breadcrumb na parte inferior de AIOSEO » Configurações Gerais » Breadcrumbs.
Os modelos permitem que você altere a aparência dos breadcrumbs. Você pode escolher opções diferentes para diferentes tipos de postagem.
Saiba mais sobre modelos de breadcrumb.
Tipos de Navegação por Breadcrumb
Além dos breadcrumbs baseados em hierarquia abordados acima, existem outros 2 tipos de navegação por breadcrumb.
Breadcrumbs baseados em hierarquia também são chamados de breadcrumbs baseados em localização.
Breadcrumbs Baseados em Histórico (Breadcrumbs Baseados em Caminho)
Este tipo de navegação exibe as páginas que você visitou em um site.
Pode tornar-se difícil de gerenciar quando os usuários visitam muitas páginas.
Breadcrumbs Baseados em Atributos
Alguns sites de e-commerce incluem atributos de produtos, como cor, acabamento ou tamanho, em seus breadcrumbs.
Estes podem ser combinados com breadcrumbs baseados em hierarquia.
Melhores Práticas
O Google recomenda que seus breadcrumbs correspondam à hierarquia do seu site.
Dito isso, eles não devem replicar ou substituir os itens de navegação principal.
Resumo
Breadcrumbs podem melhorar a usabilidade do seu site e ajudar suas páginas a ter um melhor ranking nos resultados de pesquisa do Google.
Sites de e-commerce com muitas páginas de produtos e sites ricos em informações se beneficiarão significativamente da navegação por breadcrumbs. Mas qualquer proprietário de site pode adicioná-la.
Próximos Passos?
Agora que você aprendeu como adicionar breadcrumbs, qual o próximo passo?
Aprender como adicionar um sitemap HTML ao seu site WordPress é fácil. E explore nossos projetos de SEO DIY para iniciantes.
Se você achou este artigo útil, por favor, inscreva-se em nosso Canal do YouTube. Você encontrará muitos outros tutoriais úteis lá. Você também pode nos seguir no X (Twitter), LinkedIn ou Facebook para ficar por dentro das novidades.
Quer Experimentar o AIOSEO Gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Aviso: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar 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 tomar certas ações relacionadas a breadcrumbs no meu site – o autor assume um conhecimento que eu não possuo. Portanto, não tenho confiança para tomar nenhuma ação. No geral, este artigo não é suficientemente amigável para iniciantes.