O que é pão ralado

Você entenderá o que são breadcrumbs, por que eles ajudam tanto os visitantes quanto o Google, como eles melhoram seu SEO, os diferentes tipos que você pode usar e os passos simples para adicioná-los ao seu site.

O que são migalhas de pão?

Os breadcrumbs são links de navegação que mostram aos usuários onde eles estão no seu site. Eles aparecem no topo da página e indicam o caminho da página inicial até a página atual.

Exemplo do mundo real

Imagine que você está visitando um shopping center. O mapa indica: “Você está aqui: Entrada do Shopping → Segundo Andar → Eletrônicos → TVs”

Os breadcrumbs funcionam da mesma maneira em sites.

Como eles se parecem

Em um site de comércio eletrônico:

Home > Men's Clothing > Shirts > Casual Shirts > Blue Cotton Shirt

Em um blog:

Home > SEO Tips > Technical SEO > What is Breadcrumbs

Em um site de receitas:

Home > Recipes > Desserts > Cakes > Chocolate Cake Recipe

Cada parte é clicável. Os usuários podem retornar instantaneamente a qualquer seção anterior.

Por que as migalhas de pão são importantes

Os breadcrumbs ajudam tanto os seus visitantes quanto os mecanismos de busca.

Benefícios para visitantes

Navegação fácil Os visitantes podem retornar às categorias principais sem usar o botão "voltar". Um clique os leva exatamente para onde desejam.

Saiba a localização deles. As pessoas entendem onde estão no seu site. Isso reduz a confusão e a frustração.

Explorar conteúdo relacionado Se alguém acessa uma página de produto específica, o caminho de navegação exibe categorias relacionadas que essa pessoa pode querer explorar.

Reduzir rejeições Quando as pessoas sabem onde estão e conseguem navegar com facilidade, permanecem mais tempo e exploram mais páginas.

Benefícios para SEO

Melhor compreensão do Google O Google consegue visualizar claramente a estrutura do seu site. Ele entende como as páginas se relacionam entre si.

Trechos ricos em pesquisa O Google costuma exibir trilhas de navegação (breadcrumbs) nos resultados de pesquisa em vez do seu URL. Isso torna seu anúncio mais atraente e claro.

Exemplo nos resultados da pesquisa:

Your Site Name
Home › Products › Laptops › Gaming Laptops
Best Gaming Laptops 2026 - Top Picks...

Isso parece melhor do que:

Your Site Name
yoursite.com/products/laptops/gaming/page-123
Best Gaming Laptops 2026 - Top Picks...

Links internos Os breadcrumbs criam links internos automáticos. Isso ajuda a distribuir o valor dos links por todo o seu site.

Taxa de rejeição mais baixa Quando as pessoas conseguem navegar com facilidade, permanecem mais tempo no local. O Google percebe esse sinal positivo.

Tipos de farinha de rosca

Existem três tipos principais. A maioria dos sites usa o primeiro.

Trilha de navegação baseada em localização (mais comum)

Mostra a posição da página na estrutura do seu site.

Exemplo:

Home > Blog > SEO Tips > Technical SEO

Ideal para:

• Sites de comércio eletrônico
• Blogs com categorias
• Sites de notícias
• Qualquer site com hierarquia clara

Por que funciona? Os usuários veem exatamente onde estão e podem navegar facilmente pela hierarquia.

Breadcrumbs baseados em atributos

Exibe os atributos ou filtros selecionados pelo usuário.

Exemplo em um site de compras:

Home > Women's Shoes > Size 8 > Color: Black > Brand: Nike

Ideal para:

• Comércio eletrônico com filtros
• Sites com refinamento de pesquisa
• Catálogos de produtos

Por que funciona? Mostra como os usuários refinaram a busca. Eles podem remover os filtros clicando nos níveis da trilha de navegação.

Migalhas de pão baseadas na história

Mostra o caminho percorrido pelo usuário para chegar à página atual (como o histórico do navegador).

Exemplo:

Previous Page > Page Before That > Current Page

Ideal para: Quase nunca é recomendado. Os usuários têm o botão "voltar" do navegador para isso.

Por que evitar: Confuso porque o caminho de cada um é diferente. Não ajuda no SEO.

Como adicionar trilhas de navegação ao seu site

Para usuários do WordPress (maneira fácil)

Utilizando o plugin Yoast SEO:

