Como Adicionar Breadcrumbs no WooCommerce (Guia para Iniciantes)

Você já vagou por uma loja enorme, perdendo a noção de onde começou e como voltar ao corredor principal? Navegar em uma grande loja online pode parecer a mesma coisa.

Breadcrumbs são pequenas trilhas de navegação que mostram o caminho que você percorreu em um site, como sinais úteis que guiam os compradores pela sua loja WooCommerce.

Eles não apenas facilitam a orientação dos clientes, mas também dão aos motores de busca uma melhor compreensão da estrutura do seu site, potencialmente impulsionando seu SEO.

A boa notícia é que adicionar breadcrumbs à sua loja WooCommerce é surpreendentemente simples. Neste artigo, mostraremos alguns métodos fáceis para adicionar breadcrumbs ao WooCommerce em pouco tempo.

Por que você deve adicionar breadcrumbs ao WooCommerce?

Breadcrumbs são links de navegação que aparecem no topo das suas páginas de produto ou posts de blog. Esses links mostram aos seus visitantes como eles chegaram à página que estão visualizando no momento.

Por exemplo, se você tem uma loja WooCommerce que vende roupas, o menu de breadcrumbs pode parecer algo assim: Início » Moda Masculina » Camisas & Polo » Camisas Formais.

Habilitar breadcrumbs no WooCommerce facilita para seus clientes navegarem na sua loja online e encontrarem os produtos que procuram. Eles podem facilmente clicar nos atributos do produto ou nas categorias para ver produtos relacionados.

Os breadcrumbs também ajudam os motores de busca a entender a hierarquia e a estrutura dos links em sua loja de eCommerce. Motores de busca como o Google até os exibem nos resultados de pesquisa, o que pode aumentar sua taxa de cliques.

Dito isso, vamos ver como você pode habilitar breadcrumbs em sua loja WooCommerce. Abordaremos dois métodos, e o primeiro é recomendado para a maioria dos usuários:

• Opção 1: Adicionar Breadcrumbs WooCommerce Usando AIOSEO (Amigável para SEO)
• Opção 2: Usar Plugin de Breadcrumbs WooCommerce (Grátis e Simples)
• Frequently Asked Questions (FAQs)

Opção 1: Adicionar Breadcrumbs WooCommerce Usando AIOSEO (Amigável para SEO)

A maneira mais fácil e poderosa de adicionar breadcrumbs no WooCommerce é com o plugin All in One SEO. É o melhor plugin de SEO para WordPress que ajuda você a otimizar toda a sua loja para motores de busca.

Com apenas um clique, você pode habilitar breadcrumbs amigáveis para SEO, mas o plugin também cuida de tudo, desde sitemaps até marcação de schema, sem que você precise de nenhuma habilidade técnica.

Na WPBeginner, usamos o All in One SEO em todo o nosso portfólio de sites. É o kit de ferramentas mais completo do mercado, e é por isso que nós mudamos do Yoast alguns anos atrás.

Você também pode ler nossa análise completa do AIOSEO para mais detalhes sobre nossa experiência.

Primeiro, você precisará instalar e ativar o plugin AIOSEO em seu site. Você pode consultar nosso guia para mais detalhes sobre como instalar um plugin do WordPress.

Após a ativação, você precisará navegar até All in One SEO » Configurações Gerais e inserir sua chave de licença. Você pode encontrar a chave na área de conta do AIOSEO.

Em seguida, você precisará configurar o AIOSEO em sua loja WooCommerce usando o assistente de configuração. Se precisar de ajuda, siga nosso guia sobre como configurar o All in One SEO para WordPress.

Depois de configurar corretamente o plugin em seu site, você precisará ir para a página All in One SEO » Configurações Gerais e, em seguida, clicar na aba ‘Breadcrumbs’.

Depois disso, basta ativar o interruptor ‘Ativar Breadcrumbs’. Isso ativará o recurso de breadcrumbs em segundo plano e o AIOSEO adicionará o código apropriado (chamado schema markup) para os motores de busca.

Esta etapa ainda não torna os breadcrumbs visíveis em seu site. Nas próximas etapas, mostraremos como exibi-los para que seus clientes possam vê-los.

Em seguida, você precisará personalizar os breadcrumbs do WooCommerce. Simplesmente role para baixo e você verá as diferentes maneiras de adicionar breadcrumbs à sua loja online.

