Breadcrumbs: Regras de Hierarquia e Schema

Breadcrumbs são um trilho ordenado de links que mostra onde a página atual se situa na arquitetura da informação do site, ou IA: o sistema de relações pai, filho e irmão que organiza o conteúdo. Eles permitem que um leitor navegue para níveis superiores sem recomeçar pela navegação principal, enquanto fornecem aos rastreadores e sistemas de resposta um relato explícito e legível por máquina da mesma hierarquia.

Esse trilho renderizado é intencionalmente literal. Ele identifica três ancestrais reais, nomeia a página atual e linka apenas para níveis superiores. Não insere “Navegação SEO” ou outra frase simplesmente porque esse texto poderia atrair buscas.

Por que este elemento é importante

Leitores chegam a páginas profundas a partir de resultados de busca, links compartilhados, e-mail e respostas de IA. Muitas vezes não se lembram da rota que os menus do site esperam que sigam. Um breadcrumb resolve essa incerteza em um olhar: “Estou lendo uma página de elemento dentro do playbook de SEO, e posso retornar a qualquer uma das coleções.” Esse contexto reduz o custo de explorar um site sem forçar o leitor a abrir um menu, editar uma URL ou usar o botão Voltar.

A psicologia é sobre orientação, não decoração. Um trilho claro dá ao leitor uma noção estável de lugar e uma rota de fuga óbvia. Isso é mais importante em sites grandes, onde títulos de página semelhantes podem viver em seções diferentes — por exemplo, uma categoria de produto chamada “Analytics” e uma seção de documentação com o mesmo nome. Os ancestrais desambiguam a página antes que o leitor interprete seus detalhes.

As máquinas precisam da mesma relação expressa sem depender de espaçamento visual ou chevrons. A extraibilidade por máquina significa que o software pode recuperar o significado e a ordem de uma unidade a partir do HTML ou dos dados estruturados. Um <nav> semântico, uma lista ordenada, links comuns, aria-current e dados BreadcrumbList correspondentes expõem uma sequência de entidades com posições explícitas. Uma fileira de elementos <span> estilizados pode parecer idêntica, mas não fornece um marco de navegação confiável nem ordem de lista.

O trilho visível e a saída estruturada devem contar uma única história. Se a página está visivelmente sob “Elementos” mas o schema chama “Ferramentas SEO” de seu pai, um sistema recebe duas hierarquias concorrentes. Essa inconsistência é pior do que omitir o schema, pois torna as relações de entidade do site menos confiáveis.

Siga as regras de redação de elementos ao escolher este componente. A regra de precedência se aplica aqui: se o propósito de uma passagem é comunicar hierarquia e navegação para níveis superiores, use o elemento tipificado de breadcrumbs. Não o imite com texto livre, um subtítulo separado por barras ou palavras-chave linkadas.

Quando usar

Use breadcrumbs quando uma página pertence a uma hierarquia estável com pelo menos um pai significativo além da página inicial. Grandes sites editoriais, catálogos de e-commerce, bibliotecas de documentação, estruturas de área de serviço, diretórios e sites de produto com múltiplos níveis se beneficiam mais, pois os visitantes comumente entram abaixo do nível superior.

Use-os consistentemente em toda uma seção. Um trilho que aparece em apenas algumas páginas de produto faz os leitores se perguntarem se as páginas ausentes pertencem a outro lugar, e torna a interpretação automatizada dependente de acidentes de template. O modelo de conteúdo ou a rota deve fornecer a hierarquia; os autores não devem reconstruí-la independentemente em cada página.

Não use breadcrumbs quando não há hierarquia a expressar. Uma campanha de página única, um site raso onde todas as páginas estão diretamente sob Início, ou um estado temporário de aplicação podem não ganhar nenhuma rota útil com eles. Adicionar “Início › Página atual” a cada página rasa pode criar ruído visual sem revelar novo contexto.

Situações comuns de quase-acerto incluem:

