Se você está procurando uma maneira de tornar seu site WordPress mais fácil de navegar, recomendamos adicionar links de breadcrumb.
A navegação por breadcrumb informa aos usuários onde eles estão em um site em relação à página inicial. Essa trilha de breadcrumb também é exibida nos resultados de pesquisa, o que faz seu site se destacar.
Usamos breadcrumbs em nossos próprios sites e descobrimos que esse recurso facilita para os leitores se moverem entre diferentes páginas. E neste artigo, mostraremos como exibir links de navegação por breadcrumb no WordPress.
O que é Navegação por Breadcrumb e Por Que Você Precisa Dela?
A navegação por breadcrumb é um termo usado para descrever um menu de navegação hierárquico apresentado como uma trilha de links. Geralmente é usada como uma navegação secundária que permite aos usuários subir na hierarquia de páginas do site.
Os links de navegação por breadcrumb são diferentes do sistema de menu de navegação padrão no WordPress.
A navegação por breadcrumb ajuda os usuários a navegar em seu site e ajuda os mecanismos de pesquisa a entender a estrutura e a hierarquia dos links em uma página da web.
Se seus breadcrumbs estiverem configurados da maneira certa, mecanismos de pesquisa como o Google os exibirão junto com o título da página nos resultados de pesquisa. Isso dá ao seu site mais visibilidade nos resultados de pesquisa e aumenta sua taxa de cliques.
Os métodos neste guia ajudarão você a configurar corretamente os breadcrumbs usando schema markup. Schema é um código de marcação inteligente que ajuda o Google a identificar seus breadcrumbs para que eles sejam exibidos nos resultados de pesquisa.
Dito isso, vamos dar uma olhada em como adicionar links de navegação de breadcrumb no WordPress. Mostraremos dois métodos, e você pode escolher o que funciona melhor para você:
- Method 1: Adding Breadcrumb Navigation in WordPress Using All in One SEO (Recommended)
- Método 2: Adicionar Navegação de Breadcrumb com Breadcrumb NavXT
- Tutorial em Vídeo
Método 1: Adicionar Navegação de Breadcrumb no WordPress Usando All in One SEO (Recomendado)
Este método é mais fácil e recomendado para todos os usuários do WordPress.
Para este método, usaremos o All in One SEO for WordPress, que é o melhor plugin de SEO para WordPress do mercado. Ele ajuda você a melhorar facilmente o SEO do seu WordPress sem nenhuma habilidade técnica. Ele também vem com um recurso de breadcrumbs fácil de usar.
Observação: Existe também uma versão gratuita do All in One SEO disponível com recursos limitados, incluindo breadcrumbs. No entanto, recomendamos a atualização para o plugin pago para ter acesso a recursos premium como um assistente de links, sitemaps avançados e muito mais.
Após a ativação, você será levado ao assistente de configuração do plugin. Você pode seguir as instruções na tela para configurar o plugin.
Precisa de ajuda com a configuração? Veja nosso tutorial passo a passo sobre como instalar e configurar o All in One SEO.
Em seguida, você precisa visitar a página All in One SEO » Configurações Gerais e mudar para a aba ‘Breadcrumbs’.
A marcação de esquema de breadcrumbs é adicionada automaticamente pelo All in One SEO ao código do seu site para que os mecanismos de busca possam encontrá-la.
No entanto, se você também quiser exibir links de navegação de breadcrumbs no seu site, precisará ativar a opção ‘Ativar Breadcrumbs’.
Mudar o alternador permite que você veja as diferentes configurações de exibição de breadcrumbs que você pode usar no seu site WordPress.
Existem quatro maneiras que você pode usar para exibir a trilha de navegação de breadcrumbs no seu site WordPress.
1. Adicionando Navegação de Breadcrumbs Usando o Shortcode
O método de shortcode é fácil e permite que você exiba links de navegação de breadcrumbs em suas postagens e páginas do WordPress ou páginas de produtos em sua loja online.
Basta editar a postagem, página ou produto e adicionar o seguinte shortcode onde você deseja exibir a trilha de navegação de breadcrumbs:
[aioseo_breadcrumbs]
Se você estiver usando o editor de blocos padrão, o shortcode será automaticamente convertido no bloco Shortcode.
Agora você pode salvar sua postagem ou página e visualizá-la para ver o menu de navegação de breadcrumbs em ação.
Veja como ficou em nosso site de teste.
2. Adicionando Navegação de Breadcrumbs Usando o Bloco Gutenberg
Agora, se você não quiser usar a opção de shortcode ou não se lembrar do shortcode, poderá exibir a navegação de breadcrumbs usando o bloco AIOSEO – Breadcrumbs.
Basta editar a postagem ou página onde você deseja exibir a navegação de breadcrumbs e adicionar o bloco AIOSEO – Breadcrumbs.
O plugin carregará uma pré-visualização ao vivo dos seus links de navegação de breadcrumbs e a exibirá na área de conteúdo.
Não se esqueça de atualizar ou publicar suas alterações.
3. Adicionando Navegação de Breadcrumbs Usando Widget
Os dois métodos acima exigem que você adicione um shortcode ou bloco em cada postagem ou página onde deseja exibir os links de navegação de breadcrumbs.
E se você quisesse exibir breadcrumbs automaticamente para cada postagem ou página?
O widget AIOSEO Breadcrumbs permite que você faça isso facilmente.
Basta ir para a página Aparência » Widgets e adicionar o bloco de widget AIOSEO – Breadcrumbs. Você pode adicioná-lo à barra lateral, rodapé ou a qualquer área de widget do seu site.
Você pode fornecer um título para o widget ou deixá-lo em branco, se preferir.
Não se esqueça de clicar no botão 'Atualizar' para salvar suas configurações.
Agora você pode visitar seu site e ver o menu de navegação de breadcrumbs em todas as postagens e páginas.
4. Adicionando Navegação de Breadcrumbs Usando Código
Este método permite que você exiba os links de navegação de breadcrumbs exatamente onde desejar. No entanto, ele exige que você adicione código aos arquivos do seu tema WordPress.
Se você nunca fez isso antes, não se esqueça de conferir nosso artigo sobre como adicionar snippets de código no WordPress.
Primeiro, você precisa decidir onde exibir os links de breadcrumb. O local mais comum é abaixo do título individual do post, página ou produto.
Temas do WordPress usam arquivos de template para exibir diferentes seções do seu site. Por exemplo, muitos temas usam um arquivo chamado content-single.php localizado dentro da pasta template-parts do seu tema.
Veja nossa folha de consulta para encontrar quais arquivos editar em um tema do WordPress.
Depois disso, você precisa editar o arquivo do seu tema usando um cliente FTP. Veja nosso guia sobre como usar FTP para enviar arquivos para o WordPress para obter instruções.
Em seguida, coloque o seguinte código onde você deseja exibir os links de navegação de breadcrumb:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
Não se esqueça de salvar suas alterações e enviar o arquivo de volta para o seu site.
Agora você pode visitar seu site para ver os links de breadcrumb em ação.
Altere Como os Links de Breadcrumb São Exibidos no AIOSEO
Por padrão, o All in One SEO usa um template para exibir seus links de navegação de breadcrumb. Ele contém um link para sua página inicial, categoria, página pai e o título do post ou página, separados pelo símbolo ‘» ‘.
Você pode alterar isso visitando a página All in One SEO » Configurações Gerais e indo para a aba ‘Breadcrumbs’. Em seguida, simplesmente role para baixo até a seção Configurações de Breadcrumb.
A partir daqui, você pode alterar o separador, mostrar ou ocultar o link da página inicial, adicionar um prefixo e muito mais.
Ao terminar, não se esqueça de salvar suas configurações.
Método 2: Adicionar Navegação de Breadcrumb com Breadcrumb NavXT
Este método pode ser usado com qualquer outro plugin de SEO para WordPress. É fácil de usar se você tiver um tema compatível, mas se não tiver, precisará editar os arquivos do seu tema para exibir seus links de navegação de breadcrumb.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Breadcrumb NavXT. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa visitar a página Configurações » Breadcrumb NavXT para configurar as opções do plugin.
As configurações padrão devem funcionar para a maioria dos sites. No entanto, você pode personalizar as configurações conforme necessário.
A página de configurações é dividida em diferentes seções. Na aba de configurações gerais, você pode alterar o estilo e as configurações dos seus breadcrumbs.
Você também notará que esses modelos de link usam marcação Schema.org na tag de link.
A aba de tipos de postagem nas configurações do plugin permite que você configure links de breadcrumb para posts, páginas e quaisquer tipos de postagem personalizados.
Você pode escolher como deseja exibir a hierarquia dos seus posts. Por padrão, o plugin usará a hierarquia 'Título do Site > Categoria > Título do Post'.
Você pode substituir categorias por tags, datas ou o post pai e alterar o separador.
As abas Taxonomias e Diversos possuem modelos semelhantes para seus links de navegação de breadcrumb.
Não se esqueça de salvar suas alterações quando terminar.
O Breadcrumb NavXT oferece várias maneiras de exibir links de navegação de breadcrumb em seu site.
1. Exibir Navegação de Breadcrumb com Suporte ao Tema
Alguns dos temas WordPress mais populares vêm com uma opção integrada para exibir a navegação de breadcrumb, escolhendo o Breadcrumb NavXT ou seu plugin de SEO do WordPress como fonte.
Por exemplo, se você estiver usando o tema Sydney, pode ir para a página Aparência » Personalizar. Em seguida, clique no menu 'Geral' e, em seguida, clique na opção 'Breadcrumbs'.
A partir daí, você precisará escolher 'Breadcrumb NavXT' no menu suspenso 'Gerador de Breadcrumbs'.
Você também pode escolher onde deseja que seus breadcrumbs sejam exibidos selecionando uma opção na lista suspensa 'Posição'.
Se você estiver visualizando uma postagem ou página individual, verá uma prévia ao vivo de seus links de navegação de breadcrumb.
Não se esqueça de clicar no botão ‘Publicar’ para salvar suas alterações.
2. Exibir Links de Navegação com o Bloco Breadcrumb Trail
Você também pode exibir os links de navegação de breadcrumbs usando o bloco Breadcrumb Trail.
Basta acessar seu editor de conteúdo do WordPress e, em seguida, adicionar o bloco Breadcrumb Trail onde você deseja exibir os links de navegação.
Em seguida, você pode atualizar ou publicar seu conteúdo.
Depois disso, visite seu site para ver os links de navegação em ação.
3. Adicionando Navegação de Breadcrumbs Usando um Widget
O plugin também fornece um widget que você pode usar para exibir a navegação de breadcrumbs na barra lateral ou em qualquer área pronta para widgets.
Primeiro, vá para a página Aparência » Widgets e adicione o bloco de widget 'Breadcrumb Trail' à área de widgets do seu site, como a barra lateral ou o rodapé.
As configurações padrão do widget funcionariam para a maioria dos sites, mas você pode alterá-las se necessário. Por exemplo, você pode querer ocultar o breadcrumb na página inicial.
Não se esqueça de clicar no botão 'Atualizar' para salvar as configurações do seu widget.
4. Adicionando Navegação de Breadcrumbs Usando Código
O plugin também oferece um método de código para exibir links de navegação de breadcrumbs para usuários avançados.
Primeiro, você precisa se conectar ao seu site WordPress usando um cliente FTP. Depois disso, navegue até a pasta do seu tema WordPress atual localizada dentro do diretório /wp-content/themes/.
Os temas do WordPress usam arquivos de modelo para exibir diferentes seções do seu site. Por exemplo, muitos temas usam um arquivo chamado content-single.php localizado dentro da pasta template-parts do seu tema.
Veja nossa folha de consulta para encontrar quais arquivos editar em um tema do WordPress.
Abra o arquivo de modelo para editá-lo e, em seguida, coloque o seguinte código onde você deseja exibir o rastro de navegação (breadcrumbs):
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
Não se esqueça de salvar suas alterações e enviar o arquivo de volta para o seu site.
Agora você pode visitar seu site para ver o rastro de links de navegação (breadcrumbs) em ação.
Tutorial em Vídeo
Esperamos que este artigo tenha ajudado você a aprender como exibir links de navegação (breadcrumbs) no WordPress. Você também pode querer ver nosso guia sobre como mostrar menus diferentes para usuários logados no WordPress ou como adicionar um mega menu no seu site WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Meu tema teve um problema com o recurso de breadcrumbs, ele não me permitia clicar no item do breadcrumb, apenas exibia o breadcrumb.
Eu não sei se foi codificado assim ou se foi um erro.
Mas como eu tinha o AIOSEO, usei o recurso de breadcrumbs dele e ficou fácil voltar na hierarquia do site.
O AIOSEO resolveu meu problema.
Dayo Olobayo
Obrigado por este artigo informativo. Adicionei o widget de breadcrumbs do aioseo e ele mostra automaticamente breadcrumbs para meus posts de blog. No entanto, percebo que ele exibe breadcrumbs na página inicial, o que eu não gosto. Existe alguma maneira de corrigir isso, por favor?
Além disso, percebo pela captura de tela acima que seus breadcrumbs parecem atraentes em comparação com o que eu tenho no meu blog. Existe alguma maneira de personalizá-lo?
PS: Eu uso o plugin aioseo lite.
WPBeginner Support
Dependeria do método que você usou para adicionar breadcrumbs ao seu site para saber como removê-lo especificamente da página inicial. Para nossos breadcrumbs, eles são atualmente algo que estilizamos especificamente com nosso tema.
Admin
Dayo Olobayo
Sobre as migalhas de pão aparecendo na minha página inicial, entrei em contato com o suporte da aioseo e eles me forneceram um código CSS que corrigiu o problema. Obrigado pela sua resposta.
Steven Jæger
Já tentei diferentes variantes de migalhas de pão, agora também o NavXT. As migalhas de pão aparecem e tudo parece bem.
Meu menu principal é baseado em páginas. Meus artigos são feitos como posts, eu os adiciono em categorias. É quando visito um artigo e tento usar um link na migalha de pão para voltar um passo que dá errado.
WPBeginner Support
Você pode querer salvar seus permalinks novamente para garantir que não houve um soluço lá, caso contrário, você precisaria entrar em contato com o suporte do plugin que você está usando atualmente para que o suporte dê uma olhada.
Admin
Surjeet Kumar Verma
Obrigado por compartilhar conteúdo valioso sobre migalhas de pão no WordPress. Eu realmente gosto.
WPBeginner Support
Glad our guide was helpful
Admin
Rintesh Roy
O plugin não é nada documentado. Pelo menos, eu não consegui encontrar nenhum.
WPBeginner Support
The documentation for the plugin is linked on the plugin’s page
Admin
Elizabeth Morgan
Estou usando o plugin Breadcrumb NavXT e adicionei o código que você sugeriu ao meu arquivo header.php e ele me deu este erro:
"Suas alterações no código PHP foram revertidas devido a um erro na linha 68 do arquivo wp-content/themes/generatepress/header.php. Por favor, corrija e tente salvar novamente."
erro de sintaxe, inesperado ‘<', esperando fim de arquivo"
O que eu faço sobre isso?
WPBeginner Support
Existem algumas razões possíveis, você pode querer dar uma olhada em nosso artigo aqui: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Varun
Obrigado, finalmente o problema foi resolvido
WPBeginner Support
Glad our recommendations could help
Admin
Hammad Rashid
O plugin é incrível…. Obrigado!
WPBeginner Support
Glad we could recommend it
Admin
Andres
Olá WPBeginner,
Postagem incrível.
Eu me pergunto o seguinte.
Como você faz o breadcrumb "home" (no seu caso WPBEGINNER) aparecer em blogs e posts, mas não na sua página INICIAL.
Quero dizer, quando você vai para "home" eu não vejo o breadcrumb, mas quando clico em outra página eu vejo o breadcrumb.
Muito obrigado pelo seu tempo.
Equipe Editorial
Em nosso tema, configuramos para adicionar breadcrumbs apenas em páginas singulares e não no modelo da página inicial.
Admin
Manish Ransubhe
Olá, não estou usando nenhum plugin e nunca ativei Breadcrumbs.
Por que meu resultado de busca está mostrando breadcrumbs, me ajude a desativar isso
Obrigado
Ravi Singh
O mesmo problema aconteceu comigo. Então eu verifiquei meu painel do tema e meu tema havia ativado breadcrumbs. você também pode verificar seu painel do tema para mais informações sobre isso. e eu estava usando o tema Newspaper. Então, se você também estiver usando este tema, é ele quem está criando dificuldades para você. Desative-o de lá.
Dua Centre
Eu usei o plugin seo yoast. Os breadcrumbs estão sendo exibidos nas minhas páginas da web, mas não nos resultados de pesquisa do Google. Quando eles começarão a ser exibidos nos resultados de pesquisa do Google também?
Walter
Olá! Você sabe se é possível inserir os breadcrumbs dentro do menu? Tenho que projetar um site com um menu lateral vertical, e o cliente quer ter os breadcrumbs na parte inferior do menu.
DUy
É possível alterar o tamanho e a cor da fonte do Breadcrumb?
obrigado
Sameer
Olá,
Estou usando breadcrumbs usando o método Yoast SEO, mas ele só aparece na página inicial e não aparece na Pesquisa Google.
Ex: a estrutura ideal deveria ser Domain.com>Categoria, mas está mostrando como Domain.com/Categoria. Você pode me dizer como implementar isso?
Joshua
Olá.. Estou usando o breadcrumb navxt e o widget dele está funcionando. Inseri o código no header.php usando o plugin “insert header and footer”, mas não vejo nenhuma alteração no meu site, mesmo após salvar e atualizar.
Por favor, ajude, pois a área de widgets está funcionando, mas nenhum breadcrumb está aparecendo no cabeçalho do meu site.
juan luis
Olá. Tenho medo de manipular códigos. Caso algo dê errado, posso simplesmente excluir o código inserido sem consequências?
WPBeginner Support
Olá Juan,
Se você não quiser usar o método de código, então pode tentar o método do plugin. Dessa forma, você poderá desfazer as alterações simplesmente desativando o plugin.
Admin
Nate Balcom
A propósito, estou usando o código Yoast que você tem acima e ele não exibe a hierarquia correta. Ele omite um link para categorias, projetos, galerias. Tudo o que não é um post é tratado da mesma forma. Está perto, mas não está correto.
Nate Balcom
Obrigado por postar isso. Eu estava procurando uma maneira de exibir corretamente minha trilha de breadcrumb para os spiders. Fica um pouco confuso com categorias, projetos, galerias e coisas do tipo. Eu estava codificando manualmente, mas o php lida com a hierarquia na ordem incorreta. Isso é uma grande ajuda.
Anna
Meu tema filho (GeneratePress, do download do próprio tema filho deles) não tem um arquivo header.php.
Adicionei o código no header.php do tema pai GP e os breadcrumbs estão funcionando agora. Mas quando eu atualizo o GP...?
subhan
Basta copiar o header.php para a pasta do tema filho do Generate Press.
Sunil
Obrigado pelo ótimo post. Saúde!
Raymond Chukwuman
Muito obrigado. Está realmente funcionando no meu site. Deus te abençoe
Abiodun
Segui os passos, mas não funcionou para mim com os posts. Eu só vi os 'Breadcrumbs da Página Inicial' na minha página inicial. Como faço para que apareçam nos meus posts, por favor? Estou usando Yoast SEO
WPBeginner Support
As migalhas de pão devem aparecer automaticamente. Se não aparecerem, entre em contato com o suporte do seu tema.
Admin
Abiodun
Funcionou... mas a categoria não aparece antes dos meus posts, eu só recebo Título do post de Início>>. Como faço para as categorias aparecerem antes dos posts?
Michelle
Olá! Você precisa definir uma página pai para a página que está publicando. A minha só mostrava Início > página atual até que eu defini a página atual como 'filha' da página de artigos, e a página de artigos como 'filha' da página inicial. Você pode fazer isso no editor de páginas.
ALEGRIA
Great! This is really useful! Thanks a lot!
malek
obrigado, muito útil