面包屑（Breadcrumb）是什么？功能、类型、SEO重要性与WordPress设定教学

浏览网站时，你可能在页面最上面看过像「首页 ＞ 部落格 ＞ SEO知识 ＞ 麵包屑」这种路径，这就是网站常见的「麵包屑」导览列。

麵包屑虽然只佔页面一小块，但它能让访客一眼就知道自己现在在网站哪个位置，想回上一层分类也能直接点，不用一直按上一页。同时，它也能帮助搜寻引擎搞懂你网站的分类架构和页面之间的关联。

如果你的网站文章很多、产品分类很杂，或是页面层级设得比较深，那好好规划麵包屑不只让使用者逛起来更顺，也是网站架构和技术SEO里很重要的一环。

〈延伸阅读：SEO是什么？SEO行销初学者必看，快速学会SEO基础〉

麵包屑是什么？

麵包屑英文叫Breadcrumb，也有人叫它麵包屑导览、麵包屑导航或路径导览，讲白一点，就是一层一层的连结，让你一眼就知道现在看的这个页面，在网站里面到底是摆在哪个位置。

常见的呈现方式就像这样：
首页 ＞ SEO知识 ＞ 网站架构 ＞ 麵包屑是什么

逛网站的人只要直接点一下前面的分类名称，就可以马上跳回上一层，不用再特地回去开主选单，也不用一直猛按浏览器的返回键。

「麵包屑」这个名字其实是从童话故事《糖果屋》来的，故事里主角沿路丢麵包屑做记号，这样才知道怎么走回家。网站上的麵包屑也是类似的概念，就是帮使用者搞清楚自己现在人在网站的哪个分类、哪一层里面。

Google有支援一种叫BreadcrumbList的结构化资料，可以用来标示页面在网站阶层中的位置，帮助搜寻引擎更清楚辨识首页、分类页、子分类跟内容页之间的关係。

〈参考资料：导览标记 (BreadcrumbList) 结构化资料〉

麵包屑的主要功能有哪些？3大作用让网站导览更清楚

麵包屑不光是让你知道现在在哪一页而已，它还能帮使用者搞清楚位置、快速跳回上一层，顺便把网站内容跟内部连结串在一起。下面整理了麵包屑的3大功能，带你了解它是怎么让浏览体验跟网站架构变得更好用的。

显示使用者目前所在位置

使用者不一定会从网站首页进来，也可能透过Google搜寻结果、社群贴文或外部连结，直接跳到某篇文章、商品页或服务页。这时候麵包屑就能马上显示这个页面属于哪个分类，让使用者一眼搞懂网站架构，减少在网站里迷路的状况。

举例来说，当使用者进到一篇「网站速度优化」的文章时，可以透过像「首页 ＞ SEO优化 ＞ 技术SEO ＞ 网站速度优化」这样的麵包屑，很快知道自己现在落在哪个分类底下。

〈延伸阅读：什么是反向连结? SEO一定要做外部连结吗？〉

提供返回上层页面的捷径

使用者看完文章或商品后，通常会想继续逛逛同一分类的其他内容。这时麵包屑就派上用场了，可以直接点一下回到上一层分类，不用再特地开主选单或重新从首页慢慢找，操作路径变短，逛起来也更顺手。

串联网站分类与内容

麵包屑里面的首页、分类页、子分类通常都会加上连结，所以它其实也形成了一个稳定的内部连结架构。当文章页连回分类页，分类页再串起多篇相关文章时，搜寻引擎会更容易发现你的网站内容，同时也能引导使用者继续看更多相近主题的文章，对使用者体验和SEO都有帮助。

麵包屑、主选单、导览列有什么差异？

麵包屑、主选单和导览列虽然都有网站导览的功能，但各自的使用目的其实不太一样。一般来说，导览列是整个网站导览功能的区块，里面可能包含Logo、主选单、搜寻功能和联络按钮；主选单则是提供网站主要页面的入口，让访客可以直接连到那些重点页面。麵包屑比较像是辅助性质的导览工具，主要用途是告诉使用者目前这个页面在网站里面是落在哪个层级。

