面包屑导航的设置方法和作用

面包屑导航是网站重要的组成部分，通过网站中的面包屑导航可以更清晰的表现出网站的结构性，在浏览内容时，可以防止用户走丢的情况发生，对于网站优化而言，面包屑导航可以促进搜索引擎对网站结构的分析，促进搜索引擎的站内权重传递和新内容的抓取速度，提升网站收录量。

什么是面包屑导航?

面包屑导航(Breadcrumb Navigation)来源于一个美丽的通话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。网站中的面包屑导航通常不在首页中出现，而是在分类目录、页面、内容页等地方出现，通过面包屑导航可以非常清晰的了解网站结构，例如一内容页的面包屑导航“首页>>分类目录一>>内容标题”，通过这个面包屑导航可以清晰的看出当前内容是在分类目录一里，如果你想要查看更与当前内容相关的内容，可以点击面包屑导航里分类目录一的链接进入分类列表进行浏览。

面包屑导航的作用

1.提升客户体验度，用户在浏览网页时可以通过面包屑导航清晰的了解目前所在的网站位置，并可以通过面包屑导航链接快速的返回各个层级，方便用户获取更多的网站信息，防止在站内“迷路”，并且可以更好的帮助用户理解当期页面与其他页面之间的关系。

2.有助于提升SEO效果，使得搜索引擎在抓取网站内容时更容易发现网站的结构化数据，对网站中各个页面的权重进行传递，更快速的发现网站新产出的内容，促进网站的抓取速度和收录量，一些实现“秒收录”的网站通常会有非常好的面包屑导航，通过分析网站数据，许多被搜索引擎抓取的内容，通常来自于历史抓取内容的页面链接传递，这也证明面包屑导航对网站优化而言的重要性。

为你的网站设置面包屑导航

如果你的网站使用WP(wordpress)、DeDeCMS、帝国等建站CMS程序，那么你可以使用面包屑导航插件，轻而易举的为网站设置面包屑导航，但如果你的网站是自己开发，那么则需要你联系建站公司，要求为网站设置面包屑导航，当然如果你懂程序，也可以自行开发和设置。

面包屑导航HTML代码

<nav aria-label="Breadcrumb" class="breadcrumb">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Category</a></li>
        <li><a href="">Sub-Category</a></li>
        <li><span aria-current="page">Product</span></li>
    </ul>
</nav>

面包屑导航CSS代码

.breadcrumb ul {
    display: flex;
}
.breadcrumb li::before {
    content: "→";
}
.breadcrumb li:first-child::before {
    content: "";
}