O que são breadcrumbs num website

Os breadcrumbs mostram aos visitantes onde estão no teu site e ajudam os motores de busca a entender a estrutura. Vê o que são, quando usar e o efeito no SEO.

Rascunho

Estás três níveis abaixo da página inicial de um website. Queres voltar à categoria de onde vieste, e não até à página inicial. Sem navegação por breadcrumbs, ou usas o botão de voltar várias vezes, ou recomeças do topo. Os breadcrumbs resolvem isto com um clique.

Os breadcrumbs são um elemento de navegação secundário que mostra aos visitantes o caminho desde a página inicial até à página em que estão. Costumam aparecer perto do topo da página como um rasto horizontal de links, por exemplo Início, depois Categoria, depois Subcategoria, depois a Página atual. Cada passo é um link clicável que leva o visitante de volta a esse nível do site.

O nome vem do conto de fadas João e Maria, em que as personagens deixaram um rasto de migalhas de pão pela floresta para poderem encontrar o caminho de volta. Num website, o conceito é o mesmo: um rasto visível que mostra onde estás e te dá uma forma de refazer os teus passos.

Quais são os diferentes tipos de navegação por breadcrumbs?

Existem três tipos de breadcrumbs, cada um adequado a um tipo diferente de estrutura de site.

Os breadcrumbs de localização são o tipo mais comum. Mostram a posição fixa do visitante na hierarquia do site, com base na forma como o site está estruturado. Um visitante numa página de produto dentro de uma categoria veria algo como Início, depois Loja, depois Nome da categoria, depois Nome do produto. O caminho é o mesmo para todos os visitantes que chegam a essa página, porque reflete a estrutura do site e não o percurso do visitante.

Os breadcrumbs de percurso mostram o caminho real que um visitante fez até à página atual. Mudam consoante a forma como o visitante chegou. São menos comuns porque podem confundir: dois visitantes na mesma página podem ver breadcrumbs diferentes, o que contraria o objetivo de mostrar a estrutura do site. A maioria dos sites usa breadcrumbs de localização.

Os breadcrumbs de atributos usam-se em lojas online onde os produtos podem pertencer a várias categorias ou ser filtrados por atributos como cor, tamanho ou marca. Em vez de mostrarem um único caminho hierárquico, mostram os filtros ou atributos aplicados. É um tipo especializado, usado sobretudo em catálogos de produtos.

Quando precisa um website de breadcrumbs?

Os breadcrumbs são mais valiosos em sites com estruturas profundas ou complexas, onde os visitantes podem chegar vários níveis abaixo da página inicial e precisam de se orientar.

As lojas online com categorias e subcategorias de produtos beneficiam muito. Um visitante que chega a uma página de produto a partir de um resultado de pesquisa pode querer ver produtos semelhantes da mesma categoria. Os breadcrumbs dão-lhe um caminho direto até ao nível da categoria sem recomeçar da página inicial.

As bases de conhecimento, os sites de documentação e os sites com muito conteúdo e várias categorias de temas também beneficiam. Um visitante que lê um artigo específico e quer ver o que mais é abordado na mesma área pode seguir os breadcrumbs até à categoria, em vez de pesquisar de novo.

Um website simples de cinco páginas com estrutura plana não precisa de breadcrumbs. Se não há uma hierarquia relevante para navegar, o elemento só acrescenta ruído visual sem servir nenhum objetivo. O artigo sobre o que é a estrutura de um website explica a hierarquia que os breadcrumbs refletem. O artigo sobre o que é a navegação de um website trata de todo o sistema de navegação e de onde os breadcrumbs se encaixam nele.

Como é que os breadcrumbs afetam a experiência do utilizador?

Os breadcrumbs reduzem o esforço necessário para circular num site com vários níveis. Dão aos visitantes três coisas ao mesmo tempo: confirmação de onde estão, um mapa visível de como o site está estruturado e um atalho para subir a qualquer nível da hierarquia.

Sem breadcrumbs num site profundo, os visitantes que querem explorar uma categoria têm de usar o botão de voltar várias vezes, ir ao menu principal e recomeçar, ou usar a pesquisa. As três opções exigem mais esforço do que um único clique num breadcrumb. Reduzir esse atrito mantém os visitantes mais tempo no site e aumenta a probabilidade de encontrarem o que vieram buscar.

Os breadcrumbs também reduzem a frustração de quem chega a um ponto fundo do site vindo de um motor de busca. Pode nem conhecer a estrutura do site quando chega. Os breadcrumbs dão-lhe contexto imediato: vê de relance que está a olhar para um produto específico, dentro de uma categoria específica, num tipo específico de site. Essa orientação conta para a confiança e para continuar a navegar.

Como é que os breadcrumbs afetam o SEO?

Os breadcrumbs afetam o SEO de duas formas distintas: através dos sinais de estrutura do site e através da forma como os motores de busca mostram os resultados.

Quando os breadcrumbs são implementados corretamente com marcação de dados estruturados, os motores de busca conseguem ler e entender a hierarquia do site a partir dos rastos de breadcrumbs. Isto ajuda no rastreio e a perceber como as páginas se relacionam entre si. As páginas claramente posicionadas dentro de uma hierarquia bem definida tendem a ser entendidas e indexadas com mais exatidão do que as páginas em estruturas planas ou ambíguas.