不同网站对于「导览列」和「主选单」这两个称呼可能多少有点出入，但有一点要记住，就算网站已经设定好麵包屑，它还是没办法完全取代主要导览选单该做的工作。

麵包屑、主选单、导览列差异比较

麵包屑有哪些类型？3种常见导览方式一次看懂

依照网站架构跟使用情境的不同，常见的麵包屑设计大致可以分成阶层式、属性式和路径式3种类型。每一种适用的网站不太一样，像是企业网站、内容网站或电商平台，适合的麵包屑形式也不同，还会影响使用者怎么逛网站、怎么理解页面层级。

阶层式麵包屑

阶层式麵包屑会依照网站原本的分类架构，直接显示目前页面落在哪个位置，例如：

首页 ＞ 部落格 ＞ SEO优化 ＞ 麵包屑

这是现在最常见的麵包屑类型，很适合企业网站、部落格、媒体网站跟一般电商网站。阶层式麵包屑的路径通常是固定的，可以清楚呈现页面之间的上下层关係，对搜寻引擎理解网站架构也比较有帮助。

属性式麵包屑

属性式麵包屑会根据商品或内容的特徵来显示，常见于有多种筛选条件的电商网站，例如：

首页 ＞ 女鞋 ＞ 运动鞋 ＞ 白色 ＞ 24公分

这种麵包屑可以呈现商品的品牌、尺寸、颜色、价格或其他属性，让使用者知道自己目前套用了哪些筛选条件，也能快速回到上一层的商品分类。不过要留意的是，如果网站把不同属性跟筛选条件的组合都产生出独立网址，而且这些页面又被搜寻引擎抓到的话，就可能跑出一堆内容相近的页面。所以这种情况下，还需要搭配rel="canonical"标记、索引管理跟筛选页面的规划，避免那些重複性高或搜寻价值偏低的页面被大量索引。

〈延伸阅读：重複内容影响SEO成效， 如何正确使用Canonical？〉

路径式麵包屑

路径式麵包屑会依照使用者实际点击的顺序来显示，例如从搜寻页进到分类页，再点进商品页。不过因为每个人的浏览路径都不太一样，而且功能其实跟浏览器的返回键差不多，所以比较少被当作网站主要的麵包屑设计。大多数网站还是建议优先採用阶层式麵包屑，让所有使用者和搜寻引擎看到的都是同一套稳定的网站层级结构。

麵包屑在Google搜寻结果中如何呈现？

当网站有加入BreadcrumbList结构化资料之后，Google就有可能在电脑版搜寻结果的可见网址中，显示网站网域加上麵包屑路径，帮忙使用者判断这个页面属于哪个分类，示意大概会像这样：

da-vinci.com.tw ＞ SEO知识 ＞ 麵包屑

另外，Google在2025年1月23日有宣布更新搜寻结果的呈现方式，目前行动版搜寻结果的可见网址只会显示网站网域，不再显示麵包屑路径；电脑版搜寻结果则维持不变，还是会显示网域加上麵包屑。虽然行动搜寻结果上看不到麵包屑了，但网站前台手机版的麵包屑还是有确认位置跟返回上层分类的导览功能，并不会受到影响。

〈参考资料：简化行动搜寻结果中的可见网址元素〉

麵包屑对SEO有什么帮助？3大价值完善网站架构

麵包屑不是那种可以直接让排名往前冲的密技，但它能帮搜寻引擎搞懂网站的层级、增加相关页面之间的串联，同时也让使用者逛起来更顺，整体来说能让网站的SEO架构更稳固。

帮助搜寻引擎理解网站架构

麵包屑会把首页、分类页、子分类到内容页之间的层级关係一一标示出来，等于帮搜寻引擎画了一张网站的架构图，让它一看就懂这些页面是怎么上下串联的。举例来说，如果某篇文章的麵包屑是「首页 ＞ SEO优化 ＞ 架构优化 ＞ 麵包屑」，搜寻引擎就能清楚判断这个页面是落在SEO优化底下的网站架构主题里面，而不是一篇跟其他内容八竿子打不着的独立页面。

〈延伸阅读：好的SEO网站架构是什么？这样做SEO成功率才会高！〉

