como e quando us√°-los no seu site

Acompanhe as novidades e ultimas postagens.

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:

exemplo de breadcrumbs no site da 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:

  1. Breadcrumbs de hierarquia;
  2. Breadcrumbs de caminho;
  3. Breadcrumbs de atributos.

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:

exemplo de breadcrumbs no site da tokstok

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 (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:

exemplo de breadcrumbs no site 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.

fazer altera√ß√Ķes nas informa√ß√Ķes inseridas

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:

exemplo de breadcrumbs no site da 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.

exemplo de breadcrumbs na serp do google

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:

relatórios temáticos ferramenta auditoria de site

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.

relatório de marcação na ferramenta auditoria de site

A Auditoria de site tamb√©m informa quais p√°ginas cont√™m dados estruturados inv√°lidos ‚ÄĒ como schema de breadcrumbs ‚ÄĒ e como corrigi-los.

relatório de dados estruturados inválidos

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:

exemplo de breadcrumbs no site da balaroti

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:

exemplo de breadcrumbs no site da c&a

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.

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.

Fonte

Compartilhar:

Deixe um coment√°rio

Categorias
Assinar por e-mail

Digite seu endere√ßo de e-mail para assinar e receber notifica√ß√Ķes de novas publica√ß√Ķes por e-mail.

Estatísticas do blog
  • 53.077 Views

20% DE

 DESCONTO

BLACK

NOVEMBER

Cupom válido até 01/12/2023 ou até durarem os estoques.
V√°lido somente para novos assinantes.

CUPOM:  

BLACK2023

Desconto v√°lido nos planos MENSAIS para Hospedagem Cloud, Revenda Plesk e Email Profissional. Desconto ser√° aplicado durante 12 meses no plano de assinatura mensal.