• Um trilho de histórico do navegador. “Busca › Produto › Carrinho” registra uma sessão, não uma hierarquia de conteúdo. Visitantes diferentes receberiam pais diferentes para a mesma página, então a relação não é canônica.
• Um caminho de palavras-chave. “Melhor CRM › CRM Barato › CRM para startups” pode colocar frases-alvo em vista, mas fabrica ancestrais que podem não existir como páginas navegáveis. Os rótulos dos breadcrumbs nomeiam nós reais; não são uma tag de título extra.
• Um trilho de filtros. “Sapatos › Azul › Tamanho 39” descreve facetas selecionadas. Pertence aos controles de filtro, a menos que cada etapa seja uma página de destino estável, indexável e com uma relação parental intencional.
• Um indicador de progresso. “Detalhes › Pagamento › Confirmação” comunica etapas de uma transação. Precisa de semântica de passo e estado, não de marcação BreadcrumbList.
• Um sumário. Links de seção movem-se dentro do documento atual; breadcrumbs movem-se entre documentos na hierarquia do site.
• Uma cadeia de tags. Tags descrevem tópicos muitos-para-muitos, enquanto breadcrumbs exigem um caminho primário ordenado. Uma página pode ter várias tags, mas não deve expor vários pais concorrentes em um único trilho.

Quando uma página aparece legitimamente em várias coleções, escolha uma hierarquia canônica primária para o breadcrumb. Preserve outras rotas de descoberta por meio de links contextuais ou páginas de coleção. Múltiplos trilhos de breadcrumb forçam o leitor e o consumidor do schema a decidir qual pai é autoritativo.

Onde posicionar

A orientação funciona apenas quando chega antes que a página exija interpretação, portanto posicione o trilho após o cabeçalho global do site e antes do H1 ou conteúdo hero da página. Deve ser a primeira região de navegação específica da página. Mantenha a mesma posição nos layouts desktop e mobile, mesmo que o trilho se ajuste de forma diferente.

Não coloque breadcrumbs ao lado de um sumário, barra de ferramentas compartilhada, chips de categoria, controles de conta ou um selo promocional. Esses elementos respondem a perguntas diferentes e fazem a linha estreita de orientação parecer uma barra de ferramentas de uso geral. Não coloque um anúncio ou chamada para ação inline entre o trilho e o H1. Se o hero contiver ambos, empilhe o breadcrumb acima do título e separe o conteúdo promocional abaixo do texto introdutório.

Anatomia

1. Marco de navegação: um <nav> com o nome acessível “Breadcrumb” distingue este trilho da navegação global e local.
2. Lista ordenada: a ordem carrega significado do ancestral mais amplo até a página atual, portanto <ol> é obrigatório mesmo que os marcadores de lista sejam visualmente removidos.
3. Itens ancestrais: cada ancestral usa seu rótulo legível canônico e um link rastreável para a página pai real.
4. Separador: um chevron ou barra separa os itens visualmente. É decorativo e oculto da tecnologia assistiva.
5. Item atual: o item final nomeia a página atual, não tem link e usa aria-current="page".
6. Relação com o documento: o trilho fica acima do H1. A captura de tela identifica esta posição, mas o posicionamento é controlado pelo template, não pelo texto do autor.

Exemplos de design

Variantes mudam a densidade e o comportamento responsivo, nunca a hierarquia subjacente.

Padrão: mostre o trilho completo quando dois a cinco itens concisos couberem. Esta é a variante preferida porque nenhum contexto é ocultado.

Caminho longo: permita um trilho de seis ou sete itens apenas quando cada nível representa um ancestral navegável genuíno. Quebre nos limites dos itens; nunca encolha o texto até ficar difícil de ler.

Colapsado em mobile: quando o trilho real não pode quebrar de forma aceitável, preserve Início, o pai imediato e a página atual. Um controle de reticências focalizável pode revelar ancestrais intermediários ocultos. O caminho completo deve permanecer no DOM ou tornar-se disponível através desse controle, e os dados estruturados devem reter cada item real.

Hero escuro: cores e indicadores de foco se adaptam ao fundo, mas rótulos, ordem, comportamento de links e nome acessível permanecem idênticos ao padrão.

Parâmetros

O elemento é uma lista estruturada porque arrays paralelos de rótulos e URLs são fáceis de desalinhar. A ordem dos itens é a hierarquia, e os mesmos itens alimentam tanto o HTML visível quanto o schema.

O primeiro título não tem mapeamento neste elemento. Breadcrumbs são um marco de navegação, não uma seção de conteúdo com título, e colocar um título em um item criaria uma falsa hierarquia de documento. O item final omite url na origem por padrão; um renderizador pode usar a URL canônica da página para a saída BreadcrumbList sem transformar o item atual visível em um auto-link.

Dois itens significam um ancestral mais a página atual. Cinco é o limite superior normal. Sete é um máximo absoluto porque trilhos mais profundos tornam-se difíceis de escanear e geralmente revelam um problema de arquitetura da informação que deve ser corrigido na origem, e não ocultado por estilização.