增加网站内部连结

麵包屑里面的每一层分类通常都会加上连结，所以可以增加内容页跟分类页之间的串联。这些固定出现在页面上的连结，不只对搜寻引擎爬取相关内容有帮助，也能把使用者引导到其他相近主题的页面。不过要留意的是，麵包屑的名称还是要以自然、清楚为主，不需要为了SEO硬塞一堆关键字。举例来说，使用「网站架构」会比「最完整专业网站SEO架构优化教学」来得清楚好懂，使用者一看就知道是什么。

〈延伸阅读：网站连结优化怎么做？让Google看懂你的SEO〉

改善使用者体验

当使用者从搜寻结果直接进到网站内页时，麵包屑可以马上告诉他现在在哪个位置，也能让他直接返回相关分类继续逛。这项功能对电商网站、知识型网站、大型企业网站，还有产品或文章数量比较多的网站来说特别实用，能有效缩短操作路径，让网站逛起来更顺手更方便。

〈延伸阅读：网页设计的使用者体验(UX)如何执行？〉

网站麵包屑怎么设定？ 7步骤完成操作与检查

设定网站麵包屑的时候，除了要先规划清楚的页面层级，也要同时顾好连结设定、手机版显示跟结构化资料这几个环节。以下整理7个操作步骤，帮你建立一套好浏览、也方便搜寻引擎理解的网站导览架构。

1. 规划网站层级

设定麵包屑之前，建议先整理好网站的首页、主分类、子分类跟内容页之间的关係，例如：

首页 ＞ 部落格 ＞ SEO知识 ＞ 技术SEO ＞ 结构化资料

过程中尽量避免页面层级卡太深，也不要把同一个页面塞进好几个没有直接关係的分类里面，免得使用者和搜寻引擎都搞混。

2. 放在主选单与H1标题之间

麵包屑通常会放在网站主选单的下面、页面H1标题的上方。这个位置的好处是，使用者进到页面后可以马上知道自己现在在哪一层，但又不会挡到主要内容的阅读。

3. 使用简短明确的名称

每一层的名称最好简短又好懂，避免用太长的名称或硬塞一堆关键字进去。分隔符号可以用「＞」、「／」或箭头图示，但建议整个网站统一用同一种样式，看起来比较一致。

4. 设定可点击的上层连结

一般来说，首页、分类页跟子分类都会加上连结，让使用者可以直接点回去上层页面。最后一层代表的是使用者目前所在的页面，通常不用再加连结，可以透过文字颜色或粗细来跟前面可点击的项目做区隔，让访客一看就知道哪里可以点、哪里只是显示目前位置而已。

5. 调整手机版显示方式

手机画面就那么窄，要是麵包屑层级太多，很容易换行或佔掉一大块画面。可以看网站状况考虑几种做法：像是不影响理解的前提下只留最近一两层、让麵包屑可以左右滑、用省略号把中间层级收起来，或是把太长的名称缩短一点。在简化视觉呈现的同时，还是要让使用者找得到自己现在在哪、能顺利点回上层，结构化资料也得乖乖对应好网站实际的架构，不能乱掉。

6. 加入BreadcrumbList结构化资料

除了在网站前台显示麵包屑之外，也可以加入BreadcrumbList结构化资料，帮助搜寻引擎读取每一层的名称、顺序跟网址。Google有支援JSON-LD、Microdata跟RDFa等格式，其中JSON-LD通常比较好维护。每个ListItem通常需要设定：

• position：目前项目在麵包屑中的顺序
• name：显示的层级名称
• item：该层级对应的网址

依照Google的规范，一组BreadcrumbList至少要有2个ListItem。如果最后一层代表的是使用者目前所在的页面，那这一层的item网址可以省略不填。

〈参考资料：Schema.org: BreadcrumbList〉
〈延伸阅读：结构化资料是什么？对关键字排名有帮助吗？〉

7. 测试与监控设定结果

设定好之后，记得用Google複合式搜寻结果测试工具检查一下程式码有没有出错，同时也可以到Google Search Console看一下麵包屑的结构化资料有没有跳出无效项目或需要调整的地方。另外，如果网站后续有换布景主题、SEO外挂、分类架构或网址，也别忘了再把麵包屑的设定从头检查一遍，确定一切正常没跑掉。

