{"id":3646,"date":"2024-07-19T16:55:36","date_gmt":"2024-07-19T16:55:36","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=3646"},"modified":"2025-12-05T15:36:32","modified_gmt":"2025-12-05T15:36:32","slug":"quais-sao-outros-tipos-de-navegacao-de-sites","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/quais-sao-outros-tipos-de-navegacao-de-sites\/","title":{"rendered":"Quais s\u00e3o os outros tipos de navega\u00e7\u00e3o em sites?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#what-is-a-breadcrumb-navigation\">O que \u00e9 navega\u00e7\u00e3o por breadcrumbs?<\/a><\/li><li><a href=\"#what-is-a-sidebar-navigation\">O que \u00e9 uma navega\u00e7\u00e3o lateral?<\/a><\/li><li><a href=\"#what-is-the-difference-between-breadcrumb-navigation-and-a-sitemap\">Qual \u00e9 a diferen\u00e7a entre navega\u00e7\u00e3o por breadcrumbs e um mapa do site?<\/a><ul><li><a href=\"#what-are-the-different-types-of-breadcrumbs\">Quais s\u00e3o os diferentes tipos de breadcrumbs?<\/a><\/li><\/ul><\/li><li><a href=\"#how-do-breadcrumbs-help-in-improving-seo\">Como os breadcrumbs ajudam a melhorar o SEO?<\/a><\/li><li><a href=\"#are-breadcrumbs-good-for-accessibility\">Os breadcrumbs s\u00e3o bons para acessibilidade?<\/a><\/li><li><a href=\"#when-should-you-use-breadcrumbs\">Quando voc\u00ea deve usar breadcrumbs?<\/a><\/li><li><a href=\"#what-factors-should-i-consider-when-choosing-website-navigation\">Quais fatores devo considerar ao escolher a navega\u00e7\u00e3o do site?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-a-breadcrumb-navigation\" style=\"font-size:32px\">O que \u00e9 navega\u00e7\u00e3o por breadcrumbs?<\/h2>\n\n\n\n<p style=\"font-size:18px\">A navega\u00e7\u00e3o por breadcrumb mostra o caminho que os usu\u00e1rios percorreram desde sua p\u00e1gina inicial at\u00e9 a p\u00e1gina em que est\u00e3o. Normalmente, voc\u00ea a ver\u00e1 em sua p\u00e1gina como um fluxo de links que s\u00e3o formados horizontalmente.&nbsp;<\/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-is-a-sidebar-navigation\" style=\"font-size:32px\">O que \u00e9 uma navega\u00e7\u00e3o lateral?<\/h2>\n\n\n\n<p style=\"font-size:18px\">A navega\u00e7\u00e3o lateral aparece no lado esquerdo ou direito de um site. \u00c9 semelhante ao menu na parte superior de uma p\u00e1gina, mas a principal diferen\u00e7a \u00e9 que ela \u00e9 vertical. Alguns sites t\u00eam o menu vis\u00edvel o tempo todo, mas outros o ocultam e permitem que os usu\u00e1rios o tornem vis\u00edvel.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">O objetivo principal da navega\u00e7\u00e3o lateral \u00e9 que os usu\u00e1rios possam pular para diferentes p\u00e1ginas ou se\u00e7\u00f5es. Alguns temas e modelos de sites t\u00eam widgets de navega\u00e7\u00e3o lateral integrados, mas voc\u00ea pode ter que instalar plugins em outros casos.&nbsp;<\/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-is-the-difference-between-breadcrumb-navigation-and-a-sitemap\" style=\"font-size:32px\">Qual \u00e9 a diferen\u00e7a entre navega\u00e7\u00e3o por breadcrumbs e um mapa do site?<\/h2>\n\n\n\n<p style=\"font-size:18px\">A navega\u00e7\u00e3o por breadcrumbs mostra como os usu\u00e1rios chegaram \u00e0 p\u00e1gina mais recente. Os mapas do site, por outro lado, aparecem mais no backend (voc\u00ea tamb\u00e9m precisa enviar um mapa do site para classificar no Google).&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Mapas do site s\u00e3o uma vis\u00e3o geral das p\u00e1ginas do seu site. No mapa do site, voc\u00ea encontrar\u00e1 suas p\u00e1ginas, posts do blog e, em muitos casos, URLs de imagens.&nbsp;<\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"what-are-the-different-types-of-breadcrumbs\" style=\"color:#422b82;font-size:22px\">Quais s\u00e3o os diferentes tipos de breadcrumbs?<\/h3>\n\n\n\n<p style=\"font-size:18px\">Existem tr\u00eas tipos principais de breadcrumbs:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Baseado em localiza\u00e7\u00e3o<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Baseado em atributo<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Baseado em caminho<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Voc\u00ea provavelmente j\u00e1 viu breadcrumbs baseados em localiza\u00e7\u00e3o em sites que visitou. Em um blog, por exemplo, pode ser algo assim:&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Home \/ Viagens \/ Destinos \/ Europa \/ It\u00e1lia \/ Roma&nbsp;&nbsp;<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Enquanto isso, voc\u00ea pode ver breadcrumbs de atributo ap\u00f3s selecionar filtros espec\u00edficos. Por exemplo, se voc\u00ea estiver comprando uma camisa nova, poder\u00e1 ser algo assim:&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>M \/ Amarelo \/ Casual \/ Manga Longa&nbsp;<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Breadcrumbs baseados em caminho mostram toda a jornada que os usu\u00e1rios fizeram para chegar \u00e0 p\u00e1gina atual, mas geralmente s\u00e3o mais confusos do que os baseados em localiza\u00e7\u00e3o. Enquanto os breadcrumbs baseados em localiza\u00e7\u00e3o mostram apenas o caminho percorrido para clicar na p\u00e1gina espec\u00edfica, os baseados em caminho mostram toda a jornada.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Usando o exemplo acima, os breadcrumbs baseados em caminho podem ter a seguinte apar\u00eancia:&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>In\u00edcio \/ Viagens \/ Estilo de vida \/ Viagens \/ Destinos \/ Europa \/ EUA \/ Nova York \/ \u00c1sia \/ Jap\u00e3o \/ T\u00f3quio&nbsp;<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Na maioria dos casos, voc\u00ea deve se concentrar em breadcrumbs baseados em localiza\u00e7\u00e3o em vez de breadcrumbs baseados em caminho.&nbsp;<\/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-do-breadcrumbs-help-in-improving-seo\" style=\"font-size:32px\">Como os breadcrumbs ajudam a melhorar o SEO?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os mecanismos de busca usam breadcrumbs para entender como as p\u00e1ginas de um site s\u00e3o dispostas e os links internos tamb\u00e9m s\u00e3o considerados. Breadcrumbs tamb\u00e9m podem impactar as convers\u00f5es e a experi\u00eancia geral do usu\u00e1rio (UX).&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Breadcrumbs melhoram o SEO, fornecendo aos mecanismos de busca informa\u00e7\u00f5es claras sobre a estrutura e a hierarquia de conte\u00fado de um site. Eles tamb\u00e9m criam links internos, o que pode aumentar a visibilidade de p\u00e1ginas individuais nos resultados de pesquisa.<\/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=\"are-breadcrumbs-good-for-accessibility\" style=\"font-size:32px\">Os breadcrumbs s\u00e3o bons para acessibilidade?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Ferramentas usadas por pessoas com defici\u00eancia, como leitores de tela e outras ferramentas de assist\u00eancia, podem usar breadcrumbs para navega\u00e7\u00e3o no site. Os usu\u00e1rios tamb\u00e9m podem navegar para p\u00e1ginas anteriores atrav\u00e9s de breadcrumbs, se necess\u00e1rio.&nbsp;<\/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=\"when-should-you-use-breadcrumbs\" style=\"font-size:32px\">Quando voc\u00ea deve usar breadcrumbs?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Voc\u00ea deve usar breadcrumbs em sites com v\u00e1rias p\u00e1ginas e tipos de conte\u00fado, como sites de com\u00e9rcio eletr\u00f4nico com se\u00e7\u00f5es de blog. Se um site for menos focado em um nicho, breadcrumbs tamb\u00e9m devem ser considerados.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Os tipos de sites que usam breadcrumbs incluem:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Sites de not\u00edcias&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Blogs&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Revistas e publica\u00e7\u00f5es online&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li>Sites com mais de 100 p\u00e1ginas&nbsp;<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">\u00c9 menos comum para sites menores, como <a href=\"https:\/\/hocoos.com\/pt\/products\/website-builder-for-small-business\/photography-website-builder\/\" data-type=\"URL\" data-id=\"https:\/\/hocoos.com\/products\/website-builder-for-small-business\/photography-website-builder\/\">sites de portf\u00f3lio<\/a>, para usar breadcrumbs.&nbsp;<\/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-factors-should-i-consider-when-choosing-website-navigation\" style=\"font-size:32px\">Quais fatores devo considerar ao escolher a navega\u00e7\u00e3o do site?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Considere a estrutura do site ao escolher a navega\u00e7\u00e3o do site e avalie o comportamento do seu p\u00fablico-alvo para encontrar as p\u00e1ginas a destacar. Voc\u00ea tamb\u00e9m deve pensar na responsividade entre dispositivos.&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Estrutura:<\/strong> A navega\u00e7\u00e3o deve se ajustar ao site que voc\u00ea usa. Por exemplo, \u00e0s vezes voc\u00ea pode n\u00e3o precisar usar barras laterais e apenas os cabe\u00e7alhos podem fazer mais sentido.&nbsp;<\/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>P\u00e1ginas Principais:<\/strong> Pense nas p\u00e1ginas para as quais voc\u00ea deseja direcionar tr\u00e1fego, como postagens de blog espec\u00edficas e formul\u00e1rios de contato.&nbsp;<\/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>P\u00fablico:<\/strong> Analise o comportamento do seu p\u00fablico ao navegar em seu site e fa\u00e7a testes A\/B nos layouts das p\u00e1ginas.&nbsp;<\/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>Responsividade:<\/strong> Otimize seu site para desktop e celular. Teste as p\u00e1ginas quanto ao tempo de carregamento e layout.&nbsp;&nbsp;<\/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=\"conclusion\" style=\"font-size:32px\">Conclus\u00e3o<\/h2>\n\n\n\n<p style=\"font-size:18px\">Considere diferentes fatores de navega\u00e7\u00e3o do site ao projetar seu site. Use breadcrumbs em sites com mais p\u00e1ginas e pense em menus suspensos onde voc\u00ea tem diferentes subcategorias.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Pense nos tipos de conte\u00fado para os quais voc\u00ea deseja que seus usu\u00e1rios naveguem e como eles chegar\u00e3o l\u00e1. Como seu site e seus objetivos s\u00e3o diferentes dos de outras pessoas, voc\u00ea ter\u00e1 que experimentar coisas diferentes e ver como seu p\u00fablico interage.<\/p>","protected":false},"excerpt":{"rendered":"<p>What is a breadcrumb navigation? Breadcrumb navigation shows the path that users have taken from your homepage to whichever page they\u2019re on. You will normally see it on your page as a stream of links that are formed horizontally.&nbsp; What is a sidebar navigation? Sidebar navigation appears on the left or right-hand side of a [&hellip;]<\/p>","protected":false},"author":39,"featured_media":3647,"template":"","answers_category":[29],"class_list":["post-3646","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-navigation"],"acf":{"image":7580,"card_image":3647,"content":[{"acf_fc_layout":"header_section","title":"Quais s\u00e3o os outros tipos de navega\u00e7\u00e3o em sites?","descriptions":"Beyond standard horizontal menus and footers, websites use various navigation methods to guide their visitors more efficiently.\r\n\r\nThe main ones are:\r\n\r\n<strong>\u2022 Breadcrumb navigation<\/strong>\r\n\r\n<strong>\u2022 Sidebar navigation<\/strong>\r\n\r\nYou should make it easy for visitors to explore site content by considering both.","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Breadcrumb navigation","body":"Use breadcrumb navigation to show where users should go within your website for SEO purposes."},{"label":"Sidebar navigation","body":"Use the sidebar to share links to essential pages on your website."},{"label":"On-site features","body":"Enable dropdown and mega menus. Implement in-page navigation on sites with a lot of content."}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/3646","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\/3647"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=3646"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=3646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}