广州网站开发面包屑导航怎么做？页面路径与层级设计

客户从搜索结果直接点进一个详情页，既不知道这个页面属于哪个栏目，也不知道同栏目还有哪些内容，唯一的退路就是关掉页面。网站开发面包屑导航 解决的就是这两件事：告诉访客现在在哪一层，给一条往回走的近路。它占的版面只有一行，但对深层页面的跳出率影响很明显。

图：路标指示当前位置与来路，面包屑的作用与之相同

一、它解决什么问题

1、层级越深越必要

只有两层的站点，导航栏已经能表达全部结构，面包屑是锦上添花。三层以上的站点，尤其是产品中心下面还有多级分类的，面包屑就是必需品。

2、它是低成本的跳出率优化

访客点不点上级栏目，取决于他知不知道有这个栏目。面包屑把这条路径显式地摆在页面上，成本极低，收益明确。站点整体的层级规划在广州企业官网导航怎么设计里讲过，面包屑是它的一条补充路径。

3、搜索引擎也读它

面包屑会被识别为层级信号，配合结构化数据标记，搜索结果里可以直接展示路径。这一块和结构化数据是同一套工作，标记方式按公开的面包屑类型写即可。

二、网站开发面包屑导航的三种类型

按站点结构选类型，选错了反而添乱。

1、企业官网上位置型

多数企业官网的层级是固定的，用位置型最合适：从首页开始，逐级往下，最后一级是当前页。它稳定、可预期，改版时也好维护。

2、路径型要慎用

按访客实际来路生成的面包屑，同一个页面不同人看到的路径不一样，容易被判成内容不稳定。筛选维度多的电商站才需要考虑，企业官网不必用。

3、层级要和实际结构一致

面包屑里写的层级，必须和站点真实结构一致。为了好看把中间层省略，或者写出一个实际不存在的栏目，都会让访客点进去发现不对。

三、面包屑导航设计：四条实操规则

1、放在页面主体上方

面包屑的标准位置是导航栏下方、页面标题上方。放在页脚等于没有，访客滚到底部时已经不需要它了。

2、分隔符用单字符

用大于号或斜杠，全站统一。不要用竖线加箭头这类组合，也不要用图标字体——图标字体加载失败时会显示成乱码方块。

3、最后一级不做成链接

当前页这一级只显示文字，不做成可点链接。点了跳到自己，访客会以为页面出错。前面各级都要可点。

4、移动端可以截断

手机上放不下完整路径时，只保留上一级和当前页，中间用省略号。全部塞进去会把这一行挤成两行，反而影响阅读。多端的显示规则在响应式网站设计里有更细的说明，面包屑适用同一套处理。

四、常见错误

1、首页不需要面包屑

首页是层级的最顶端，放面包屑只会显示一个「首页」，没有意义。从第二层开始显示即可。

2、层级变动要同步更新

栏目改名、合并、调整层级之后，面包屑如果还是按旧结构生成，路径就是错的。栏目结构调整属于改版动作，在广州企业官网改版要点的检查清单里有对应项，改完要一并验证。

3、和内链是互补关系

面包屑解决的是「往回走」，正文内链解决的是「往前看」。两者作用不同，都要有。内链布局的方法在广州企业网站内链优化里讲过，可以和面包屑一起规划。

4、面包屑结构化数据 标记

按公开的面包屑类型给这一行加标记，搜索结果里有机会直接展示路径。标记里写的层级要和页面上显示的一致，不一致会被判为标记与内容不符。

延伸问答：网站层级路径 的常见疑问

1、面包屑会影响排名吗

直接影响很小，间接作用明显：它降低了跳出率、增加了内页之间的可达性，也让搜索引擎更容易理解层级。属于投入产出比很高的一项。

2、栏目很多时要不要全部显示

层级超过四层时，中间层可以折叠，只显示首层、上一级和当前页。展开全部会占满一行。

3、单页网站需要吗

不需要。单页站点没有层级，面包屑无从生成。有多个栏目页、详情页的站点才需要考虑。

总结：给访客一条回去的路

网站开发面包屑导航 的价值在于给直接进入深层页面的访客一个坐标和一条退路。位置型、放在标题上方、当前页不链接、移动端截断，这四条做到就够了。优诺网络做官网定制时把面包屑写进模板并按结构化数据标记，栏目调整时同步验证路径，避免出现点进去发现层级对不上的情况。这项配置属于网站建设服务交付时的常规项，验收时可逐页抽查。