1. Instale o plugin Yoast SEO (gratuito)
2. Acesse SEO → Aparência na pesquisa
3. Clique na aba "Breadcrumbs" (Migalhas de pão).
4. Ative a opção “Habilitar trilha de navegação”
5. Personalize o separador (use > ou / ou →)
6. Salvar as alterações
7. Adicione o código ao seu tema no local onde deseja que os breadcrumbs apareçam.

Código a ser adicionado ao tema:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

Utilizando o plugin Rank Math:

1. Instale o plugin Rank Math.
2. Acesse Rank Math → Configurações Gerais
3. Clique na aba "Breadcrumbs" (Migalhas de pão).
4. Ativar trilha de navegação
5. Escolha o estilo do separador
6. Personalize a aparência
7. Adicione o código curto onde você deseja que os breadcrumbs sejam exibidos:

Utilizando o plugin Breadcrumb NavXT:

1. Instalar Breadcrumb NavXT
2. Acesse Configurações → Navegação por trilha de navegação XT
3. Definir configurações de exibição
4. Selecione o separador
5. Adicionar código ao tema: <?php bcn_display(); ?>

Para sites HTML (método manual)

Adicione este código onde você deseja que os breadcrumbs apareçam (geralmente após o cabeçalho, antes do conteúdo principal):

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li><a href="/category/subcategory">Subcategory</a></li>
    <li>Current Page</li>
  </ol>
</nav>

Com estilo básico:

<style>
  nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 10px 0;
    margin: 0;
  }
  
  nav[aria-label="Breadcrumb"] li {
    display: inline;
    font-size: 14px;
  }
  
  nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
    content: " > ";
    padding: 0 8px;
  }
  
  nav[aria-label="Breadcrumb"] a {
    color: #0066cc;
    text-decoration: none;
  }
  
  nav[aria-label="Breadcrumb"] a:hover {
    text-decoration: underline;
  }
</style>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptops">Laptops</a></li>
    <li>Gaming Laptops</li>
  </ol>
</nav>

Para Shopify

Utilizando as configurações do tema:

1. A maioria dos temas da Shopify inclui trilhas de navegação (breadcrumbs) por padrão.
2. Acesse a Loja Online → Temas
3. Clique em Personalizar
4. Procure as configurações de trilha de navegação nas opções do tema.
5. Habilite e personalize conforme necessário.

Se o seu tema não tiver trilha de navegação (breadcrumbs):

1. Editar código do tema
2. Adicione o código de trilha de navegação ao arquivo product.liquid ou collection.liquid.
3. Use o snippet de breadcrumb do Shopify

Para Wix

1. O Wix não possui um recurso integrado de trilha de navegação (breadcrumbs).
2. Você precisa adicionar manualmente usando elementos de texto.
3. Ou utilize aplicativos de terceiros para navegação por trilhas (breadcrumbs) disponíveis no Wix App Market.
4. Conecte-os com a vinculação adequada.

Marcação de esquema para trilhas de navegação

Marcação de esquema Ajuda o Google a entender e exibir seus breadcrumbs nos resultados da pesquisa.

O que é Schema?

O Schema é um código que informa ao Google exatamente o que seus breadcrumbs significam. Ele aumenta as chances de os breadcrumbs aparecerem nos resultados de pesquisa.

Como adicionar um esquema de trilha de navegação

Formato JSON-LD (Recomendado):

Adicione este código à sua página. <head> seção ou antes </body>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://yoursite.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://yoursite.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Laptops",
      "item": "https://yoursite.com/products/laptops"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Gaming Laptops"
    }
  ]
}
</script>

Anotações importantes:

• Cada nível precisa de um número de posição.
• Inclua o URL completo de cada item.
• O último item (página atual) não precisa de um URL com "item".
• Os números das posições começam em 1.

Testando seu esquema

Use o Teste de Resultados Avançados do Google:

1. Acesse: search.google.com/test/rich-results
2. Insira o URL da sua página
3. Clique em “Testar URL”
4. Verifique se o esquema de trilha de navegação foi detectado.
5. Corrija quaisquer erros exibidos.

Usando o Search Console:

1. Acesse o Google Search Console
2. Clique em “Aprimoramentos”
3. Procure a seção “Migalhas de pão”
4. Verifique se há erros ou avisos.
5. Corrija os problemas e solicite uma nova indexação.

Melhores Práticas

Siga estas regras para que a farinha de rosca funcione da melhor forma.

Design e Posicionamento

Onde colocá-los