WordPress网站如何设定麵包屑？

部分WordPress布景主题已经有内建麵包屑功能，可以先到「外观＞自订」、「外观＞编辑器」或布景主题专属的设定页面里面，确认一下有没有提供麵包屑的开关选项。如果布景主题本身没有内建这项功能，也可以透过SEO外挂或专门的麵包屑外挂来设定。

使用Yoast SEO设定麵包屑

进入WordPress后台后，依序前往：Yoast SEO ＞ 设定 ＞ 进阶 ＞ 麵包屑

开启麵包屑功能以后，就可以设定分隔符号、首页名称、分类显示方式跟内容类型这些项目。如果目前使用的布景主题还没有跟Yoast的麵包屑整合好，可以透过Yoast的麵包屑区块、短代码[wpseo_breadcrumb]或主题版型程式码，把麵包屑放到网站前台显示。

〈参考资料：Yoast SEO：Breadcrumbs设定说明〉

使用Rank Math设定麵包屑

先用Rank Math的话，要确认Schema模组已经启用，然后把操作介面切换到进阶模式，再依序前往：Rank Math SEO ＞ 一般设定 ＞ 麵包屑

开启功能之后，可以调整分隔符号、首页名称、分类显示方式，还有要不要显示文章标题。设定完成之后，可以透过短代码[rank_math_breadcrumb]、主题版型程式码或相容的页面编辑器，把麵包屑显示在网站前台。

〈参考资料：Rank Math：如何启用Breadcrumbs〉

使用Breadcrumb NavXT设定

Breadcrumb NavXT是专门处理麵包屑的WordPress外挂，很适合需要自己调整文章类型、分类法或显示格式的网站。安装并启用以后，可以透过区块、小工具或主题程式码来显示麵包屑。这边要特别提醒一下，如果网站的布景主题跟SEO外挂都能产生麵包屑的话，建议只保留其中一种来源就好，避免前台重複显示，或是同时输出多组内容不一致的结构化资料。

〈参考资料：WordPress.org: Breadcrumb NavXT〉

麵包屑常见问答

Q1. 每个网站都一定要设定麵包屑吗？

不一定，如果你的网站页面不多、分类很单纯，或者整个网站就只有一两层架构，那麵包屑能帮上的忙确实有限。但如果你的网站文章很多、商品很杂、服务项目一大堆，或者分类层级拉得比较深，那就会建议还是把麵包屑设定起来会比较好。

Q2. 麵包屑可以直接提升SEO排名吗？

麵包屑并不会保证让网站排名直接往上冲，但它能帮助搜寻引擎搞懂网站层级、建立内部连结，同时改善使用者的导览体验，算是网站技术SEO跟架构优化里面很重要的一块。

〈延伸阅读：SEO排名因素有哪些？ 47个要点一次看完！〉

Q3. 设定麵包屑后，Google一定会显示吗？

不一定，就算BreadcrumbList结构化资料通过测试，也不代表Google一定会显示麵包屑，最后到底会不会出现，还是要看Google根据搜寻情境、页面内容跟系统综合判断的结果。

正确设定麵包屑，完善网站SEO架构

麵包屑看起来好像只是页面上方一小段不起眼的连结，但实际上它串联了网站的分类、内容架构、内部连结跟使用者动线。在设定麵包屑之前，建议先整理好网站的分类、网址层级跟页面之间的关係，然后再确认前台显示、手机版设计跟BreadcrumbList结构化资料有没有保持一致。

如果网站本身的分类就已经乱七八糟，那就算加了麵包屑，也只是把原本的架构问题直接摊在页面上而已。如果你的网站分类比较複杂、不确定麵包屑设定得对不对，或是Google Search Console一直跳出结构化资料的问题，欢迎联络达文西数位科技。达文西可以从网站架构、技术SEO、内部连结跟使用者体验这些面向帮你检查，协助网站建立一套更清楚、更好逛，也更容易被搜寻引擎理解的导览架构。

(本文为达文西数位科技所有，禁止转载图文)