O que é breadcrumb em um site? Gerador de marcação e schema | We.Inc
O que é a navegação breadcrumb, o padrão HTML acessível com aria-current, as regras de BreadcrumbList do Google e um gerador que escreve os dois para você.
Um breadcrumb é a pequena trilha de links perto do topo de uma página, como Início > Calçados > Tênis de corrida, que mostra onde a página fica no site. Os visitantes a usam para voltar um nível. Marcado com dados estruturados BreadcrumbList, ele também ajuda o Google a entender a hierarquia do seu site.
Os três tipos de breadcrumb
Tipo
Exemplo
Ideal para
Localização (hierarquia)
Início > Calçados > Tênis de corrida
Lojas, blogs e a maioria dos sites
Atributo
Calçados > Tamanho 9 > Azul
Mostrar os filtros escolhidos em uma lista de produtos
Caminho (histórico)
As páginas pelas quais este visitante clicou
Raramente útil; o botão voltar do navegador já faz isso
O nome vem da trilha de migalhas do conto de fadas. Em um site, ele é um menu secundário, então nunca substitui a navegação principal. Abaixo você encontra o padrão HTML acessível do W3C, os dados estruturados que o Google lê e um gerador que escreve os dois a partir da sua própria trilha.
Digite a sua trilha no gerador, um nível por linha, da página inicial até a página atual.
Adicione o endereço completo depois de cada nome, separado por uma barra vertical. A última linha pode ficar sem ele.
Copie o HTML para o template da sua página e o JSON-LD para o head da página.
Teste a página com o Teste de pesquisa aprimorada do Google antes de aplicar no site inteiro.
Mostre a trilha do lugar da página no site, não o caminho que o visitante fez.
Faça de cada item um link, exceto a página atual, que leva aria-current="page".
Mantenha o breadcrumb visível e os dados estruturados idênticos, para que a marcação descreva o que as pessoas realmente veem.
Desenhe os separadores com CSS, como faz o exemplo do W3C, para que os leitores de tela não leiam uma fileira de setas.
Em telas pequenas, deixe a trilha quebrar em duas linhas em vez de rolar para o lado.
Perguntas frequentes
Breadcrumbs ajudam no SEO?
A documentação de breadcrumbs do Google diz que ele usa a marcação de breadcrumb no corpo de uma página para categorizar as informações dela. Eles também dão aos rastreadores mais links internos subindo na hierarquia. Sozinhos, não são um atalho de ranking.
O que o Google exige em um BreadcrumbList?
Um array itemListElement com pelo menos dois itens ListItem. Cada um precisa de um name, uma position começando em 1 e um item com a URL da página. O último item pode ficar sem item, e nesse caso o Google usa a URL da página em que ele está.
O breadcrumb deve incluir a página atual?
O padrão do W3C a inclui como o último link, marcado com aria-current definido como page. Muitos sites a mostram como texto simples. Os dois funcionam, desde que quem usa leitor de tela consiga saber qual item é o atual.
Que elemento deve envolver um breadcrumb?
Um elemento nav com um rótulo como aria-label="Breadcrumb", e uma lista ordenada dentro dele. O exemplo do W3C usa exatamente isso, porque a ordem dos links tem significado.
Uma página pode ter mais de uma trilha de breadcrumb?
Sim. A página do Google mostra um exemplo com dois itens BreadcrumbList para uma página acessível por duas categorias. Mostre as duas trilhas também aos visitantes, para que a marcação corresponda à página.
Marcação de breadcrumb acessível
O padrão das WAI-ARIA Authoring Practices tem três requisitos: colocar a trilha em um landmark de navegação, rotular esse landmark com aria-label ou aria-labelledby e definir aria-current como page no link da página atual. O MDN descreve o valor page de aria-current como o link para o documento atual em um breadcrumb.
O exemplo do W3C estrutura os links como uma lista ordenada e desenha os separadores com bordas CSS, para que as tecnologias assistivas anunciem apenas os nomes das páginas.
Dados estruturados que correspondem
O Schema.org explica que a propriedade position é usada para reconstruir a ordem dos itens, com os números menores primeiro. Comece em 1 no topo da trilha, geralmente a sua página inicial ou uma categoria principal.
O JSON-LD, um bloco de dados estruturados em uma tag script, é o formato mais fácil de adicionar porque fica separado do seu HTML visível. O gerador abaixo o escreve a partir da mesma lista que monta a trilha visível.
Estilo dos separadores
Este CSS desenha uma pequena seta antes de cada item, menos o primeiro, para que os separadores nunca apareçam no texto que um leitor de tela anuncia.
Breadcrumb com separadores em CSS
Edite os nomes para testar. As setas vêm da regra ::before, não de caracteres no HTML.
Gerador de breadcrumb
Sua trilha, um nível por linha: Nome | endereço completo
Prévia
HTML
Dados estruturados JSON-LD
Copiar
Copiado
O Google pede pelo menos dois itens em um BreadcrumbList. Adicione mais um nível.
A linha {n} não tem endereço. Só o último item pode ficar sem ele.
Montado no seu navegador a partir do que você digita. Nada é enviado.