{"id":4139,"date":"2024-09-20T14:13:46","date_gmt":"2024-09-20T14:13:46","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4139"},"modified":"2026-03-09T17:38:11","modified_gmt":"2026-03-09T17:38:11","slug":"o-que-e-o-rastro-de-migalhas-de-pao-de-um-site","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-o-rastro-de-migalhas-de-pao-de-um-site\/","title":{"rendered":"O que \u00e9 a Trilha de Breadcrumbs de um Site?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#why-is-this-navigational-help-called-a-breadcrumb\">Por que essa ajuda de navega\u00e7\u00e3o \u00e9 chamada de breadcrumb?<\/a><\/li><li><a href=\"#what-are-the-benefits-of-using-the-website-breadcrumb-trails\">Quais s\u00e3o os benef\u00edcios de usar as trilhas de breadcrumbs do site?<\/a><\/li><li><a href=\"#are-there-any-potential-drawbacks-or-disadvantages-to-using-breadcrumb-trails\">Existem desvantagens ou potenciais problemas em usar trilhas de breadcrumbs?<\/a><\/li><li><a href=\"#what-are-some-best-practices-for-designing-effective-breadcrumb-trails\">Quais s\u00e3o algumas das melhores pr\u00e1ticas para projetar trilhas de breadcrumbs eficazes?<\/a><\/li><li><a href=\"#can-you-provide-examples-of-websites-that-use-breadcrumb-trails-effectively\">Voc\u00ea pode fornecer exemplos de sites que usam trilhas de breadcrumbs de forma eficaz?<\/a><\/li><li><a href=\"#how-can-we-implement-breadcrumbs-into-our-web-designs\">Como podemos implementar breadcrumbs em nossos web designs?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-is-this-navigational-help-called-a-breadcrumb\" style=\"font-size:32px\"><strong>Por que essa ajuda de navega\u00e7\u00e3o \u00e9 chamada de breadcrumb?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">O termo breadcrumb se originou no conto de fadas infantil Jo\u00e3o e Maria, em que os personagens principais jogam migalhas de p\u00e3o no ch\u00e3o para marcar seu caminho e evitar se perder na floresta. Da mesma forma, breadcrumbs em um site permitem que os usu\u00e1rios refa\u00e7am seus passos.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-benefits-of-using-the-website-breadcrumb-trails\" style=\"font-size:32px\"><strong>Quais s\u00e3o os benef\u00edcios de usar as trilhas de breadcrumbs do site?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Os motivos para implementar o caminho de breadcrumbs do site est\u00e3o na lista abaixo:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Aux\u00edlios de navega\u00e7\u00e3o:<\/strong> Breadcrumbs ajudam os usu\u00e1rios a se localizarem no site.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Taxas de rejei\u00e7\u00e3o mais baixas: <\/strong>Os breadcrumbs permitem que o usu\u00e1rio navegue mais a fundo nas p\u00e1ginas em busca de outros materiais relevantes.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>SEO:<\/strong> Os mecanismos de busca entendem melhor a hierarquia do site.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Acessibilidade: <\/strong>Usu\u00e1rios com defici\u00eancia tendem a ter uma melhor compreens\u00e3o do contexto do site.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:&nbsp;\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nMarque suas trilhas de breadcrumbs com atributos ARIA (Accessible Rich Internet Applications) para aumentar a acessibilidade para usu\u00e1rios de leitores de tela.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-there-any-potential-drawbacks-or-disadvantages-to-using-breadcrumb-trails\" style=\"font-size:32px\"><strong>Existem desvantagens ou potenciais problemas em usar trilhas de breadcrumbs?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Embora sejam \u00fateis na maioria dos casos, a implementa\u00e7\u00e3o de breadcrumbs requer aten\u00e7\u00e3o devido aos seguintes fatores:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Breadcrumbs ocupam espa\u00e7o; telas de desktop se beneficiam deles, mas lembre-se de dar aten\u00e7\u00e3o a telas menores ao criar essa funcionalidade.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Embora os breadcrumbs possam melhorar a usabilidade de sites com navega\u00e7\u00e3o complexa, sua implementa\u00e7\u00e3o em sites com conte\u00fado simples pode ser considerada redundante.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Breadcrumbs exigem um bom design para evitar confus\u00e3o visual.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:&nbsp;\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nCaso esteja preocupado com o espa\u00e7o, uma alternativa \u00e9 implementar um breadcrumb expans\u00edvel ao passar o mouse ou clicar. \n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-some-best-practices-for-designing-effective-breadcrumb-trails\" style=\"font-size:32px\"><strong>Quais s\u00e3o algumas das melhores pr\u00e1ticas para projetar trilhas de breadcrumbs eficazes?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Um design eficaz de breadcrumbs requer designs funcionais e agrad\u00e1veis que estejam alinhados \u00e0 identidade da sua marca. Considere esta lista ao criar seus breadcrumbs:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>\u00c9 importante indicar a hierarquia do site.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Descreva cada link de forma breve \u2013 uma ou duas palavras devem ser suficientes.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Indicate levels using \u201c&gt;\u201d or \u201c\/\u201d.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Garanta que eles funcionem em todos os dispositivos.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Incorpore-os na parte superior da p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-you-provide-examples-of-websites-that-use-breadcrumb-trails-effectively\" style=\"font-size:32px\"><strong>Voc\u00ea pode fornecer exemplos de sites que usam trilhas de breadcrumbs de forma eficaz?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Sim. Aqui est\u00e3o exemplos de sites que incluem breadcrumbs como uma ferramenta de navega\u00e7\u00e3o para aprimorar a experi\u00eancia do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.amazon.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Amazon<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.ebay.com\/\" rel=\"nofollow noopener\" target=\"_blank\">eBay<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.bbcgoodfood.com\/\" rel=\"nofollow noopener\" target=\"_blank\">BBC Good Food<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.lonelyplanet.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Lonely Planet<\/a><\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Sinta-se \u00e0 vontade para acessar esses exemplos e ver aplica\u00e7\u00f5es pr\u00e1ticas da navega\u00e7\u00e3o por breadcrumbs em sites reais.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-can-we-implement-breadcrumbs-into-our-web-designs\" style=\"font-size:32px\"><strong>Como podemos implementar breadcrumbs em nossos web designs?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Voc\u00ea pode criar breadcrumbs usando HTML e CSS ou ativar plugins, se essas op\u00e7\u00f5es estiverem dispon\u00edveis no seu construtor de sites.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nVoc\u00ea tamb\u00e9m pode aprimorar ainda mais o SEO do seu site pesquisando \"schema markup para breadcrumbs\".\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">A implementa\u00e7\u00e3o de breadcrumbs tem uma fun\u00e7\u00e3o mais complexa do que apenas um aux\u00edlio \u00e0 navega\u00e7\u00e3o. \u00c9 uma ferramenta que permite aos usu\u00e1rios navegar pelo site com uma visualiza\u00e7\u00e3o mais clara de sua localiza\u00e7\u00e3o, mas se for um site pequeno, pode ser desnecess\u00e1rio. A integra\u00e7\u00e3o de breadcrumbs tem v\u00e1rias ramifica\u00e7\u00f5es potenciais, incluindo impactos na experi\u00eancia do usu\u00e1rio, acessibilidade e desempenho de SEO. Considerando que \u00e9 uma melhoria simples no site, as trilhas de breadcrumbs alteram a forma como os visitantes interagem com o seu site e o percebem.<\/p>","protected":false},"excerpt":{"rendered":"<p>Why is this navigational help called a breadcrumb? The term breadcrumb originated in the children&#8217;s fairy tale Hansel and Gretel, where the main characters throw breadcrumbs to the ground to mark their path and avoid getting lost in the woods. Likewise, breadcrumbs on a website allow the users to retrace their steps. What are the [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4159,"template":"","answers_category":[29],"class_list":["post-4139","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-navigation"],"acf":{"image":8094,"card_image":4159,"content":[{"acf_fc_layout":"header_section","title":"What is a Breadcrumb Trail?","descriptions":"A breadcrumb trail is a website navigational feature that allows users to see the sequence of pages visited to reach the current page.\r\n\r\n&nbsp;\r\n\r\nBreadcrumbs allow the user to understand their position within the structure of the website and enable easier access to previously viewed pages when navigating back,\u00a0 since it\u2019s typically used in large websites.","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Utilize breadcrumbs to lead people through the site and assist with navigation","body":""},{"label":"Use clear-cut, simple, and mobile responsive breadcrumbs","body":""},{"label":"Implement breadcrumbs to enhance the website navigation and SEO","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4159"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4139"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}