Uma trilha de navegação (breadcrumb) ajuda a responder “onde estou?” e oferece caminhos para subir na hierarquia. Use-a quando a arquitetura tiver níveis úteis — por exemplo, Início → Serviços → Lojas virtuais → Manutenção. Não transforme uma sequência de links visitados em hierarquia se ela não representa a estrutura do site.
Marque os níveis e a página atual
Os níveis anteriores são links; o último indica a página aberta e pode ser texto sem link. Dê à navegação um nome que não se confunda com o menu principal e use lista ordenada para comunicar a sequência:
<nav aria-label="Trilha de navegação">
<ol>
<li><a href="/">Início</a></li>
<li><a href="/servicos/">Serviços</a></li>
<li><a href="/servicos/lojas-virtuais/">Lojas virtuais</a></li>
<li aria-current="page">Manutenção</li>
</ol>
</nav>Se a página atual for um link por necessidade de navegação, use aria-current="page" nele. Separe visualmente os itens, mas não dependa apenas de cor para diferenciar o atual. Em celular, permita que a trilha se ajuste sem ocultar nomes essenciais nem transbordar a janela.
Faça a trilha corresponder à estrutura
- Escolha um caminho representativo que ajude a entender a localização, desde uma categoria até a página; ele não precisa repetir cada segmento do endereço.
- Confirme que cada link abre o nível indicado e que o último nome bate com o título da página.
- Confira uma página profunda, uma página de hub e uma página sem categoria. Não invente pai para preencher espaço; se não houver caminho útil, omita a trilha.
- Percorra os links por teclado e leitor de tela; verifique landmark identificado, lista na ordem correta, página atual anunciada e separadores não anunciados como conteúdo repetido.
Quando usar dados estruturados
A marcação visual e o BreadcrumbList JSON-LD são relacionados, mas cumprem funções diferentes. Se adicionar dados estruturados, represente a mesma hierarquia visível e use pelo menos dois ListItem em ordem. O último item pode omitir item; cada item anterior precisa de posição, nome e URL. Exemplo abreviado:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Início", "item": "https://exemplo.com/" },
{ "@type": "ListItem", "position": 2, "name": "Serviços", "item": "https://exemplo.com/servicos/" },
{ "@type": "ListItem", "position": 3, "name": "Lojas virtuais" }
]
}Use seu domínio real e teste na ferramenta de resultados avançados e no URL Inspection depois de publicar. Dados estruturados qualificam a informação para recursos compatíveis, mas não garantem que o Google mostre a trilha em cada resultado.
Fontes: Padrão de Breadcrumb — W3C WAI e BreadcrumbList — Google Search Central. Consulte institucionais.