Você pode adicioná-los a qualquer página ou post manualmente usando um shortcode ou bloco, ou adicioná-los a uma área de widget. Usuários avançados também podem usar código PHP para adicionar breadcrumbs aos arquivos de modelo de seu tema.

Mostraremos como adicionar breadcrumbs aos seus produtos WooCommerce abaixo, mas primeiro, vamos dar uma olhada nas opções de personalização.

Agora, se você rolar para baixo até a seção Configurações de Breadcrumbs, verá várias configurações para personalizar seus breadcrumbs.

Por exemplo, você pode alterar o símbolo separador, habilitar o link da página inicial, adicionar um prefixo de breadcrumb, alterar o formato e muito mais. Você pode até ver uma prévia de como seus links de navegação aparecem em sua loja WooCommerce.

O AIOSEO Pro também oferece acesso a modelos de breadcrumb. Pense neles como uma 'receita' que define como sua trilha de navegação de breadcrumb é construída.

Isso permite que você crie uma estrutura diferente para suas páginas de produto, outra para suas postagens de blog e assim por diante, mantendo sua navegação clara e profissional em todo o seu site.

Não apenas isso, mas o plugin WordPress também oferece diferentes opções para personalizar o modelo.

Por exemplo, você pode desabilitar a opção 'Usar um modelo padrão' e ver mais configurações.

Existem opções para mostrar o link da página inicial, link do arquivo do tipo de postagem, link da taxonomia, adicionar tags ao modelo e selecionar se você deseja priorizar as categorias ou a taxonomia de tags.

Se você tiver categorias pai configuradas para vários produtos, também poderá personalizá-las no editor de modelos de breadcrumb.

Quando terminar, não se esqueça de salvar suas alterações.

Em seguida, você precisará adicionar breadcrumbs às suas páginas de produto WooCommerce.

O AIOSEO mostrará quatro métodos diferentes, mas a maneira mais fácil é usar um shortcode para exibir os links de navegação de breadcrumbs em sua loja online.

Tudo o que você precisa fazer é adicionar o seguinte shortcode onde você gostaria de exibir as breadcrumbs:

[aioseo_breadcrumbs]

Esta é uma ótima opção se você quiser adicionar breadcrumbs apenas a algumas páginas específicas.

Para fazer isso, basta ir em Produtos » Todos os Produtos e editar uma página de produto. Em seguida, você pode adicionar o shortcode na visualização 'Texto' do editor do WordPress e atualizar sua página.

No entanto, para a maioria dos usuários que desejam breadcrumbs em todas as páginas, recomendamos usar o método do widget de barra lateral que abordaremos a seguir, pois isso evita que você edite cada página uma por uma.

Agora você pode visitar sua página de produto para ver os links de navegação de breadcrumb em ação.

Foi assim que ficou em nosso site de teste.

Além disso, você também pode adicionar breadcrumbs à barra lateral da sua loja WooCommerce. Dessa forma, você não precisará editar cada página de produto individualmente para mostrar links de navegação, pois eles aparecerão em todo o seu site na barra lateral.

Para exibir breadcrumbs na barra lateral, você pode ir para Aparência » Widgets na sua área de administração do WordPress.

Clique no ícone de sinal de mais no canto superior esquerdo e, em seguida, pesquise por 'breadcrumbs' para encontrar o widget 'AIOSEO – Breadcrumbs'. Simplesmente arraste e solte-o na barra lateral. Você também pode inserir um título para seus links de navegação.

Assim que isso for feito, você pode clicar no botão 'Salvar'.

Em seguida, basta visualizar sua loja WooCommerce para ver os breadcrumbs na barra lateral.

Se você quiser usar outras maneiras de adicionar breadcrumbs à sua loja WooCommerce, confira nosso guia sobre como exibir links de navegação de breadcrumb no WordPress.

Como Adicionar Breadcrumbs para Múltiplas Categorias

Você tem produtos em sua loja WooCommerce que possuem múltiplas categorias?

Se sim, configurar breadcrumbs corretamente pode ser um desafio porque o WordPress não registra o caminho que um cliente percorreu para chegar à página do produto.

No entanto, AIOSEO adiciona automaticamente a primeira categoria no breadcrumb e facilita a exibição do menu de navegação correto para produtos que possuem várias categorias.

O plugin também oferece um template de breadcrumb que você pode personalizar para taxonomias do WordPress como categorias de produtos. Tudo o que você precisa fazer é ir para All in One SEO » Configurações Gerais e, em seguida, selecionar a aba ‘Breadcrumbs’.

