Breadcrumbs: tudo que você precisa saber sobre navegação estrutural

Ter uma estratégia de SEO mais otimizada e gerar volume de páginas é um dos objetivos do breadcrumb. Organizando as informações no seu site, essa técnica é uma ótima alternativa para proporcionar aos visitantes uma melhor experiência de navegação.

Você se lembra da história de João e Maria, na qual eles usam migalhas de pão para não se perder nos caminhos dentro da floresta? A estratégia do breadcrumb — nome que faz alusão à história — tem por objetivo oferecer essa ferramenta para que o usuário tenha a melhor experiência de navegação, sem ficar perdido dentro do seu site.

Se você já usava a internet no início dos anos 2000, talvez esse recurso pareça um tanto fora de moda. O que vamos explicar neste artigo, é justamente como ele pode ser usado a favor do SEO, do UX (experiência do usuário) e pode ser ajuda nas compras em um e-commerce. Veja quais são os principais erros e as melhores práticas ao implementar breadcrumbs no seu site. Boa leitura!

O que são breadcrumbs?

O termo breadcrumbs surgiu em alusão ao conto de fadas dos irmãos Grimm. Também conhecido por navegação estrutural pelos profissionais da área de TI, esse é um recurso que serve de orientação para o visitante. Assim, a pessoa tem uma rica experiência do usuário, pois pode navegar com a facilidade de entender em que parte do site está e como descobrir mais sobre o que está vendo.

Enquanto na história de João e Maria, os passarinhos comem as migalhas de pão que marcavam o caminho, deixando as crianças perdidas no meio da floresta, os breadcrumbs são semelhantes às luzes mágicas dos contos celtas (na animação da Pixar, Valente, você pode conferir essa imagem). Em geral esse rastreamento aparece no formato de texto, no topo da página (logo abaixo do banner e menu do site). Estes termos costumam ser separados pelo sinal > (maior que).

Por exemplo:

• Histórias infantis;
• Histórias infantis > Contos de fadas;
• Histórias infantis > Contos de fadas > Irmãos Grimm;
• Histórias infantis > Contos de fadas > Irmãos Grimm > João e Maria.

É importante entender que esse recurso não ajuda apenas o usuário, como também ajuda na organização das suas informações, compreendendo melhor o que você já tem (sejam conteúdos ou produtos) e como a sua persona interage com cada sessão. Além disso, o breadcrumb otimiza na sua estratégia de SEO, como você verá mais à frente.

Quais são os tipos de breadcrumbs?

As classificações de breadcrumbs variam de acordo com a forma que você escolher para montar as categorizações da navegação estrutural. Imagine que um restaurante passe a oferecer um cardápio online para almoço e lanches. Qual seria a melhor forma de organizar todos os pratos e bebidas oferecidos? Se você pensou que as combinações são praticamente infinitas, acertou!

Contudo, existem 3 maneiras de organizar os breadcrumbs que são mais comuns. Confira a seguir!

Breadcrumbs de localização

Para explicar como funciona a categorização desse tipo de breadcrumb, vamos usar o formato de guardar arquivos em um computador como exemplo. Para que isso aconteça, os arquivos são organizados dentro pastas, correto? Assim, para que você acesse o arquivo desejado, precisa saber sua localização. Da mesma forma acontece com o breadcrumb.

Excelente para as estratégias de marketing digital de e-commerces, os breadcrumbs ajudam o consumidor a pesquisar produtos similares. No exemplo do restaurante que oferece um cardápio online, a organização poderia ser:

Restaurante > cardápio > lanche > sanduíches > X-Tudo.

Breadcrumbs de atributo

Nesse caso, a ideia é focar mais em características que podem ser atribuídas à página. Por exemplo, em vez de destacar em qual sessão o usuário se encontra, o breadcrumb de atributo terá como base apontar para um determinado tópico, assunto (atributo). Ainda pensando no restaurante, uma das opções de breadcrumbs de atributo:

Restaurante > lanches até 10 reais > X-Tudo.

Breadcrumbs de Caminho

Mais fiel ao nome, essa modalidade de breadcrumb é, ao mesmo tempo, menos usada. Ela registra todos os passos do usuário dentro do site (quase como se fosse uma estrutura para apresentar as opções do botão voltar). Isso significa que cada navegação resultará em um breadcrumb diferente e aleatório como:

X-Tudo > cardápio > lanche > bebidas.

Por que breadcrumbs são importantes para o SEO?

Sim, os breadcrumbs podem influenciar sua estratégia de tráfego orgânico. Para conseguir estar nos primeiros resultados do Google, você provavelmente investe na produção de muito conteúdo de qualidade. Acontece que para o robô do Google, não só a relevância e qualidade do seu conteúdo importa, a maneira como você organiza tudo também.