O segundo efeito vê-se nos resultados de pesquisa. Quando os breadcrumbs incluem dados estruturados, os motores de busca podem mostrar o rasto de breadcrumbs em vez do endereço completo, por baixo do título da página nos resultados. Um resultado que mostra Início, depois Categoria, depois Produto é mais fácil de entender de relance do que um endereço longo com parâmetros. Esta maior legibilidade pode aumentar a taxa de cliques (CTR) a partir dos resultados de pesquisa.

Os breadcrumbs também contribuem para a ligação interna. Cada link de breadcrumb é um link interno que passa autoridade para cima na hierarquia, reforçando a importância das páginas de categoria e de centro. Em sites grandes, é um benefício estrutural de SEO relevante. O artigo sobre o que é o SEO trata de como a ligação interna e a estrutura do site se relacionam com o desempenho na pesquisa de forma mais ampla.

O que são dados estruturados de breadcrumbs?

Os dados estruturados são código acrescentado a uma página que ajuda os motores de busca a entender elementos específicos dessa página num formato padronizado. Os dados estruturados de breadcrumbs dizem aos motores de busca o nome e o endereço de cada passo do rasto, num formato que os motores de busca suportam oficialmente.

Sem dados estruturados, um motor de busca consegue ver o texto dos breadcrumbs na página, mas tem de deduzir o que significa. Com dados estruturados, a informação é explícita: isto é um breadcrumb, este é o primeiro passo com este nome e este endereço, este é o segundo passo, e assim por diante. Os motores de busca usam isto para criar a apresentação dos breadcrumbs nos resultados e para entender a hierarquia do site com mais fiabilidade.

A maioria dos criadores de websites e plataformas de CMS modernos gera automaticamente os dados estruturados de breadcrumbs quando os breadcrumbs estão ativados. Se estás a construir ou a gerir um site manualmente, vale a pena acrescentar esta marcação em qualquer site com conteúdo hierárquico relevante.

Como a WEMASY trata da navegação por breadcrumbs

O criador de websites da WEMASY suporta navegação por breadcrumbs em sites com estruturas de conteúdo hierárquicas. Quando ativados, os breadcrumbs são gerados automaticamente com base na categoria da página e na sua posição na estrutura do site, incluindo a marcação de dados estruturados que os motores de busca usam para os mostrar nos resultados.

Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.

Perguntas frequentes

Os breadcrumbs substituem o menu de navegação principal?

Não. Os breadcrumbs e a navegação principal servem objetivos diferentes. A navegação principal permite aos visitantes saltar para qualquer secção do site a partir de qualquer página. Os breadcrumbs mostram onde a página atual se situa na hierarquia e permitem aos visitantes voltar atrás nesse caminho específico. Num site bem desenhado, os dois elementos existem e funcionam em conjunto. Os breadcrumbs são uma camada de navegação secundária, não um substituto do menu principal. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.

Onde devem aparecer os breadcrumbs numa página?

Os breadcrumbs costumam aparecer perto do topo da página, abaixo da barra de navegação principal e acima do título da página. Esta posição coloca-os onde os visitantes esperam encontrar indicações de orientação e antes de o conteúdo principal começar. Devem ser visualmente distintos, mas não dominantes: pequenos o suficiente para não atrapalharem o conteúdo principal, grandes o suficiente para ler e tocar com conforto em telemóvel.

Os breadcrumbs devem incluir a página atual?

Depende da convenção que seguires. Algumas implementações incluem a página atual como último item do rasto, mostrada como texto simples e não como link clicável. Outras terminam o rasto no nível superior, porque ligar à página onde já estás não serve nenhum objetivo. As duas abordagens são comuns e aceitáveis. A questão mais importante é se o rasto mostra claramente o caminho da página inicial até onde o visitante está agora.

Os breadcrumbs ajudam em telemóvel?

Sim, mas têm de ser implementados com cuidado. Num ecrã pequeno, um rasto de breadcrumbs longo pode quebrar em várias linhas ou transbordar do contentor. Soluções comuns incluem encurtar os passos intermédios com reticências, recolher tudo menos o nível superior imediato ou mostrar em telemóvel só o link do nível acima. O objetivo é manter o benefício da orientação sem o rasto dominar o ecrã. Um breadcrumb que funciona mal em telemóvel é pior do que nenhum breadcrumb.

Os breadcrumbs são um fator de classificação?

Não diretamente. Os motores de busca não colocam as páginas mais acima só por terem breadcrumbs. O benefício de SEO vem de forma indireta: os breadcrumbs com dados estruturados ajudam os motores de busca a entender a estrutura do site com mais exatidão, os links de breadcrumbs contribuem para a autoridade dos links internos e a apresentação dos breadcrumbs nos resultados de pesquisa pode melhorar a taxa de cliques. São benefícios reais e que valem a pena, mas funcionam através da melhoria da estrutura e da usabilidade, e não como sinal direto de classificação.

Põe isto em prática
no teu próprio site.

Começa grátis com a WEMASY e cria o teu site em poucos minutos.