Como criar breadcrumbs no site e implementar dados estruturados

O que são breadcrumbs e para que servem

Breadcrumb é uma navegação secundária formada por uma sequência de níveis, do mais amplo ao mais específico. Em um blog, a trilha pode ser “Início › Insights › Como criar breadcrumbs”. Em uma empresa com áreas locais, poderia ser “Início › Serviços › Criação de sites em Betim”. O objetivo não é reproduzir cada clique feito pelo visitante, e sim representar a posição lógica da página na arquitetura do site.

A documentação do Google descreve a trilha como um indicador da posição da página na hierarquia e observa que ela pode ajudar usuários a compreender e explorar o site. A palavra importante é “hierarquia”: breadcrumbs organizam relações entre páginas, não substituem o menu principal nem funcionam como um histórico de navegação.

Quando a trilha realmente ajuda

Breadcrumbs fazem mais diferença quando o site tem três ou mais níveis, categorias claras ou muitos conteúdos semelhantes. Lojas virtuais, centrais de ajuda, catálogos de serviços e blogs extensos se beneficiam porque uma pessoa pode chegar diretamente a uma página interna pelo Google, por um link no WhatsApp ou por uma recomendação de IA.

Em um site institucional com apenas Início, Sobre e Contato, acrescentar uma trilha em todas as páginas pode ocupar espaço sem oferecer contexto relevante. A decisão deve considerar a profundidade real. Se a trilha sempre exibir apenas “Início › Página atual”, o ganho tende a ser pequeno.

Breadcrumbs não substituem uma boa arquitetura

Antes de desenhar o componente, organize o mapa do site. Cada página deve ter uma função, um nível e um pai lógico. Se “Automação comercial” aparece ora em Serviços, ora em Soluções e ora em Blog, a trilha apenas expõe uma estrutura confusa.

Comece agrupando páginas por intenção. Páginas comerciais ficam em serviços; materiais educativos, em insights; estudos de caso, em portfólio. Para um negócio de Betim que atende toda a Grande BH e também trabalha online no Brasil, páginas geográficas só devem existir quando entregarem informação específica e útil. Criar dezenas de níveis com nomes de cidades apenas para repetir palavras-chave prejudica a clareza.

Escolha uma hierarquia canônica

Uma página pode ser acessada por caminhos diferentes, mas deve ter uma posição editorial predominante. Um artigo sobre formulário de contato pode ser encontrado pela busca interna, por uma categoria de conversão ou por outro artigo. Ainda assim, sua trilha pode permanecer “Início › Insights › Formulário de contato”.

Essa consistência evita que o mesmo endereço apresente trilhas diferentes conforme a origem da visita. Também facilita gerar marcação estruturada, testar links e manter o componente. Se houver mais de uma hierarquia realmente válida, o Google aceita múltiplas trilhas na marcação, mas a complexidade adicional só vale quando representa a organização do conteúdo — não como tentativa de incluir mais termos.

Escreva rótulos curtos e compreensíveis

Use no breadcrumb o nome que uma pessoa reconheceria no menu ou no título da seção. “Serviços” comunica melhor que “Soluções digitais de alta performance para empresas”. O último item pode resumir o título longo da página, desde que continue inequívoco.

Evite usar o endereço da URL como texto, empilhar palavras-chave ou trocar o nome de uma seção apenas para a trilha. Em telas pequenas, rótulos longos quebram várias linhas e escondem o caminho. Clareza e consistência valem mais que repetição de termos.

Defina quais itens serão links

Os níveis anteriores devem levar às páginas correspondentes. “Início” aponta para a página principal; “Serviços”, para a página que apresenta todos os serviços. O último item representa a página atual e normalmente não precisa ser um link para ele mesmo.

Não crie um nível sem destino apenas para preencher a sequência. Se “Marketing” aparece entre Início e um serviço, essa categoria precisa existir e ser útil. Links quebrados ou etapas fictícias tornam a trilha frustrante e contradizem a estrutura informada aos buscadores.

Use HTML semântico e acessível

A referência do W3C recomenda colocar a trilha em um elemento nav identificado por um rótulo como “Breadcrumb” ou “Trilha de navegação”. Os itens podem formar uma lista ordenada, e a página atual deve ser indicada com aria-current="page" quando for apresentada como link ou elemento identificável.

Separadores visuais como barras e setas podem ser aplicados por CSS para não serem anunciados repetidamente por leitores de tela. A ordem do HTML deve continuar compreensível sem estilo. Isso melhora a experiência de quem usa tecnologia assistiva e mantém o componente robusto quando o CSS falha.

• Use nav com aria-label para identificar a região.
• Estruture os níveis como uma lista ordenada.
• Marque o item atual com aria-current="page".
• Mantenha foco visível e contraste suficiente nos links.
• Não dependa apenas de cor para diferenciar a página atual.

Planeje o comportamento no celular

Em telas estreitas, uma trilha com muitos níveis pode estourar o layout. A primeira solução não deve ser esconder tudo. Avalie permitir rolagem horizontal controlada, abreviar apenas rótulos intermediários ou mostrar os níveis mais relevantes mantendo a versão completa disponível para tecnologias assistivas.

Teste com zoom, fontes maiores e títulos reais, não apenas com exemplos curtos. O toque precisa ser confortável e os links não podem ficar sobrepostos. Se usar reticências para condensar níveis, elas devem abrir uma opção utilizável; texto cortado sem alternativa elimina justamente o contexto que o componente deveria oferecer.

O que é BreadcrumbList

BreadcrumbList é o tipo do Schema.org usado para descrever uma cadeia de páginas relacionadas. Cada nível costuma ser um ListItem com três informações: position, name e item. A posição reconstrói a ordem; o nome identifica o nível; o item aponta para a URL correspondente.

