{"id":2854,"date":"2023-11-09T11:00:00","date_gmt":"2023-11-09T14:00:00","guid":{"rendered":"https:\/\/liveseo.com.br\/breadcrumbs\/"},"modified":"2024-04-02T11:25:49","modified_gmt":"2024-04-02T14:25:49","slug":"breadcrumbs","status":"publish","type":"post","link":"https:\/\/liveseo.com.br\/seo\/breadcrumbs\/","title":{"rendered":"GUIA sobre Breadcrumbs: aprenda mais sobre esse recurso"},"content":{"rendered":"

Breadcrumbs: tudo sobre a navega\u00e7\u00e3o estruturada de sites<\/h2>\n

Uma trilha de navega\u00e7\u00e3o em uma p\u00e1gina indica a posi\u00e7\u00e3o da p\u00e1gina na hierarquia do site e pode ajudar os usu\u00e1rios a compreender e explorar um site de maneira eficaz.<\/em><\/p>\n

Google Developers em Guia de Recursos – Breadcrumbs<\/a><\/p><\/blockquote>\n

Sempre que otimizamos aspectos t\u00e9cnicos de um site, precisamos estar pensando na melhoria da navega\u00e7\u00e3o dos nossos usu\u00e1rios. Com o uso dos breadcrumbs isso n\u00e3o \u00e9 diferente!<\/p>\n

Esse termo pode ser traduzido como “migalhas de p\u00e3o”. Um elemento da p\u00e1gina que serve para auxiliar os visitantes do dom\u00ednio a se localizarem dentro da estrutura de URLs \u2014 tamb\u00e9m \u00e9 conhecido como “navega\u00e7\u00e3o estruturada”.<\/p>\n

O update de 17 de novembro de 2009 do Google<\/a> foi o respons\u00e1vel por trazer esse recurso para os holofotes ao come\u00e7ar apresent\u00e1-lo diretamente dentro da p\u00e1gina de resultados. At\u00e9 hoje existem sites que n\u00e3o possuem a sua trilha de p\u00e3o bem constru\u00edda, assim como h\u00e1 tenha, mas n\u00e3o de maneira otimizada.<\/p>\n

Eu sou Isabela, Content Master aqui na live, e como nosso blog \u00e9 refer\u00eancia em trazer as principais pr\u00e1ticas para otimiza\u00e7\u00e3o de sites, n\u00e3o podia ser diferente: preparamos um conte\u00fado supercompleto sobre o tema. Ent\u00e3o, para tirar suas d\u00favidas sobre o que s\u00e3o os breadcrumbs, seus tipos, como implement\u00e1-los e como otimiz\u00e1-los, \u00e9 s\u00f3 continuar com a gente. Vamos l\u00e1?<\/p>\n

O que s\u00e3o breadcrumbs?<\/h2>\n

Os breadcrumbs s\u00e3o sinalizadores que mostram ao usu\u00e1rio em qual local do site ele est\u00e1 e por quais ele passou<\/strong> \u2014 ou pelo menos com qual grupo de p\u00e1ginas aquele URL est\u00e1 diretamente conectado na taxonomia do site. Ou seja, ele mostra de maneira resumida e objetiva qual a trilha que as pessoas fizeram no dom\u00ednio at\u00e9 o momento.<\/p>\n

Ainda est\u00e1 muito nebuloso? Pense o seguinte:<\/p>\n

Se voc\u00ea est\u00e1 buscando um guarda-roupa infantil dentro de um e-commerce de uma loja de departamento que vende muitos tipos de produto. Para chegar no seu objetivo, provavelmente teria que entrar na p\u00e1gina de m\u00f3veis, ap\u00f3s isso a subcategoria de m\u00f3veis infantis e s\u00f3 ent\u00e3o a p\u00e1gina destinada aos guarda-roupas.<\/em><\/p>\n

Sendo assim, o breadcrumb desta p\u00e1gina ficaria mais ou menos assim: Nome do e-commerce > M\u00f3veis > M\u00f3veis Infantis > Guarda-roupa Infantil. Caso voc\u00ea tivesse feito outro caminho durante sua visita ao site, as p\u00e1ginas indicadas poderiam ser outras.<\/em><\/p><\/blockquote>\n

Muitas vezes esse recurso fica na parte superior esquerda, logo abaixo do menu, e cada uma das p\u00e1ginas em que passou fica linkada ali. Com isso, fica f\u00e1cil retornar a uma p\u00e1gina anterior caso queira.<\/p>\n

Sabendo disso, fica um pouco mais f\u00e1cil entender o porqu\u00ea desses sinalizadores serem chamados de breadcrumbs, n\u00e3o \u00e9? Essa \u00e9 uma clara refer\u00eancia a hist\u00f3ria de Jo\u00e3o e Maria, na qual os irm\u00e3os deixaram migalhas de p\u00e3o para encontrarem mais facilmente o caminho para casa e agora faz parte dos conceitos do SEO On Page<\/a>.<\/p>\n

No entanto, ao inv\u00e9s da vil\u00e3 ser a bruxa m\u00e1 com a casa de doces, para os sites sem uma navega\u00e7\u00e3o estruturada \u00e9 a taxa de rejei\u00e7\u00e3o<\/strong> \u2014 afinal, ningu\u00e9m gosta de permanecer em um site bagun\u00e7ado, certo?<\/p>\n

\"TiposTipos de breadcrumbs<\/h2>\n

Apesar do breadcrumb que mostra exatamente em quais p\u00e1ginas voc\u00ea passou ser uma op\u00e7\u00e3o, ele n\u00e3o \u00e9 o \u00fanico tipo que existe. Veja a seguir os tr\u00eas tipos de sinalizadores do site:<\/p>\n

1. Breadcrumbs de localiza\u00e7\u00e3o<\/h3>\n

Os indicadores de localiza\u00e7\u00e3o, como o nome sugere, mostram exatamente em qual local do site voc\u00ea est\u00e1. No entanto, ao contr\u00e1rio do que falamos anteriormente, as p\u00e1ginas indicadas neste recurso n\u00e3o est\u00e3o relacionadas ao caminho que voc\u00ea fez durante sua sess\u00e3o, e sim a hierarquia de p\u00e1ginas segundo a taxonomia do site.<\/p>\n

Essa \u00e9, de longe, a vers\u00e3o mais utilizada nos e-commerces por mostrar ao usu\u00e1rio a rela\u00e7\u00e3o entre departamentos e suas respectivas subcategorias. Veja um exemplo a seguir:
\n\"Breadcrumbs<\/p>\n

Organizar adequadamente o Crawl Depth do seu site<\/a> ir\u00e1 te ajudar a otimizar as p\u00e1ginas que aparecer\u00e3o nesse tipo de trilha. Aqui no blog j\u00e1 temos um conte\u00fado completo sobre o tema. Acesse e aprenda mais!<\/p>\n

2. Breadcrumbs de atributo<\/h3>\n

\"Breadcrumbs
\nOs breadcrumbs de atributos \u00e9 como um descritivo n\u00e3o s\u00f3 do caminho at\u00e9 a p\u00e1gina, mas tamb\u00e9m do que ser\u00e1 encontrado ali. Em um departamento com uma certa variedade de produtos e filtros, esse tipo de indicador ir\u00e1 apresentar todas as varia\u00e7\u00f5es de filtro selecionadas dentro em sua “trilha”.<\/p>\n

Usando essa op\u00e7\u00e3o, seu site ir\u00e1 mostrar ao usu\u00e1rio cada detalhe do departamento em que ele est\u00e1. E, como esse breadcrumb n\u00e3o \u00e9 fixo como o de caminho <\/strong>\u2014 que se baseia numa hierarquia pr\u00e9-determinada \u2014, a quantidade de indicadores que aparecer\u00e1 nesse elemento ser\u00e1 bem maior, o que pode n\u00e3o ser uma boa op\u00e7\u00e3o para vers\u00f5es mobile ou em aplicativos.<\/p>\n

3. Breadcrumbs de caminho<\/h3>\n

O mais fiel \u00e0 hist\u00f3ria de Jo\u00e3o e Maria, o breadcrumb de caminho mostra exatamente o seu caminho no site durante a visita atual. Sendo assim, se dois usu\u00e1rios querem chegar at\u00e9 a p\u00e1gina de “Camisas de times brasileiros”, mas antes de ir at\u00e9 essa p\u00e1gina cada um decidiu visitar diferentes categorias do site, no fim ter\u00e3o breadcrumbs com informa\u00e7\u00f5es diferentes.<\/p>\n

Como esse tamb\u00e9m \u00e9 um tipo de trilha vari\u00e1vel e que pode ficar muito longa para ser exibida completamente na p\u00e1gina, \u00e9 importante pensar em um limite de p\u00e1ginas que aparecer\u00e3o nesse indicador. Assim voc\u00ea manter\u00e1 a usabilidade do breadcrumb, mas n\u00e3o ir\u00e1 prejudicar a experi\u00eancia do usu\u00e1rio.
\n\"Breadcrumbs<\/p>\n

Qual a import\u00e2ncia dos breadcrumbs?<\/h2>\n

Como voc\u00ea p\u00f4de perceber durante a explica\u00e7\u00e3o dos tipos de navega\u00e7\u00e3o estruturada, esses sinalizadores de caminho ajudam o usu\u00e1rio a entender hierarquia de p\u00e1ginas, retornar para p\u00e1ginas anteriores, entre outros. Mas ele tamb\u00e9m tem impacto e relev\u00e2ncia em outros aspectos para os sites. Os principais s\u00e3o:<\/p>\n

Para o SEO<\/h3>\n

O SEO (Search Engine Optimization) \u00e9 a forma de marketing que busca posicionar organicamente os sites nas primeiras coloca\u00e7\u00f5es das p\u00e1ginas do Google. Para isso, esse tipo de atua\u00e7\u00e3o se baseia em fortalecer a organiza\u00e7\u00e3o do site e melhorar a navega\u00e7\u00e3o do usu\u00e1rio ali<\/strong>, e uma das ferramentas que s\u00e3o utilizadas para atingir esse objetivo s\u00e3o as linkagens internas.<\/p>\n

Os breadcrumbs cont\u00e9m em sua estrutura links internos para as p\u00e1ginas aos quais se referenciam (\u00e9 por isso que d\u00e1 para voltar \u00e0s p\u00e1ginas que passou ao clicar neles). Por essa caracter\u00edstica, essa trilha acaba auxiliando no posicionamento org\u00e2nico.<\/p>\n

Afinal, ela traz j\u00e1 no in\u00edcio da p\u00e1gina uma s\u00e9rie de linkagens internas que fazem parte de uma l\u00f3gica e que ajudam o usu\u00e1rio a se localizar no site \u2013 tudo isso \u00e9 bem visto aos olhos do buscador.<\/p>\n

As migalhas de p\u00e3o podem, inclusive, aparecer nos resultados do Google. Isso pode ajudar a transparecer credibilidade e organiza\u00e7\u00e3o ao usu\u00e1rio, at\u00e9 mesmo conquistando um clique org\u00e2nico para a p\u00e1gina.<\/p>\n

\"Pistola<\/p>\n

\"Rem\u00e9dios\"<\/p>\n

A preocupa\u00e7\u00e3o do buscador com aspectos de navega\u00e7\u00e3o \u00e9 t\u00e3o grande que em maio de 2020 o Google lan\u00e7ou o Core Web Vitals<\/a>. Quer saber mais sobre essa atualiza\u00e7\u00e3o? Confira o conte\u00fado do blog sobre o assunto!<\/p>\n

Para o UX<\/h3>\n

Um dos princ\u00edpios de UX (User Experience) que todos os sites deveriam aplicar para tornar suas p\u00e1ginas mais naveg\u00e1veis \u00e9 sempre oferecer uma rota de sa\u00edda para o seu visitante. E \u00e9 a\u00ed que os breadcrumbs entram para favorecer a experi\u00eancia das pessoas: ele \u00e9 o caminho de retorno.<\/p>\n

Pense em uma pessoa buscando uma pe\u00e7a que est\u00e1 dentro de um departamento no quarto n\u00edvel do site, se ela clicar na p\u00e1gina errada e para sair precisar ir para a home, \u00e9 muito prov\u00e1vel que isso gere uma frustra\u00e7\u00e3o ou at\u00e9 mesmo uma perda do usu\u00e1rio.<\/em><\/p>\n

Com o breadcrumb, basta ela<\/em> clicar no elemento anterior ao da p\u00e1gina que est\u00e1 e ela poder\u00e1 dar um passo atr\u00e1s<\/em><\/strong>, consertando seu equ\u00edvoco anterior sem ter uma experi\u00eancia negativa com o site.<\/em><\/p><\/blockquote>\n

Se for do tipo “atributos”, existe a possibilidade da navega\u00e7\u00e3o estruturada mostrar as varia\u00e7\u00f5es dentro de uma p\u00e1gina e o usu\u00e1rio pode descobrir mais facilmente se o que ele deseja tem ali naquela subcategoria, ou se precisar\u00e1 ir para outro espa\u00e7o dentro desse departamento.<\/p>\n

Esses aspectos s\u00e3o essenciais para otimizar o UX do site e s\u00e3o as “migalhas de p\u00e3o” que determinam isso.<\/p>\n

Para as m\u00e9tricas de rejei\u00e7\u00e3o<\/h3>\n

Ao tornar um site mais organizado e naveg\u00e1vel, j\u00e1 \u00e9 poss\u00edvel observar melhoras na taxa de rejei\u00e7\u00e3o. Mas quando falamos dos breadcrumbs isso fica ainda mais evidente, pois eles oferecem um caminho clic\u00e1vel para o usu\u00e1rio. E se h\u00e1 cliques (intera\u00e7\u00f5es com a p\u00e1gina), menor \u00e9 a taxa de rejei\u00e7\u00e3o<\/a> ou maior a taxa de engajamento \u2014 utilizando as m\u00e9tricas do Google Analytics 4.<\/p>\n

N\u00e3o entendeu como isso pode acontecer? Veja o exemplo:<\/p>\n

Se um usu\u00e1rio que pesquisou diretamente “tintas cor fantasia” se arrependeu da sua escolha e percebeu que na verdade gostaria de ver outro tipo de tintura, existem grandes chances de que ele apenas saia da p\u00e1gina e refa\u00e7a sua pesquisa.<\/em><\/p>\n

No entanto, se nesse site os breadcrumbs estiverem aplicados, ele facilmente encontraria o departamento de “Tinturas” e poderia clicar ali para ver outras op\u00e7\u00f5es que atendenssem melhor em suas expectativas.<\/em><\/p><\/blockquote>\n

Os breadcrumbs s\u00e3o um fator de ranqueamento do Google?<\/h2>\n

Essa \u00e9 a pergunta do milh\u00e3o e infelizmente a resposta \u00e9: n\u00e3o temos certeza. O Google nunca revelou todos os seus fatores de ranqueamento e por isso n\u00e3o podemos bater o martelo falando que os breadcrumbs s\u00e3o sim um dos crit\u00e9rios para ranquear melhor<\/strong>. No entanto, existem fatores que nos fazem acreditar nessa teoria.<\/p>\n

O funcionamento do rastreador<\/h3>\n

O primeiro \u00e9 a forma com que o rastreador funciona. Sites com linkagens internas otimizadas se destacam entre os demais, pois podem oferecer uma experi\u00eancia mais fluida para o leitor. E como citamos antes, o breadcrumb \u00e9 uma forma de linkagem interna que aparece logo no in\u00edcio da p\u00e1gina, o que interpretamos como algo positivo para o ranqueamento.<\/p>\n

A miss\u00e3o do Google<\/h3>\n

Em segundo lugar, temos a miss\u00e3o do Google: organizar as informa\u00e7\u00f5es do mundo todo e torn\u00e1-las universalmente acess\u00edveis e \u00fateis. Seguindo esse pensamento, podemos inferir que os aspectos de um site que v\u00e3o de encontro a essa miss\u00e3o podem ser fatores de um melhor ranqueamento. O breadcrumb converge com isso, afinal, ele ajuda a organizar as informa\u00e7\u00f5es do site e torn\u00e1-las claras para o usu\u00e1rio.<\/p>\n

Avisos do Google Search Console<\/h3>\n

Por \u00faltimo, temos os avisos do Google Search Console ou GSC. Essa ferramenta, entre muitos outros recursos, oferece alertas quando alguns aspectos do site v\u00e3o contra as diretrizes do Google, e o t\u00f3pico central deste post est\u00e1 incluso entre os avisos.<\/p>\n

Por conta disso, h\u00e1 quem acredite que se os breadcrumbs n\u00e3o fossem um dos auxiliadores do ranqueamento org\u00e2nico, eles n\u00e3o estariam entre os itens notificados pelo Google para otimiza\u00e7\u00e3o do site.<\/p>\n

Por conta dos tr\u00eas aspectos, acreditamos que os breadcrumbs influenciam, sim, em quais sites ir\u00e3o posicionar nas primeiras posi\u00e7\u00f5es da SERP. No entanto, \u00e9 importante ressaltar que esse n\u00e3o \u00e9 e nunca ser\u00e1 o \u00fanico fator decisivo para essa boa coloca\u00e7\u00e3o<\/strong>.<\/p>\n

Todas as demais t\u00e9cnicas de SEO aplicadas corretamente em seu dom\u00ednio, a produ\u00e7\u00e3o de um conte\u00fado aut\u00eantico e o alinhamento com as inten\u00e7\u00f5es de seu p\u00fablico ir\u00e3o pesar para que se destaque nos resultados org\u00e2nicos.<\/p>\n

Quando usar os breadcrumbs?<\/h2>\n

Utilizar os breadcrumbs \u00e9 ainda mais relevante quando seu dom\u00ednio apresenta diversos departamentos e subcategorias<\/strong>, caracter\u00edstica que facilita os usu\u00e1rios a se perderem ou at\u00e9 mesmo n\u00e3o conhecerem por completo as op\u00e7\u00f5es dispon\u00edveis ali. Ou seja, \u00e9 importante usar as migalhas de p\u00e3o quando seu site for grande.<\/p>\n

Caso voc\u00ea tenha um site com uma pequena quantidade de p\u00e1ginas e todas elas estiverem dispostas de maneira clara o menu, n\u00e3o \u00e9 t\u00e3o interessante aderir a esse recurso, pois pode acontecer de sobrecarregar visualmente o seu usu\u00e1rio.<\/p>\n

Como implementar os breadcrumbs no meu site?<\/h2>\n

Existem algumas formas de implementar esse mecanismo em seu site. Separamos 4 op\u00e7\u00f5es das mais comuns para explicar a voc\u00ea:<\/p>\n

Por dados estruturados<\/h3>\n

Os dados estruturados s\u00e3o uma forma de refor\u00e7ar o sinal de uma organiza\u00e7\u00e3o dentro do site. Ou seja, eles chamam a aten\u00e7\u00e3o do buscador para o fato de algumas informa\u00e7\u00f5es estarem estruturadas em um padr\u00e3o j\u00e1 conhecido pelo crawler. Esse padr\u00e3o pode ser uma lista, um FAQ ou, como no tema desse artigo, um Breadcrumb.<\/p>\n

Para aplicar esse recurso por dado estruturado voc\u00ea precisa:<\/p>\n

    \n
  1. Gerar o c\u00f3digo JSON-LD dos dados estruturados de Breadcrumbs, ou utilize o que o Google disponibiliza dentro de seu artigo sobre como implementar dados estruturados de navega\u00e7\u00e3o estruturada<\/a>;<\/li>\n
  2. Copiar o c\u00f3digo JSON-LD que gerou;<\/li>\n
  3. Inserir o c\u00f3digo na se\u00e7\u00e3o do c\u00f3digo HTML que corresponde ao cabe\u00e7alho () ou diretamente no corpo da p\u00e1gina que deseja implementar esse recurso;<\/li>\n
  4. Testar os dados estruturados<\/a> que aplicou e, caso tenha algum erro, ajustar o c\u00f3digo;<\/li>\n
  5. Publicar as altera\u00e7\u00f5es feitas no seu site;<\/li>\n
  6. Solicitar a indexa\u00e7\u00e3o dessa p\u00e1gina pelo Google Search Console.<\/li>\n<\/ol>\n

    Para saber mais sobre os dados estruturados, assista o nosso Webinar com o nosso especialista t\u00e9cnico, Saulo Lenzi \u2014 Dados estruturados: O que s\u00e3o e como us\u00e1-los para melhorar os resultados de SEO.<\/a><\/p>\n

    Pelo layout<\/h3>\n

    Para fazer a implementa\u00e7\u00e3o por layout voc\u00ea precisar\u00e1 de um desenvolvedor ou um conhecimento um pouco mais profundo sobre HTML. Nessa op\u00e7\u00e3o o passo a passo \u00e9 o seguinte:<\/p>\n

      \n
    1. Escolha qual o tipo de breadcrumb deseja aplicar no seu site;<\/li>\n
    2. Acesse o c\u00f3digo HTML da p\u00e1gina e, com o apoio ou n\u00e3o de um CMS, edite o c\u00f3digo-fonte;<\/li>\n
    3. Crie um elemento de Breadcrumb, se optar por uma lista n\u00e3o ordenada (o estilo mais comum) use a tag “”;\n