面包屑(Breadcrumb)是什么？

面包屑导览（Breadcrumb Navigation）是一种网站导航方式，通常位于页面顶部或内容区域上方，帮助使用者了解目前所在的位置以及如何返回上一层或首页。面包屑导览通常是阶层式显示网站结构，范例如下：

首页 > 产品分类 > 3C产品 > 手机

面包屑的由来

面包屑（Breadcrumb）的名称源自于童话故事《糖果屋》。故事中，汉赛尔与葛丽特在森林中迷路，为了找到回家的路，汉赛尔用面包屑标记回家的路径。这个概念被运用到网站设计中便是让使用者可以清楚地知道自己在网站中的位置，并轻松返回上一层。

面包屑对SEO很重要吗？

Breadcrumb对于SEO而言可以说是不可或缺的一部份，以下是面包屑对SEO的重要影响。

提升用户体验

面包屑导览能有效改善网站的用户体验。清晰的导航设计除了能让使用者能够快速理解网站结构以外，还能让他们轻松返回上一层页面，避免迷失于复杂的内容中，增加他们停留在网站的时间，并且防止他们因为在网站中迷路而跳出网站。

协助搜寻引擎

面包屑导览提供了完整的网站层级架构，能让搜寻引擎了解并且更快地索引网站中的各个页面，同时还能透过内部连结将权重传递至深层页面。

强化关键字布局

在面包屑中合理地插入关键字能帮助搜寻引擎理解内容主题，还能提升相关页面的关键字排名。例如，将产品分类或服务项目以关键字方式呈现在面包屑中，能够让搜寻引擎识别页面主题，增加曝光机会，还能够提升页面在搜寻引擎结果中的可见度与竞争力。

强化搜寻结果显示

透过设定结构化标记，面包屑导览可以直接显示在Google搜寻结果中，让使用者更容易理解网页结构，还能吸引用户点击。除此之外，网站内容还能够变得更加容易被搜寻引擎辨识，能够有效提升整体SEO效果。

面包屑有哪些类型？

根据面包屑上的不同阶层可以分为以下三种类型，可以根据自身需求选择合适的类型。

阶层型：

根据网站的阶层架构显示位置。例如：首页 > 部落格 > SEO优化 > 面包屑导览

属性型：

常用于电商网站，显示商品的属性分类。例如：首页 > 男装 > 衬衫 > 短袖 > 白色

路径型：

根据使用者的浏览历程显示。例如：首页 > 热门商品 > 特价活动

面包屑结构化标记

面包屑除了UI以外，还有结构化标记的部分。透过设定好面包屑结构化标记，搜寻引擎能够更好的理解网站的内容，以下是最常见也是Google最推荐的JSON-LD的设定方式范例。

< script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "BreadcrumbList",

"itemListElement": [

{ "@type": "ListItem", "position": 1, "name": "首页", "item": "https://www.example.com" },

{ "@type": "ListItem", "position": 2, "name": "部落格", "item": "https://www.example.com/blog" },

{ "@type": "ListItem", "position": 3, "name": "SEO优化", "item": "https://www.example.com/blog/seo" }

]

}

< /script>

制作面包屑有什么该注意的？

最后想要提醒大家注意一下在制作面包屑时的几个要点。

符合网站结构

：这是最重要的一点，如果面包屑导航不符合网站的架构，会导致用户和搜索引擎的混淆。

简洁明了

：面包屑上的字数建议不要太长，否则会导致用户阅读困难。

加入结构化标记

：结构化标记能够让搜索引擎更好地理解网站内容。

避免层级过多

：建议面包屑的层级不要超过4层，层级过多会增加搜索引擎的负担，因为链接太多。

检查网址

：避免因错误链接导致跳转至错误页面，同样会导致用户和搜索引擎的混淆。

需要撰写SEO文案吗？快来试试GenApe

GenApe是一款以SEO为核心设计的AI图文平台。其中的AI助手提供了许多能够减轻SEO人员工作量的工具。例如，AI文章生成器可以在短时间内快速生成文章。如果需要对现有的SEO文章进行优化，可以尝试AI文章改写。此外，如果你计划进军海外市场或有多语言需求，可以使用AI翻译工具。欢迎有需要的读者试用！

AI文章生成器：https://app.genape.ai/zh-TW/articleBetaVersion

AI文章改写：https://app.genape.ai/zh-TW/contentImproverV2

AI翻译：https://app.genape.ai/zh-TW/ai-translate