Você já se perdeu em um site? Ou não fazia ideia de como voltar para uma página em que você estava? Isso é mais comum do que parece, principalmente em sites mal estruturados.
Felizmente, é para evitar que isso aconteça que existe a navegação estrutural ou, simplesmente, breadcrumbs.
Neste post, vamos entender mais sobre esse conceito, os diferentes tipos de breadcrumbs e por que isso é tão importante. Acompanhe!
O que são breadcrumbs?
Normalmente, a navegação estrutural é um caminho de texto exibido no topo da página próximo ao menu do site.
Dependendo do tipo de breadcrumb, ela pode mostrar aos usuários como a página em que estão é categorizada ou o caminho que eles percorreram para encontrá-la.
Por exemplo: veja como é a navegação por breadcrumb no site da livraria Saraiva:
A navegação estrutural é chamada de “navegação secundária”. Quando usados de forma adequada, os breadcrumbs são valiosos tanto para os visitantes do site quanto para os mecanismos de pesquisa.
Para os usuários, eles ajudam na navegação e podem facilitar a localização de conteúdos no site e a orientá-los sobre a seção em que eles se encontram e como retornar aonde estavam.
Para os mecanismos de pesquisa, os breadcrumbs informam como seu site está estruturado.
Se você busca fornecer uma melhor experiência para os usuários que visitam seu site – e garantir que elas não se percam – os breadcrumbs são fundamentais.
Aqui estão três opções de navegação de breadcrumb:
- Breadcrumbs de hierarquia;
- Breadcrumbs de caminho;
- Breadcrumbs de atributos.
Breadcrumbs de hierarquia
Quase todos os artigos que você encontra sobre este assunto começam com os breadcrumbs de hierarquia (também chamados de “breadcrumbs de localização”).
Isso porque essa é a opção mais comum, principalmente para sites que possuem uma arquitetura complexa, com mais de dois níveis.
Essa opção de navegação segue a arquitetura, ou “hierarquia”, do seu site, tornando mais fácil para os usuários encontrar conteúdo relacionado.
Veja este exemplo da Tok&Stok:
Como você pode ver, os breadcrumbs de hierarquia começam com a categoria de nível superior mais ampla e aprofundam-se em subcategorias mais específicas antes de chegar à página atual.
Se o usuário mudar de ideia, ele pode simplesmente clicar em uma categoria mais ampla para encontrar outra coisa.
Breadcrumbs de caminho
Breadcrumbs de caminho (também chamados de “breadcrumbs de histórico”) são como o botão “Voltar” do seu navegador.
Eles indicam o caminho do usuário até a página atual, embora normalmente esse caminho não seja exibido na sua totalidade.
Essa opção de navegação estrutural pode facilitar o retorno dos visitantes do site aos resultados da pesquisa, especialmente em sites de comércio eletrônico.
Um exemplo da Adidas:
No exemplo acima, o site usa uma breadcrumbs de caminho (o link “Voltar”) para que o usuário possa retornar à página de resultados de pesquisa. Como você pode ver, também apresenta os breadcrumbs de localização do site.
Breadcrumbs de caminho também são frequentemente usados em páginas interativas, como formulários, pois permitem que as pessoas voltem à etapa anterior, mantendo todas as informações que já enviaram.
Isso é importante para que elas possam fazer alterações nas informações inseridas, se necessário.
Breadcrumbs de atributos
Breadcrumbs de atributos exibem metainformações sobre uma página ou tópico em um formato de navegação estrutural. Eles são úteis quando há itens que se enquadram em várias categorias simultaneamente, o que dificultaria exibi-los em hierarquia, por exemplo.
Breadcrumbs de atributos são encontrados em sites de comércio eletrônico para filtrar os resultados da pesquisa de produtos.
Veja um exemplo do e-commerce de vinhos Evino:
No exemplo acima, os “filtros” são, na verdade, breadcrumbs de atributos. Cada um se relaciona a um atributo separado e específico do inventário da empresa. A pessoa poderia encontrar o mesmo vinho se navegasse para qualquer uma das categorias que foram usadas como filtro.
Com a string acima, porém, ela verá somente vinhos tintos produzidos na França. No entanto, ela pode remover qualquer um desses filtros ou adicionar mais, sem precisar mudar para uma categoria diferente.
Neste exemplo, o site da Evino combina navegação de atributo e hierarquia, para que os usuários tenham a opção de visualizar uma categoria inteira ou filtrar com mais precisão.
Por que os breadcrumbs são bons para SEO
Os breadcrumbs oferecem muitos benefícios para o SEO, incluindo:
Ajudam usuários e mecanismos de pesquisa a entender a estrutura do site
Os breadcrumbs fornecem aos usuários e aos mecanismos de pesquisa informações importantes sobre o tipo de conteúdo que está disponível no seu site e como ele é estruturado.
Isso pode ajudar os buscadores a entender melhor suas páginas, além de auxiliar os visitantes a visualizar melhor o que seu site tem a oferecer, incentivando-os a permanecer nele por mais tempo.
Aparecem nos resultados da pesquisa
O Google usa breadcrumbs para contextualizar o conteúdo de um site e apresentá-lo nos resultados de pesquisa mais relevantes.
Os breadcrumbs são exibidos nas SERPs para ajudar os usuários a entender melhor o conteúdo da página.
Melhoram a rastreabilidade e reduzem a taxa de rejeição
Como os breadcrumbs permitem às pessoas entender e navegar no seu site com mais facilidade, eles acabam impactando positivamente na taxa de rejeição.
Além disso, eles colaboram para melhorar a rastreabilidade do seu site, pois criam links internos entre páginas e categorias, o que pode potencializar seu desempenho orgânico.
Com uma ferramenta como a Auditoria de site, da Semrush, você pode verificar seus breadcrumbs, checar a rastreabilidade do seu site e identificar páginas órfãs que podem ser melhoradas com links de navegação estrutural.
Como usar a Auditoria de site para verificar os breadcrumbs do seu site
Se você estiver usando um schema de breadcrumbs, o relatório Marcação ajuda a verificar se ele foi implementado corretamente.
Este é um dos relatórios temáticos da ferramenta Auditoria de site. Uma vez que você configurá-la, poderá encontrar esse e outros relatórios na aba Visão geral:
A Auditoria de site analisa mais de 20 itens de dados estruturados, incluindo o BreadcrumbsList. Ela informa quantas páginas do seu site têm dados estruturados inválidos ou não os incluem.
A Auditoria de site também informa quais páginas contêm dados estruturados inválidos — como schema de breadcrumbs — e como corrigi-los.
Usando este relatório, você pode direcionar seus esforços e garantir que seus breadcrumbs sejam implementados corretamente em todo o site.
Funcionalidade aprimorada para navegação e pesquisa
A navegação baseada em atributos e caminhos, especialmente quando combinados, pode ajudar os usuários a filtrar o conteúdo do site. Isso significa que eles podem encontrar o conteúdo que procuram com mais rapidez e facilidade.
Os visitantes podem usar breadcrumbs de atributos como filtros de pesquisa e breadcrumbs de caminhos para retornar aos resultados da sua pesquisa, o que pode impulsionar a UX do seu site, especialmente em e-commerces.
5 dicas para uma navegação estrutural eficaz
Agora que você conhece os diferentes tipos de breadcrumbs e seus benefícios, o próximo passo é implementá-los no seu site.
Separamos 5 dicas para que você possa aproveitar ao máximo a navegação estrutural no seu site.
Use apenas breadcrumbs que façam sentido para o seu site
Breadcrumbs normalmente fazem mais sentido se a estrutura do seu conteúdo tiver mais de dois níveis. Se seu site tem um arquitetura plana – em que tudo está a apenas um clique de distância da página inicial – então provavelmente os breadcrumbs não agregarão nenhum valor aos seus visitantes.
Considere o tipo de conteúdo que você possui e como os usuários podem acessá-lo. Na maioria dos casos, um sistema baseado em hierarquia é a opção mais eficaz, pois reflete diretamente como seu conteúdo é organizado.
No entanto, se você administra um e-commerce, por exemplo, as páginas de produtos podem ter atributos diferentes que são compartilhados em várias categorias (tamanho, cor, marca etc). Nesse caso, faz mais sentido usar uma combinação de breadcrumbs de atributos e de caminho para ajudar os usuários a encontrar os produtos que estão procurando.
Use breadcrumbs que atendam às necessidades do seu público
Na hora de decidir se e como usar breadcrumbs, pense em como seu público normalmente interage com seu site. Questione-se:
- Quais informações são mais importantes para o meu público?
- Atualmente, quais são as páginas mais e as menos populares do meu site?
- E quais são as mais e menos acessíveis?
Se você conhece outros sites que seu público acessa – especialmente se forem concorrentes ou semelhantes ao seu – veja como eles são organizados e como usam os breadcrumbs.
Supondo que o conteúdo do seu site esteja estruturado de maneira lógica, a próxima etapa é garantir que os breadcrumbs sigam essa estrutura de maneira clara. Para isso, algumas coisas devem ser observadas:
- Use uma nomenclatura consistente em todas as páginas;
- Mantenha seus breadcrumbs curtos, usando o mínimo de palavras possível;
- Se possível, aproveite os breadcrumbs para utilizar suas palavras-chave;
- Certifique-se de que eles sejam exibidos em uma ordem lógica (ou seja, breadcrumbs de localização devem se aprofundar).
Organize seus breadcrumbs de forma lógica
A maioria dos sites exibe seus breadcrumbs na parte superior da página, geralmente logo abaixo do menu de navegação principal ou acima do conteúdo da página.
Por exemplo: a Balaroti coloca os deles diretamente abaixo da navegação principal e da barra de pesquisa:
No entanto, suas necessidades podem variar de acordo com seu site, o que seus clientes esperam e o padrão do seu setor. Se você não tiver certeza, explore os sites dos seus concorrentes para ver como eles organizam sua navegação estrutural.
Mantenha um design simples
O design dos breadcrumbs deve ser o mais simples e discreto possível, de modo a ser útil sem distrair o leitor do conteúdo da página. É por isso que, em tantos sites, eles se parecem com links de texto normais.
Por exemplo, veja como a C&A faz:
Os breadcrumbs da empresa ficam no canto superior esquerdo da tela, em fonte pequena, mas legível, consistente com o restante do site.
Mesmo os separadores entre as categorias são simples. Esses breadcrumbs são fáceis de localizar e entender, mas não chamam mais atenção do que o necessário.
Compare seus breadcrumbs
Você pode estar adicionando breadcrumbs ao seu site pela primeira vez, atualizando suas categorias ou ajustando como elas são apresentadas. Seja o que for, é importante fazer um teste A/B antes de finalizar seus breadcrumbs.
Isso vai ajudar a identificar e resolver possíveis aspectos negativos antes que eles acabem impactando seu site. Use a ferramenta SplitSignal, da Semrush, para fazer isso.
Os split tests funcionam melhor para mudanças menores e mais incrementais; portanto, se você precisa fazer muitas atualizações, é melhor aplicar uma de cada vez. Dessa forma, seu teste consegue fornecer resultados mais confiáveis e você pode atualizar seu site com mais confiança na sua decisão.
Melhore SEO e UX com breadcrumbs
A navegação estrutural pode parecer simples, mas garantir que os breadcrumbs funcionem de forma eficaz em todas as páginas pode ser mais complexo.
Ferramentas como a Auditoria de site ajudam a identificar facilmente problemas técnicos e erros relacionados aos breadcrumbs, schema, rastreabilidade do site e muito mais, garantindo que sua navegação estrutural impacte positivamente seu SEO e agregue valor aos visitantes.