• Na parte superior da página, abaixo do cabeçalho.
• Título da página acima
• Fácil de identificar, mas não distrai.

Dicas de estilo

• Mantenha a fonte menor que o conteúdo principal.
• Use cores suaves (não muito vibrantes).
• Torne os links claramente clicáveis.
• Use separadores comuns: > / → •

Má localização:

• Parte inferior da página (ninguém verá)
• Misturado com menu de navegação (confuso)
• No rodapé (anula o propósito)

Regras de conteúdo

Mantenha-o curto

• Não faça migalhas de pão muito compridas.
• Se houver mais de 5 níveis, considere simplificar a estrutura do site.
• Migalhas de pão longas sobrecarregam os usuários

Use rótulos transparentes

• “Home”, não “Homepage” ou “Principal”.
• Use os nomes reais das categorias.
• Evite abreviações
• Combine os rótulos do menu de navegação

Página Atual

• Exibir a página atual nos caminhos de navegação
• Mas faça com que não seja clicável.
• Estilize de forma diferente (mais escuro ou sem sublinhado)

Regras técnicas

Comece sempre pela casa.

✓ Good: Home > Category > Page
✗ Bad: Category > Page

Faça os links funcionarem

• Todos os elementos da navegação (exceto a página atual) devem ser clicáveis.
• Os links devem direcionar para as páginas corretas.
• Teste todos os links

Use separadores consistentes

• Escolha um separador (>, /, →)
• Use em todos os lugares
• Não misture separadores diferentes.

móvel amigável

• O recurso de trilha de navegação deve funcionar em celulares.
• Faça-os grandes o suficiente para bater.
• Considere ocultar os níveis intermediários em dispositivos móveis se forem muito longos.

Erros comuns a evitar

Erro 1: Tornar tudo clicável

Errado:

Home > Category > Subcategory > Current Page

(onde “Página Atual” também é um link)

Direita:

Home > Category > Subcategory > Current Page

(onde “Página Atual” é um texto simples, não um link)

Por que: As pessoas já estão na página atual. Clicar nela apenas recarregaria a mesma página.

Erro 2: Os breadcrumbs não correspondem ao URL

URL: yoursite.com/shop/mens/shoes/sneakers/nike-air

Migalhas de pão erradas:

Home > All Products > Nike Air

Migalhas de pão certas:

Home > Shop > Men's > Shoes > Sneakers > Nike Air

Por que: Os breadcrumbs devem refletir a estrutura real do site e o caminho da URL.

Erro 3: Muitos níveis

Errado:

Home > Shop > All > Men > Clothing > Tops > Shirts > Casual > Cotton > Blue > Size M > Product

Direita:

Home > Men's Clothing > Shirts > Blue Cotton Shirt

Por que: Muitos níveis confundem os usuários. Simplifique a estrutura do seu site.

Erro 4: Ausência de marcação de esquema

Faltando: Apenas trilhas de navegação HTML sem código de esquema.

Por que isso é ruim: O Google pode não exibir seus rastros de navegação nos resultados de pesquisa. Você perde oportunidades de aparecer em anúncios melhores.

Correção: Adicione sempre o código de marcação do esquema.

Erro 5: Botão Início duplicado

Errado: Ter um link "Início" na navegação principal E nos caminhos de navegação, um ao lado do outro.

Direita: Isso não tem problema. Mas certifique-se de que tanto a funcionalidade quanto a aparência estejam intencionalmente posicionadas.

Erro 6: Estilo inconsistente

Errado:

• Algumas páginas: Início / Categoria / Página
• Outras páginas: Início > Categoria > Página

Direita: Escolha um estilo e use-o em todo o seu site.

Quando NÃO usar farinha de rosca

Os breadcrumbs não são adequados para todos os sites.

Ignorar a opção de passar o pão se:

Locais de um único nível Se o seu site tiver apenas uma página inicial e algumas páginas (como um portfólio simples ou uma página de destino), os breadcrumbs são desnecessários.

Exemplo:

Home
About
Contact
Services

Aqui não precisa de migalhas de pão.

Jornada linear do usuário Se os usuários precisarem seguir um caminho específico (como um processo de finalização de compra ou um formulário com várias etapas), os breadcrumbs podem confundi-los.

Sites muito pequenos Se você tiver menos de 10 páginas no total, os breadcrumbs não agregam valor.

Estrutura do terreno plano Se todas as suas páginas estiverem no mesmo nível (sem categorias ou hierarquia), os breadcrumbs não fazem sentido.