Sintaxe e exemplos de código

O nome do componente canônico é breadcrumbs. Sua ordem de itens deve vir dos dados de hierarquia revisados do site, mesmo quando os exemplos mostram valores inline.

Diretiva Markdown portátil

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="Início" url="/"}
::item{label="Playbook de SEO" url="/seo-playbook/"}
::item{label="Elementos" url="/seo-playbook/elements/"}
::item{label="Breadcrumbs" current=true}
:::

Shortcode Hugo

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Início" url="/" />}}
  {{< breadcrumb-item label="Playbook de SEO" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elementos" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Breadcrumbs" current="true" />}}
{{< /breadcrumbs >}}

Este é o contrato do adaptador portátil, não uma instrução para adicionar um novo shortcode a este repositório. Uma implementação Hugo deve normalmente derivar os itens da ancestralidade da página e dos metadados da seção, para que um editor não possa publicar um trilho que discorde do roteamento.

Bloco WordPress

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Início","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Playbook de SEO","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elementos","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Breadcrumbs","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress deve popular o bloco a partir da cadeia pai primária da página e das URLs canônicas. Substituições manuais requerem revisão editorial porque, de outra forma, alterar um rótulo pode fazer com que navegação, schema e arquitetura do site entrem em desacordo.

Exemplos

Bom: uma hierarquia real e navegável

Início › Documentação › Auditorias › Auditoria de atualidade

Isso é bom quando Documentação, Auditorias e Auditoria de atualidade são páginas canônicas reais nessa ordem pai–filho. Cada ancestral prevê seu destino, e o rótulo atual é conciso o suficiente para confirmar a localização sem repetir o H1 inteiro.

Ruim: palavras-chave fingindo ser hierarquia

Início › Melhor Ferramenta SEO com IA › Plataforma de Visibilidade com IA Acessível › Breadcrumbs

Isso é ruim quando os dois rótulos intermediários não são páginas pai reais. O trilho faz promessas que seus links não podem cumprir, repete frases promocionais em vez de nomear seções e cria uma cadeia de entidades falsa para rastreadores. Substitua pelo menor caminho ancestral real. Se os conceitos desejados merecem páginas, crie e integre essas páginas na arquitetura da informação primeiro; não pré-visualize uma arquitetura imaginária em breadcrumbs.

Marcação schema e acessibilidade

Breadcrumbs podem alimentar o BreadcrumbList do Schema.org, uma lista ordenada cujas entradas são objetos ListItem. Use valores de position inteiros baseados em 1 e mantenha name e item alinhados com o rótulo visível e o destino canônico. Gere JSON-LD e HTML a partir de um único objeto de dados para que uma renomeação, movimentação ou alteração canônica atualize ambas as saídas juntas.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Início","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"Playbook de SEO","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"Elementos","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumbs","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

O schema descreve a hierarquia visível; não autoriza um segundo caminho otimizado. Não inclua redirecionamentos, parâmetros de rastreamento, variantes não canônicas de protocolo ou host, resultados de busca no site, estados de sessão ou categorias de palavras-chave ocultas. Não publique dois objetos BreadcrumbList para duas taxonomias possíveis. Selecione o caminho primário no modelo de conteúdo e use-o em todos os lugares.

A acessibilidade começa com <nav aria-label="Breadcrumb"> e uma lista ordenada. O rótulo acessível distingue esta região de navegação sem exigir um título visível. Oculte separadores decorativos com aria-hidden="true" ou crie-os em CSS para que leitores de tela não anunciem “maior que” entre cada item. Marque apenas o item final com aria-current="page" e não o link para ele mesmo.

Cada link ancestral precisa de um indicador de foco visível e um alvo grande o suficiente para ser ativado em uma tela sensível ao toque. Trilhos longos devem quebrar ou colapsar através de um controle operável por teclado; rolagem horizontal que oculta a posição atual não é um padrão aceitável. O truncamento pode encurtar um rótulo visual apenas quando o nome acessível completo permanece disponível e o texto encurtado ainda é distinguível. Nunca dependa apenas da cor para separar ancestrais linkados do item atual.

Regras de redação

Rótulos de breadcrumbs são nomes de localização, portanto escreva-os como navegação, não como mini-manchetes. Use o nome oficial mais curto e inequívoco de cada seção ou página. “Documentação” funciona melhor que “Explore toda a documentação do produto”, porque o destino fornece o contexto e o trilho precisa permanecer escaneável.