Em seguida, role para baixo até a seção ‘Templates de Breadcrumbs’ e selecione a aba Taxonomias. Por padrão, o plugin mostrará o link do item pai no breadcrumb da sua loja WooCommerce.

Se você desativar a opção ‘Usar um template padrão’, verá que a opção ‘Mostrar link do item pai’ estará ativada. Dessa forma, você pode facilmente mostrar a categoria principal de qualquer produto em seu site.

Por exemplo, digamos que você tenha uma loja online de sapatos e um dos produtos esteja nas categorias Tênis e Sapatos Esportivos.

O AIOSEO selecionará automaticamente a primeira categoria.

Em seguida, ele exibirá isso no menu de navegação do breadcrumb.

Opção 2: Usar Plugin de Breadcrumbs WooCommerce (Grátis e Simples)

Outra maneira de habilitar breadcrumbs no WooCommerce é usando o plugin WooCommerce Breadcrumbs.

É um plugin gratuito do WordPress que permite adicionar breadcrumbs à sua loja online. O plugin é fácil de usar, mas carece dos recursos de personalização que você encontrará no AIOSEO.

Primeiro, você precisará instalar e ativar o plugin WooCommerce Breadcrumbs. Para mais detalhes, você pode consultar nosso tutorial sobre como instalar um plugin do WordPress.

Uma vez que o plugin esteja ativo, você pode ir para Configurações » WC Breadcrumbs na sua área de administração do WordPress. Depois disso, clique na caixa de seleção ‘Habilitar breadcrumbs’.

Em seguida, você pode alterar a aparência dos links de navegação que aparecerão em sua loja WooCommerce.

O plugin WooCommerce permite que você escolha o símbolo separador de breadcrumb e as tags HTML antes e depois dos seus breadcrumbs.

Agora, se você rolar para baixo, encontrará mais opções de personalização. Por exemplo, você pode alterar o texto e a URL da sua página inicial que aparecerão nos links de navegação.

Quando terminar as alterações, não se esqueça de clicar no botão 'Salvar Alterações' na parte inferior.

Perguntas Frequentes (FAQs)

Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre como adicionar breadcrumbs no WooCommerce:

Todos os temas do WordPress suportam breadcrumbs do WooCommerce?

Muitos temas modernos, especialmente aqueles criados para WooCommerce, incluem suas próprias funções de breadcrumb. No entanto, sua aparência e configurações podem ser limitadas.

Usar um plugin dedicado como o All in One SEO oferece muito mais controle e garante que suas trilhas de navegação (breadcrumbs) sejam totalmente otimizadas para mecanismos de busca, independentemente do tema que você usar.

Posso alterar o estilo e a aparência das minhas trilhas de navegação?

Sim. Um plugin como o AIOSEO permite que você altere facilmente separadores, textos, prefixos e outras opções de exibição no menu de configurações.

Para alterações visuais mais profundas, você também pode aplicar CSS personalizado para que as trilhas de navegação combinem perfeitamente com a marca e o design do seu site.

As trilhas de navegação são importantes para SEO?

Definitivamente. As trilhas de navegação criam links internos que ajudam mecanismos de busca como o Google a entender a hierarquia e a estrutura do seu site.

O Google até exibe trilhas de navegação diretamente nos resultados de pesquisa, o que pode melhorar a aparência da sua listagem e aumentar sua taxa de cliques.

Mais Dicas de WooCommerce Que Você Vai Adorar

Esperamos que este artigo tenha ajudado você a aprender como adicionar trilhas de navegação no WooCommerce. Você também pode querer ver outros guias relacionados ao WooCommerce:

• Como Fazer uma Busca Inteligente de Produtos no WooCommerce
• Como Filtrar Produtos WooCommerce (Tutorial Passo a Passo)
• Como Alterar o Título da Página da Loja WooCommerce (Rápido e Fácil)
• Como Habilitar a Busca por SKU de Produto no WooCommerce
• Como Adicionar Tags, Atributos e Categorias de Produtos ao WooCommerce
• Como Encontrar o ID do Produto no WooCommerce (Guia para Iniciantes)
• Como Adicionar Schema GTIN, ISBN e MPN no WordPress
• Como Corrigir a Busca de Produtos do WooCommerce Que Não Está Funcionando

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.