Breadcrumbs são um daqueles elementos de interface que parecem insignificantes até você entender o quanto o Google os valoriza. Eles aparecem no topo de páginas de produtos e categorias (Home → Mulheres → Vestidos → Vestidos de Verão) e ajudam usuários a entender onde estão na hierarquia do site. Esse é o benefício de experiência do usuário. O benefício de SEO é ainda maior: breadcrumbs criam links internos que transferem autoridade por todo seu site, e quando marcados com dados estruturados, aparecem diretamente nos resultados de busca do Google como trechos ricos.
Um resultado de busca com breadcrumbs se destaca. Em vez de mostrar uma URL simples (exemplo.com/products/12345), o Google mostra o caminho completo de breadcrumbs (Loja Exemplo → Mulheres → Vestidos). Usuários veem o contexto antes de clicar. O resultado parece mais autorizado, recebe mais cliques, e sinaliza ao Google que seu site tem uma hierarquia clara que vale a pena destacar.
Mas breadcrumbs só desbloqueiam esses benefícios se implementados corretamente: links HTML reais (não apenas estilo visual), marcação de dados estruturados (JSON-LD), e alinhamento com sua estrutura de navegação principal. Muitas lojas adicionam breadcrumbs como elemento de design sem adicionar a marcação, e perdem completamente o valor de SEO.
- Breadcrumbs criam links internos de produtos para categorias, transferindo autoridade para cima.
- Dados estruturados (JSON-LD BreadcrumbList) dizem ao Google para mostrar breadcrumbs em resultados de busca.
- Trilhas de breadcrumbs devem corresponder à sua estrutura de URL e hierarquia de navegação principal.
- Teste com a Rich Results Test do Google e monitore a Search Console para erros.
Por que breadcrumbs importam para SEO
Breadcrumbs servem três funções de SEO:
1. Arquitetura de links internos
Cada breadcrumb é um conjunto de links internos. Uma página de produto com o breadcrumb “Home → Mulheres → Vestidos → Produto” contém três links internos: um para a página inicial, um para Mulheres, um para Vestidos.
Esses links transferem autoridade de link da página de produto de volta para as páginas de categoria. Se a página de produto receber backlinks externos (um blog resenha o produto e link direto para ele), parte dessa autoridade flui de volta para as páginas de categoria via links de breadcrumb. Esse é o inverso do fluxo normal de navegação (página inicial → categoria → produto). Breadcrumbs criam um fluxo bidirecional.
Breadcrumbs também dão ao Google múltiplos caminhos para descobrir páginas. O Google pode seguir breadcrumbs para cima (de produto para categoria para página inicial) e para baixo (de página inicial para categoria para produto), melhorando a eficiência de rastreamento e reduzindo a chance de páginas ficarem órfãs.
2. Sinais de hierarquia do site
Breadcrumbs explicitamente dizem ao Google como seu site está organizado. A trilha “Home → Mulheres → Vestidos → Vestidos de Verão” diz ao Google que Vestidos de Verão é uma subcategoria de Vestidos, que é uma subcategoria de Mulheres, que é uma categoria de nível superior.
O Google usa essa hierarquia para entender quais páginas são hubs (categorias linkadas por muitos breadcrumbs) e quais páginas são folhas (produtos individuais). Páginas hub são consideradas mais importantes e são rastreadas com mais frequência.
Sem breadcrumbs, o Google tem que inferir hierarquia de estrutura de URL, padrões de links internos, e menus de navegação. Breadcrumbs deixam a hierarquia explícita, reduzindo ambiguidade.
3. Resultados ricos em busca
Quando você adiciona marcação de dados estruturados para breadcrumbs, o Google pode exibi-los diretamente em resultados de busca. Em vez de uma URL simples, usuários veem a trilha completa de breadcrumbs.
Exemplo de resultado de busca sem breadcrumbs:
exemplo.com › products › 12345-summer-dress
Exemplo de resultado de busca com breadcrumbs:
Loja Exemplo › Mulheres › Vestidos › Vestidos de Verão
O segundo resultado é mais informativo e mais clicável. Usuários veem o contexto de categoria antes de visitar a página. Isso melhora a taxa de clique (CTR), e CTR mais alta é um sinal de ranking positivo para o Google.
Como implementar breadcrumbs: estrutura HTML
Breadcrumbs devem ser links HTML reais, não apenas texto estilizado. Cada nível da trilha de breadcrumbs deve ser uma tag de âncora apontando para a página de categoria apropriada.
Estrutura HTML básica
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/collections/women">Mulheres</a></li>
<li><a href="/collections/dresses">Vestidos</a></li>
<li><a href="/collections/summer-dresses">Vestidos de Verão</a></li>
</ol>
</nav>
Elementos-chave:
<nav aria-label="Breadcrumb">: O wrapper é um elemento nav com um rótulo ARIA para que leitores de tela o anunciem como trilha de breadcrumbs (não apenas navegação genérica).<ol>: Uma lista ordenada, porque breadcrumbs são uma sequência (ordem importa).<a href="...">: Tags de âncora reais com URLs reais. Cada nível de breadcrumbs é clicável e rastreável.
O último item (a página atual) pode ser um link ou texto simples. O Google aceita ambos. Alguns guias de UX recomendam torná-lo texto simples (já que clicar nele não faz nada — você já está nessa página), enquanto outros recomendam mantê-lo como link por consistência. Ambos funcionam para SEO.
Estilo CSS
Breadcrumbs são tipicamente estilizados como uma lista horizontal inline com separadores (/ ou › ou >) entre itens. Os separadores podem ser adicionados com pseudo-elementos CSS:
nav[aria-label="Breadcrumb"] ol {
list-style: none;
display: flex;
gap: 8px;
font-size: 14px;
color: #666;
}
nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
content: "›";
margin-left: 8px;
color: #999;
}
Os separadores são apenas visuais — não fazem parte da estrutura HTML. O Google os ignora.
Como adicionar marcação de dados estruturados
Breadcrumbs HTML criam links internos e melhoram a experiência do usuário. Marcação de dados estruturados diz ao Google que esses links representam uma trilha de breadcrumbs e devem ser exibidos como resultados ricos.
O Google oferece suporte a marcação de schema BreadcrumbList em formato JSON-LD. Esse é uma tag de script contendo dados JSON que descrevem a estrutura de breadcrumbs.
Exemplo JSON-LD BreadcrumbList
Adicione esse script na <head> ou fim da <body> em cada página que tenha breadcrumbs (páginas de produtos, páginas de categorias, páginas de artigos):
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://exemplo.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Mulheres",
"item": "https://exemplo.com/collections/women"
},
{
"@type": "ListItem",
"position": 3,
"name": "Vestidos",
"item": "https://exemplo.com/collections/dresses"
},
{
"@type": "ListItem",
"position": 4,
"name": "Vestidos de Verão",
"item": "https://exemplo.com/collections/summer-dresses"
}
]
}
</script>
Campos-chave
@contexte@type: Declarações padrão de schema.org. Esses dizem ao Google que esse é um BreadcrumbList.itemListElement: Um array de itens de breadcrumbs, em ordem da página inicial até a página atual.position: A ordem de cada item (1 para página inicial, 2 para primeira categoria, 3 para subcategoria, etc.).name: O texto visível do breadcrumb (o que usuários veem).item: A URL completa da página (deve ser absoluta, iniciando comhttps://).
O último item (a página atual) deve incluir o campo item. Documentação antiga do Google sugeria omiti-lo, mas a prática atual recomenda incluí-lo para todos os itens.
Erros comuns em schema de breadcrumbs
Erro 1: URLs relativas em vez de URLs absolutas
O Google requer URLs absolutas em dados estruturados. Isso falha na validação:
"item": "/collections/women"
Isso passa:
"item": "https://exemplo.com/collections/women"
Se seu tema Shopify usa Liquid para gerar marcação de breadcrumbs, certifique-se de usar o filtro url com absolute_url:
"item": ""
Erro 2: HTML e JSON-LD desencontrados
Os breadcrumbs HTML e a marcação JSON-LD devem descrever a mesma trilha. Se o HTML mostra “Home → Mulheres → Vestidos” mas o JSON-LD mostra “Home → Roupas → Vestidos,” o Google pode ignorar a marcação ou sinalizá-la como erro.
Isso acontece quando temas geram breadcrumbs dinamicamente baseado em estrutura de URL mas codificam a marcação JSON-LD. Sempre gere ambos da mesma fonte de dados.
Erro 3: Incluir links que não são breadcrumbs
Alguns temas incluem o título da página atual na trilha de breadcrumbs, mesmo que não seja um link navegável:
<li>Produto: Vestido de Algodão de Verão</li>
Isso é adequado para HTML (fornece contexto aos usuários), mas o item JSON-LD correspondente ainda deve representar uma página de categoria ou seção, não o produto em si. O último item deve ser a categoria pai:
{
"position": 3,
"name": "Vestidos",
"item": "https://exemplo.com/collections/dresses"
}
Se você incluir o produto como item final de breadcrumb, certifique-se de que tenha uma URL real:
{
"position": 4,
"name": "Vestido de Algodão de Verão",
"item": "https://exemplo.com/products/summer-cotton-dress"
}
Erro 4: Breadcrumbs que não correspondem à navegação
Se sua navegação principal tem uma categoria chamada “Roupas para Mulheres” mas seus breadcrumbs mostram “Mulheres,” o Google pode ficar confuso se essas são a mesma categoria.
Use nomenclatura consistente entre navegação, breadcrumbs e URLs. Se a navegação diz “Roupas para Mulheres,” o breadcrumb também deve dizer. Se a URL é /collections/womens-clothing, o nome da categoria em dados estruturados deve corresponder.
Como testar marcação de breadcrumbs
Google Rich Results Test
O Google fornece uma ferramenta gratuita para validar dados estruturados: a Rich Results Test (procure por “Google Rich Results Test” e digite sua URL).
A ferramenta rastreia sua página, extrai dados estruturados, e mostra se é válido. Para breadcrumbs, deve mostrar:
- “BreadcrumbList” detectado
- Número de itens
- Nome e URL de cada item
Se a ferramenta mostrar erros (“Campo obrigatório ausente: item” ou “URL inválida”), corrija-os antes de fazer deploy.
Verificação manual de View Source
Abra sua página de produto ou categoria em um navegador, View Source (Ctrl+U / Cmd+Option+U), e procure por BreadcrumbList. Você deve ver o script JSON-LD com todos os itens de breadcrumbs listados.
Verifique:
- Todas as URLs são absolutas (iniciam com
https://). - A trilha de breadcrumbs corresponde aos breadcrumbs HTML visíveis na página.
- Os valores de
positionsão sequenciais (1, 2, 3, …).
Google Search Console
Depois de fazer deploy da marcação de breadcrumbs, verifique Google Search Console → Enhancements → Breadcrumb. Esse relatório mostra:
- Quantas páginas têm marcação de breadcrumbs válida
- Quantas páginas têm erros ou avisos
- Quais erros específicos o Google encontrou
O Google pode levar alguns dias para rastrear suas páginas e preencher esse relatório. Se erros aparecerem, clique nos detalhes do erro para ver quais páginas são afetadas e qual é a mensagem de erro.
Breadcrumbs e estrutura de URL
Breadcrumbs funcionam melhor quando se alinham com sua estrutura de URL. Se a URL de um produto é:
https://exemplo.com/collections/women/products/summer-dress
O breadcrumb deve refletir esse caminho:
Home → Mulheres → Vestido de Verão
Se a URL não corresponde à trilha de breadcrumbs (a URL diz /collections/women mas o breadcrumb mostra “Roupas → Mulheres”), usuários e mecanismos de busca recebem sinais conflitantes sobre a hierarquia do site.
Para lojas Shopify, isso pode ser complicado. URLs de produtos Shopify são planas por padrão:
https://exemplo.com/products/summer-dress
Não há categoria na URL. O produto pode aparecer em múltiplas coleções (Mulheres, Vestidos, Promoção de Verão), então não há uma única trilha de breadcrumbs canônica.
Soluções:
1. Escolha uma coleção primária. Se um produto pertence a múltiplas coleções, designe uma como primária. Use essa coleção para breadcrumbs. Temas Shopify frequentemente fazem isso verificando qual coleção o usuário veio (via HTTP referrer), mas isso não funciona para usuários que chegam diretamente na página de produto de resultados de busca.
2. Use parâmetros de URL. Alguns temas adicionam um parâmetro de coleção às URLs de produto: /products/summer-dress?collection=women. O breadcrumb pode então ser gerado desse parâmetro.
3. Use URLs de produtos baseadas em coleção do Shopify. No admin Shopify, você pode habilitar URLs de produtos baseadas em coleção: Settings → General → Product URL format. Isso muda URLs de produtos para /collections/women/products/summer-dress. A coleção agora faz parte da URL, tornando a geração de breadcrumbs simples.
Breadcrumbs para navegação facetada
Navegação facetada (filtrar páginas de categoria por atributos como tamanho, cor, marca) cria breadcrumbs dinâmicos que refletem o estado de filtro atual:
Home → Mulheres → Vestidos → Tamanho: Médio → Cor: Azul
Essas seleções de filtro devem aparecer em dados estruturados de breadcrumbs?
Orientação do Google: breadcrumbs devem representar a hierarquia do site, não estado de filtro temporário. Os dados estruturados devem mostrar:
Home → Mulheres → Vestidos
Os breadcrumbs HTML podem mostrar a trilha completa incluindo filtros (para experiência do usuário), mas o JSON-LD deve omitir os filtros. Filtros não são URLs estáveis (mudam com cada interação do usuário), e não representam uma hierarquia navegável.
Exceção: se combinações de filtro são promovidas como páginas de categoria standalone (ex., uma coleção “Vestidos Azuis para Mulheres” com sua própria URL e conteúdo), essa é uma categoria real e deve aparecer em breadcrumbs.
Como breadcrumbs interagem com navegação principal
Breadcrumbs não substituem navegação principal — eles a complementam. A navegação principal (menu de header) fornece categorias de nível superior e acesso rápido a seções-chave. Breadcrumbs fornecem contexto hierárquico e navegação para cima de páginas profundas.
Os dois devem estar alinhados:
- Se sua navegação principal tem uma categoria “Mulheres,” breadcrumbs em páginas de produtos sob essa categoria devem incluir “Mulheres.”
- Se sua navegação principal usa “Roupas para Homens” como rótulo, breadcrumbs devem usar “Roupas para Homens,” não “Homens.”
Nomenclatura inconsistente confunde usuários (“‘Mulheres’ é o mesmo que ‘Roupas para Mulheres’?”) e dilui sinais de SEO (o Google vê dois rótulos diferentes para a mesma categoria e tem que inferir que são a mesma).
Verificação rápida de implementaçãoAbra uma página de produto na sua loja. View Source e procure por "BreadcrumbList." Se nada aparecer, você não tem dados estruturados de breadcrumbs. Adicione — a marcação leva 10 minutos para implementar e pode melhorar taxas de clique em dias.
Breadcrumbs como ferramenta de eficiência de rastreamento
Além de resultados ricos e links internos, breadcrumbs ajudam o Google a rastrear seu site com mais eficiência. Quando o Google rastreia uma página de produto, extrai todos os links, incluindo links de breadcrumbs. Se o breadcrumb inclui três links (Home, Mulheres, Vestidos), o Google agora tem três URLs adicionais para rastrear.
Para lojas grandes, isso importa. O Google aloca um orçamento de rastreamento finito — não vai rastrear cada página todos os dias. Páginas que são linkadas com mais frequência (de mais páginas) são rastreadas com mais frequência. Categorias que aparecem em breadcrumbs em centenas de páginas de produtos são rastreadas com muito mais frequência do que categorias linkadas apenas na navegação principal.
Isso é especialmente importante para produtos com pouco estoque ou sazonais. Se um produto fica fora de estoque, você quer que o Google rastreie a página de categoria rapidamente para atualizar resultados de busca. Links de breadcrumb de páginas de produtos para páginas de categoria aumentam a probabilidade de que o Google rastreie a página de categoria em horas ou dias, não semanas.
Implementando breadcrumbs em Shopify
A maioria dos temas Shopify modernos inclui suporte a breadcrumbs, mas nem todos incluem marcação de dados estruturados. Verifique a documentação do seu tema ou inspecione o código de breadcrumb nos arquivos Liquid do seu tema.
Se seu tema não incluir marcação JSON-LD, você pode adicioná-la manualmente. No arquivo theme.liquid do seu tema (ou em um snippet incluído em páginas de produtos e coleções), adicione um script como esse:
{% if template contains 'product' %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
}
{% if collection %}
,{
"@type": "ListItem",
"position": 2,
"name": "{{ collection.title | escape }}",
"item": "{{ collection.url | absolute_url }}"
}
{% endif %}
,{
"@type": "ListItem",
"position": {% if collection %}3{% else %}2{% endif %},
"name": "{{ product.title | escape }}",
"item": "{{ product.url | absolute_url }}"
}
]
}
</script>
{% endif %}
Isso gera marcação de breadcrumbs para páginas de produtos. Adapte para páginas de coleções substituindo product por collection e ajustando a trilha de breadcrumbs adequadamente.
Para lojas usando apps como Navi+ AI Menu Builder, marcação de breadcrumbs é frequentemente manipulada automaticamente como parte do pacote de navegação — verifique as configurações ou documentação do seu app.
Breadcrumbs são uma das implementações de dados estruturados com maior ROI que você pode fazer. A marcação é simples, as ferramentas de validação são gratuitas, e o impacto (resultados ricos, links internos, eficiência de rastreamento) é imediato. Se sua loja não tem breadcrumbs ainda, adicione. Se tem breadcrumbs mas sem dados estruturados, adicione o JSON-LD. O esforço incremental é baixo, e o benefício de SEO se compõe ao longo do tempo.
This article is part of the larger guide on SEO de navegação: garantindo que o Google consiga rastrear sua estrutura de menu.