• Use de uma a seis palavras e no máximo 60 caracteres por rótulo. Rótulos curtos tornam a hierarquia visível antes da quebra de linha; não são permissão para abreviar termos não familiares.
• Use normalmente de dois a cinco itens, incluindo a página atual. Permita seis ou sete apenas quando cada nível for estruturalmente necessário.
• Ordene os itens do ancestral mais amplo até a página atual. Nunca inverta o trilho ou coloque um irmão na sequência.
• Use letras minúsculas com capitalização apenas na primeira palavra, a menos que uma marca, produto ou acrônimo tenha uma grafia aprovada.
• Mantenha os rótulos estáveis entre páginas. O mesmo pai não pode ser “Docs” em um trilho e “Documentação” em outro, a menos que o sistema de navegação mude globalmente.
• Faça os rótulos ancestrais corresponderem ou refletirem de perto o nome visível do destino. Um rótulo de navegação conciso é aceitável; um alvo de palavra-chave diferente não é.
• Nomeie a página atual de forma concisa. Pode encurtar um H1 longo, mas ainda deve identificar o mesmo documento.
• Use um tom neutro. Breadcrumbs orientam; não vendem, parabenizam, advertem ou instruem.

Nunca coloque chamadas para ação, preços, status de estoque, datas, nomes de autores, pontuações de avaliações, emojis, ícones com significado independente, alegações promocionais, códigos de rastreamento ou parâmetros de consulta dentro de um rótulo de breadcrumb. Nunca adicione “Voltar”, “Anterior” ou “Próximo” como um item, pois esses controles expressam histórico ou sequência, não ancestralidade. Separadores pertencem à apresentação do renderizador e não fazem parte de nenhum rótulo.

Tipos de postagem que o utilizam

O frontmatter postTypes registra as junções suportadas. A tabela converte essas junções em regras de uso e posicionamento; não é uma afirmação de que toda instância precisa de um trilho escrito manualmente.

“Geralmente” significa usar o elemento quando o site tem o pai estável nomeado e omiti-lo em uma implementação genuinamente rasa, em vez de inventar um nível extra. “Sempre” pressupõe que a estrutura aninhada indicada existe. Os templates devem ser responsáveis pela renderização; o tipo de postagem define a origem esperada da hierarquia e as exceções editoriais.

Checklist de QA

• Hierarquia real: Cada ancestral é um pai real e intencional na arquitetura da informação primária do site, não uma palavra-chave, tag, filtro ou visita anterior.
• Posição correta: O trilho aparece após o cabeçalho global e antes do H1, sem promoção ou barra de ferramentas não relacionada inserida entre eles.
• Um trilho: A página expõe um breadcrumb visível e um BreadcrumbList correspondente, não caminhos concorrentes.
• Ordem completa: Os itens vão do ancestral mais amplo até a página atual, sem nível estrutural ausente ou irmão adicionado.
• Links canônicos: Cada ancestral resolve diretamente para sua URL canônica e indexável, sem parâmetros de rastreamento ou redirecionamentos evitáveis.
• Estado atual: O último item visível nomeia a página atual, não tem link e possui aria-current="page".
• Rótulos concisos: Cada rótulo usa o nome oficial mais curto e inequívoco, segue capitalização de frase e permanece dentro do limite editorial.
• HTML semântico: O componente usa um marco de navegação identificado e lista ordenada; não é uma fileira de spans genéricos.
• Separadores decorativos: Separadores estão ocultos da tecnologia assistiva e não aparecem dentro de nomes de links acessíveis.
• Comportamento responsivo: A posição atual permanece disponível em telas estreitas; quebra de linha, divulgação, ordem de foco e alvos de toque funcionam sem conteúdo horizontal oculto.
• Paridade de schema: Nomes, URLs canônicas, ordem, contagem de itens e posições do BreadcrumbList correspondem em substância à hierarquia visível completa.
• Fonte única de dados: HTML e JSON-LD são gerados a partir da mesma hierarquia revisada, em vez de mantidos como cópias separadas.
• Paridade portátil: As representações Markdown, Hugo e WordPress preservam ordem idêntica de itens, rótulos, destinos e estado atual.
• Status das capturas de tela: Comentários de captura permanecem como instruções não renderizáveis até que ativos reais existam; nenhuma captura de tela inexistente é referenciada como imagem.

FAQ

O template academy renderiza as cinco perguntas revisadas armazenadas no frontmatter. Elas cobrem caminhos de URL, o item atual, dados estruturados, páginas de filtro instáveis e limites práticos de profundidade.