面包屑导航的5个最佳实践

Trevin是WebFX业务发展高级总监.他参与了450多个营销活动,并在20多年的时间里创建了网站。他的作品被搜索引擎之地,今日美国,快速公司和公司推荐。

面包屑是一个网站的微妙元素,有助于提高可用性和导航.它们是一种很少得到认可的实用工具;然而,面包屑可以产生很大的影响,并提供大量的好处,如降低反弹率,提高转化率,提高用户满意度。

"}" data-sheets-userformat="{"2":4737,"3":{"1":0},"10":2,"12":0,"15":"Arial"}" data-sheets-formula="="
C[-2]&" thumbnail= '"&R[0]C[-1]&"']"">

想象你在一家普通的杂货店里,只是少了一些东西。所有的过道标志都不见了!

要想找到香蕉或面包,唯一的办法就是走遍每一个通道。没有直接的路径。路径是面包屑的全部。

它们通常在有很多分类和页面的网站的标题下面,如电子商务网站。运动装备网站上的面包屑可能是这样的,如果我们是在足球球衣部分:主场>体育>足球>球衣“家庭”、“体育”和“足球”这些词都是可点击的链接,将我们带到相应的部分。下面是一个来自亚马逊时尚店的真实例子: 亚马逊面包屑面包屑不应该与主标题混淆。

他们是一个二次导航选项,通常位于主标题下方,在任何给定页面的内容上方。它们的字体尺寸通常较小,在8-12px范围内。如果你的网站只有几页,面包屑很可能是一个不必要的功能。

但如果你有几十、数百或数千页,面包屑就像天赐的礼物。一个好主意是让用户来测试你的网站,看看他们是否会迷路或困惑。面包屑可以帮助可能是潜在买家的用户高效地找到产品、服务或类别。

在实现面包屑之前,有几件事需要记住,以确保我们确实在改善用户体验。

1.属性和路径控制

面包屑有两种主要的样式。第一个是基于属性,这意味着面包屑由规格、品牌、尺寸和颜色等信息组成。本质上,我们选取典型的过滤器选项,并将它们列在面包屑中。

这通常用于产品所在的电子商务商店很容易从它们的属性中辨别出来.例如,我们在计算机部件零售商NewEgg上看到了这个实现: newegg_attribute_based_navigation另一方面,路径采用了一种更具层次性的方法,其中类别向下漏斗到右侧。这延续了我们之前讨论的足球球衣的例子。

2.页面和内容分类

实现面包屑还要求我们确保页面和内容以逻辑方式组织。浏览页面、服务和项目以确保最终页面(用户可以在此购买产品、阅读评论、查看照片等)不属于多个类别。

根据您的产品数据库的大小,很容易出现这样的情况:产品被交叉引用的类别“有点意义”,但不可避免地会让用户感到困惑。

3.清晰地划分每个关卡

用来区分面包屑的层次的常用符号是>符号。这表示一个方向,可以说是最符合逻辑的用法。还有其他一些变化也同样有效和有帮助,例如:

  • >>(大于号的双位数)
  • ?(长箭头)
  • /(反斜杠)
  • //(双反斜杠)

可能引起混淆的符号包括:

  • |(单个分隔符)
  • …(椭圆)
  • :或;(冒号或分号)

4.为购物者意图启用面包屑链接和设计页面

这是一种利用面包屑来降低弹跳率的战略方法。从本质上说,除了最终的产品或服务页面外,我们把每个面包屑都变成了一个链接。当用户单击此链接时,他们通常会被带到该层次结构下列出产品或服务的页面。

例如: 耐克面包屑在Nike.com上,当我们点击“鞋子”面包屑时,它会以随机顺序将我们带回到完整的鞋子列表: 耐克2这是大多数电子商务网站遵循的格式;但是,可以根据购物者的意图来设计这些分段页面。由于购物者正在从产品页面回溯到区域页面,我们可能会假设他们不满意或需要更多信息。然后,我们可以在一个区域页面上创建一个行动号召,要么提供一个激励措施,比如对该区域内所有产品的折扣,要么提供一个通知,让用户知道我们的实时聊天功能只需点击一下。

5.基于搜索者意图计划分类

面包屑最重要的方面之一是他们与搜索引擎优化的关系。由于面包屑的实现,我们强迫自己为用户和搜索者对每个产品进行战略性分类。这意味着我们的类别和产品也由我们想在搜索引擎中排名的关键词组成。

网站层次结构实际上显示在搜索结果中,并且谷歌的搜索算法关注我们的面包屑导航.搜索结果将是以下内容的变体: 搜索引擎面包屑虽然面包屑看起来像是一个谨慎的网络元素,但实际上它们与我们的底线息息相关。你有没有注意到面包屑在其他网站上的独特应用?

请在下面的评论中告诉我们。

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!