A marcação não substitui a trilha visível. Ela oferece uma representação legível por máquinas da mesma hierarquia apresentada ao usuário. Se o JSON-LD disser “Início › Serviços › SEO” e a página mostrar “Início › Blog › SEO”, existe uma incoerência que deve ser corrigida.

Exemplo de JSON-LD

Em uma página de serviço, a estrutura pode usar @type BreadcrumbList e um itemListElement com posições iniciadas em 1. As URLs devem ser absolutas, canônicas e públicas. O nível final pode incluir a URL da página; siga o padrão adotado no projeto e valide o resultado.

Em frameworks como Next.js, o objeto pode ser gerado no template da página e inserido como script application/ld+json. Centralizar a função reduz erros de posição e garante que breadcrumb visual e marcação recebam os mesmos dados. Ainda assim, revise a serialização para evitar injeção de conteúdo quando valores vierem de fontes editáveis.

• { "@type": "ListItem", "position": 1, "name": "Início", "item": "https://exponha.com/" }
• { "@type": "ListItem", "position": 2, "name": "Serviços", "item": "https://exponha.com/servicos" }
• { "@type": "ListItem", "position": 3, "name": "Criação de sites", "item": "https://exponha.com/servicos/criacao-de-sites" }

Mantenha o visual e os dados estruturados sincronizados

A fonte dos dados deve ser única sempre que possível. Defina uma lista com nome e URL, use-a para renderizar o HTML e transforme a mesma lista no JSON-LD. Essa estratégia evita divergências quando uma categoria muda de nome ou uma rota é redirecionada.

Não derive nomes automaticamente apenas separando palavras da URL. Slugs removem acentos, abreviam expressões e nem sempre representam o rótulo correto. Prefira dados editoriais explícitos no cadastro do artigo, serviço ou categoria.

Erros comuns que prejudicam a implementação

O primeiro erro é marcar uma trilha que não aparece na página. Outro é incluir páginas inexistentes ou URLs relativas no JSON-LD. Também são frequentes posições duplicadas, saltos na numeração, nomes vazios e uma página atual diferente da URL canônica.

No conteúdo visível, cuidado com trilhas baseadas na sessão do visitante. Se duas pessoas recebem hierarquias distintas para a mesma URL, o componente deixa de comunicar a organização estável do site. Outro problema é transformar cada palavra da trilha em oportunidade de SEO; rótulos artificiais reduzem a compreensão e não garantem destaque.

Como testar antes de publicar

Comece clicando em todos os níveis no ambiente de teste. Confirme status 200, redirecionamentos esperados, URL canônica e correspondência entre título, trilha visual e JSON-LD. Inspecione também páginas profundas, páginas sem categoria e conteúdos recém-migrados.

Depois use o teste de pesquisa aprimorada do Google para identificar propriedades ausentes ou JSON inválido. O Google recomenda corrigir erros críticos antes do lançamento. Faça também uma verificação com leitor de tela ou com a árvore de acessibilidade do navegador, além de testar teclado, zoom e diferentes larguras.

Publicação, rastreamento e monitoramento

Depois de publicar, inspecione algumas URLs no Search Console e verifique como o Google renderiza a página. A documentação orienta testar páginas acessíveis, sem bloqueio por robots.txt, noindex ou autenticação. Pode levar dias para que uma alteração seja rastreada e reprocessada.

A marcação válida torna a página elegível ao recurso, mas não obriga o Google a exibi-lo. Monitore relatórios de dados estruturados e o desempenho orgânico, porém avalie também métricas de uso: cliques nos níveis, retorno às categorias e redução de caminhos sem saída.

Um processo prático para sites existentes

Faça primeiro um inventário das páginas e identifique as que possuem profundidade suficiente. Escolha uma família — por exemplo, artigos — e implemente um componente piloto. Corrija a hierarquia, crie a página de categoria se ela realmente fizer falta e valide o comportamento com títulos longos.

Quando o padrão estiver estável, expanda para serviços, portfólio e outras áreas. Não aplique o mesmo caminho a todas as páginas por conveniência. A página institucional pode ter uma hierarquia diferente de um artigo; uma landing page de campanha, por sua vez, talvez não precise de breadcrumb se foi projetada como jornada curta e focada.

Checklist de implementação

Uma boa trilha precisa funcionar como interface antes de funcionar como marcação. Use este checklist na revisão de design, conteúdo e desenvolvimento.

• A sequência representa a hierarquia real e estável do site.
• Todos os níveis anteriores apontam para páginas úteis e públicas.
• Os rótulos são curtos, naturais e iguais aos nomes das seções.
• O componente usa nav, lista e indicação da página atual.
• O layout funciona com zoom, teclado, leitor de tela e celular.
• BreadcrumbList repete a mesma ordem e os mesmos nomes.
• As posições começam em 1 e aumentam sem duplicação.
• As URLs da marcação são absolutas e canônicas.
• O teste do Google não mostra erros críticos.
• A implantação é monitorada no Search Console.

Conclusão: comece pela estrutura, não pelo código

Breadcrumbs úteis nascem de uma arquitetura compreensível. O componente torna essa estrutura visível; o BreadcrumbList a descreve para sistemas. Nenhuma das duas camadas conserta categorias confusas, páginas duplicadas ou rotas sem função.

Escolha uma seção do site, desenhe a hierarquia canônica, implemente HTML acessível e gere o JSON-LD a partir da mesma fonte. Teste em páginas reais e publique em etapas. Esse trabalho melhora orientação e manutenção do site mesmo quando o resultado de busca não muda.