Migalhas de pão Ícone de marcador simples

Breadcrumbs são auxílios de navegação em um site que permitem que os usuários acompanhem o caminho desde a página inicial até a página atual que estão visualizando.

Última atualização 13 de novembro de 2023
Design de cabeçalho de rodapé em gradiente de roxo para branco

A navegação no site é crucial para a forma como você e seus usuários se movimentam pelo site. Para pular de uma página para outra e refazer seus passos, você precisa de um sistema de navegação sólido. É aí que entra em cena o breadcrumbs, um auxílio à navegação.

Saiba tudo sobre a definição de breadcrumbs, seus benefícios e como usá-los agora!

O que é farinha de rosca?

Migalhas de pão são um auxílio à navegação que permite que os usuários acompanhem sua posição em um site. Ele inclui uma série de frases de texto âncora que apontam para as páginas clicadas anteriormente ou para as páginas pai da página atual.

Para que serve a farinha de rosca?

Os Breadcrumbs são úteis para sites com uma arquitetura de site profunda, pois há muitas páginas para acompanhar e percorrer. Os Breadcrumbs são úteis para muitas finalidades, mas as duas principais são:

  1. Organização
  2. Navegação

Ao criar o seu site, você deve pensar em como os usuários e os rastreadores de mecanismos de pesquisa acessarão cada página e como cada página se relaciona. A criação de páginas pai facilita a exibição de conexões entre as páginas e a criação de conteúdo para a seção apropriada.

No entanto, o ponto principal dos breadcrumbs no design da Web é a navegação. Os usuários podem acessar os breadcrumbs e voltar uma página, ou podem ver como as páginas se relacionam com a página inicial. É muito mais fácil do que começar do zero e passar por todas as páginas novamente.

Por exemplo, se o caminho for "Produtos > Calçados > Masculinos > Tênis", eles podem voltar e encontrar calçados femininos, ou mudar o estilo de tênis para sandálias. Eles não precisam voltar à página inicial - podem usar os breadcrumbs para ver como as páginas se relacionam e navegar pelo site.

Por que usar breadcrumbs no design da Web?

Os breadcrumbs são um método essencial para a navegação no site. Embora existam muitas outras maneiras de construir seu site, os breadcrumbs oferecem os seguintes benefícios:

Incentivar a navegação

O uso de breadcrumbs informa aos usuários onde encontrar informações e os leva a outras páginas do seu site. Esse benefício reduz as taxas de rejeição e mantém as pessoas em seu site.

Aparecer nos resultados de pesquisa

Insights de especialistas Logotipo do Google

"Recomendamos o uso da marcação de dados estruturados de migalhas de pão ao exibir migalhas de pão."

Central de pesquisa do Google

O Google incluirá informações de breadcrumb nas páginas de resultados dos mecanismos de pesquisa (SERPs). À medida que os usuários navegam pelos resultados, eles podem ver sua página e suas categorias e ficar mais inclinados a clicar:Breadcrumbs em SERPs

É por isso que o mecanismo de pesquisa recomenda o uso da marcação estruturada de breadcrumb.

Bom para a experiência do usuário (UX)

Os usuários não querem procurar páginas ou se perder no seu site. Torná-lo mais fácil de navegar mostrará às pessoas que você se preocupa com a experiência delas e criará confiança.

Melhorar a rastreabilidade e a indexação

Os breadcrumbs também beneficiam as táticas de otimização de mecanismos de pesquisa (SEO). Conectar suas páginas com um sistema de migalhas de pão pode ajudar os mecanismos de pesquisa a indexar suas páginas e rastrear seu site.

Novamente, esses benefícios são mais bem obtidos em um site mais complexo, com muitas páginas. Se você acha que ainda não precisa de breadcrumbs, talvez seja melhor tentar outros métodos de navegação.

Dicas para usar a navegação em breadcrumb

Portanto, agora que já falamos sobre o que são breadcrumbs, é hora de investigar como você pode usá-los de forma eficaz. Aqui estão quatro dicas para usar a navegação por breadcrumbs em seu site:

  1. Use separadores claros
  2. Preste atenção ao tamanho e à cor da fonte
  3. Mostrar o caminho inteiro
  4. Tornar a farinha de rosca visível

Saiba mais sobre cada um deles abaixo.

1. Use separadores claros

Ao adicionar breadcrumbs ao seu site, certifique-se de fazer uma separação clara entre cada categoria de página. Aqui está um exemplo da Ulta:

Exemplo de separador de migalhas de pão

The slashes and spacing indicate the different pages and make it easier for users to backtrack and click. Slashes and less-than signs (<) are the most common choices for separators between pages.

2. Preste atenção ao tamanho e à cor da fonte

O tamanho e a cor da fonte são importantes para captar a atenção do público sem distraí-lo do restante da página. Como os breadcrumbs são apenas uma ferramenta, eles não devem ser o foco da página, mas ainda assim devem ser fáceis de encontrar.

Aqui está um exemplo da Trader Joe's, que usa letras vermelhas e cinza para combinar com sua marca:

Exemplo de cor de localização geográfica

Como os breadcrumbs geralmente ficam na parte superior da página, como neste exemplo, eles devem ser fáceis de ver sem ocupar muito espaço.

3. Mostrar o caminho inteiro

O fato de os breadcrumbs mostrarem todo o caminho das páginas é o que os diferencia de outros tipos de navegação. Certifique-se de incluir todas as páginas, inclusive a página inicial, como neste exemplo da Caterpillar:

Exemplo de caminho de navegação

No mínimo, essa etapa mostra ao usuário como ele navegou até onde está a partir da página inicial. Mesmo que o usuário não retorne à página inicial, o fato de ter essa opção apresentada a ele pode ser útil.

4. Tornar a farinha de rosca visível

Como em nossa segunda dica, certifique-se de que os breadcrumbs estejam visíveis na página. Os usuários não querem procurar por muito tempo uma maneira de navegar - eles desistirão rapidamente. Adicioná-los à parte superior da página é a opção mais segura para a maioria dos sites.

Breadcrumbs e seu site - E agora?

Os Breadcrumbs são uma excelente estratégia para aumentar e desenvolver ainda mais seu site. Com as táticas e dicas acima em mente, você pode começar a criar seu site e causar um impacto nas vendas e em outras métricas.

Acima de tudo, não deixe de considerar seu site, orçamento e público-alvo antes de adotar qualquer método. Se precisar de orientação, sinta-se à vontade para entrar em contato conosco para conversar sobre web design, SEO e tópicos relacionados.

Não falhe no teste mais importante do seu site

Obtenha um scorecard de SEO de seu site gratuitamente em menos de 30 segundos.