Além disso, o breadcrumb deve conter a palavra-chave que se pretende rankear. Assim, o termo aparece mais vezes e cria links relevantes, melhorando o posicionamento das páginas e do domínio em uma visão geral.

Ainda pensando no SEO (otimização para mecanismos de busca) os breadcrumbs contam com 2 contribuições para os visitantes do seu site.

1. Regra dos 3 cliques — como o objetivo é trazer respostas relevantes e uma navegação eficiente, parte-se do pressuposto de que o usuário precisa estar a até 3 cliques de todo o conteúdo que se encontra no seu site.
2. Velocidade de carregamento — por ser leve, o breadcrumb não influenciará nesse importante quesito (tanto para que a sua página esteja de acordo com os requisitos do algoritmo do Google, quanto para atender a uma expectativa do usuário).

Como esse recurso contribui para as estratégias de marketing digital?

As principais vantagens de implementar breadcrumbs no seu site são:

• Usabilidade — facilitando a navegação dos seus visitantes de forma agradável, intuitiva e eficiente;
• Objetividade — mostrando para o usuário em que parte do site ele se encontra e oferecendo uma forma dele se mover pelo site sem a necessidade de cliques adicionais e cumprindo com a regra dos 3 cliques;
• Hierarquia da informação clara;
• Leveza — não pesa no código, evitando aumentar o tempo de carregamento da página, o que seria bastante negativo;
• SEO — contribui para a organização da página dentro do site e melhora o posicionamento para mecanismos de busca;
• Design — o layout é agradável e não interfere negativamente o usuário.

Quando usar breadcrumbs?

Apesar dessa técnica ser tão relevante, existe uma constante que faz com que o breadcrumb se torne um recurso fundamental para o site: volume. Por um lado, e-commerces e lojas virtuais contam com uma quantidade muito grande de produtos e pode ser difícil para o usuário se localizar no meio de tantas informações.

Além disso, nesse caso, o breadcrumb ainda atua como facilitador do processo de compra, ajudando o consumidor a encontrar e comparar produtos dentro de uma categoria.

Já o outro caso em que existem muitas subcategorias e os breadcrumbs também facilitam a navegação é quando você decide investir em estratégias de conteúdo. Essa prática gera um grande volume de páginas e a organização por categorias contribui para o SEO e para a navegação do leitor.

O que evitar ao implementar essa estratégia?

Como você percebeu, o uso de breadcrumbs é bem relevante, contribuindo para que as suas páginas a estejam no topo das buscas orgânicas. A outra boa notícia sobre isso é que a implementação deste recurso pode ser considerada simples. Mesmo assim, é essencial ter atenção para que uma estratégia inicialmente positiva não impacte negativamente na estrutura de navegação.

Veja alguns pontos que devem ser observados.

Criar um efeito duplicado

Às vezes alguns recursos da própria navegação se assemelham aos breadcrumbs. Sendo assim, ao colocar o recurso, ele se mostra como que duplicado, dificultando para o usuário entender qual é a função de cada um dos recursos e como se orientar e navegar pelo site.

Usar como navegação primária

Ao contrário do caso anterior, existem alguns sites que suprimem o menu por ter o breadcrumb. Essa também é uma prática ruim, pois é o menu de navegação que facilita até mesmo visualizar a estrutura de navegação do site.

Implementar sem uma categorização clara

Voltando no exemplo do restaurante, imagine que no cardápio tem um prato, espaguete na chapa, que é oferecido tanto no almoço, quanto nos lanches. Pode ser que surja a dúvida sobre como organizar essa página dentro do breadcrumb. Quando existem situações assim, talvez o ideal seja deixar a estratégia de lado. É importante ter clareza sobre as categorias de cada página.

Quais são as melhores práticas usando breadcrumbs?

Se você decide adotar essa estratégia, é importante observar alguns detalhes como:

• Não colocar link no termo da página de destino, pois se o usuário clicar, ele voltará para o mesmo lugar de navegação;
• Produzir um layout de acordo com a identidade visual do site, cuidando para que o breadcrumb não fique muito chamativo, ao mesmo tempo, que seja intuitiva sua função;
• Assegurar de que os breadcrumbs são responsivos, se adaptando também em dispositivos móveis;
• ter separadores entre os termos, como o sinal > (maior que).

Viu como os breadcrumbs ajudam a sua persona a navegar pelo site, oferecendo uma experiência intuitiva e eficiente? Além disso, essa estratégia contribui para a autoridade do domínio e o destaque das páginas nos resultados de busca, colaborando para que você consiga um bom trabalho de SEO. Tenha atenção sobre o que evitar, inclua as boas práticas e alcance bons resultados com esse recurso!

Se você gostou deste texto e quer conferir os melhores conteúdos para fazer um marketing digital de performance, assine a nossa newsletter e receba dicas e segredos para impulsionar as suas estratégias!