網站面包屑導航正確設置方法（兼顧用戶體驗 + SEO）
面包屑（Breadcrumb）是頁面上方的路徑導航，作用：告訴用戶當前在網站哪個位置、方便返回上級；給搜索引擎?zhèn)鬟f頁面層級關系，可獲得搜索結果里的面包屑富摘要展示。
一、基礎結構規(guī)范（推薦層級）
首頁 > 一級分類 > 二級分類 > 當前頁面
- 層級控制：最多 3～4 級，不要過長，超過 4 級用戶和爬蟲可讀性變差
- 分隔符：用
>通用；也可用/、?，不要用圖片做分隔符（搜索引擎識別困難） - 文字規(guī)則
- 文字簡短，和導航欄、頁面標題保持一致，不要隨便造別名
- 最后一項（當前頁）不加鏈接，只做純文本；前面所有層級都加可點擊超鏈接
- 首頁固定文字：首頁 / Home，不要寫長標題
? 示例：首頁 > 減速機 > 硬齒面減速機 > 平行軸硬齒面減速機
- 首頁、減速機、硬齒面減速機：可點擊鏈接
- 平行軸硬齒面減速機：純文本，不可點
二、三種面包屑類型，優(yōu)先選【位置型面包屑】
- 位置面包屑（SEO 首選）：展示網站欄目層級（推薦，適合企業(yè)站、產品站、資訊站）
- 路徑面包屑：記錄用戶瀏覽歷史，不推薦做主要面包屑；用戶來回跳轉時路徑混亂，搜索引擎不推薦
- 屬性面包屑：按篩選條件（規(guī)格、顏色），適合電商篩選頁，不能替代位置面包屑
制造業(yè)官網、營銷型建站，只用位置面包屑。
三、HTML 代碼 + Schema 結構化數據（核心，獲取搜索結果富文本）
1. HTML 結構示例
<nav aria-label="面包屑導航">
<ol>
<li><a href="/">首頁</a></li>
<li><a href="/jiansuji/">減速機</a></li>
<li><a href="/jiansuji/yingchimian/">硬齒面減速機</a></li>
<li>平行軸硬齒面減速機</li>
</ol>
</nav>
- 標簽：用
<nav aria-label="面包屑導航">+<ol>有序列表，符合語義化 - aria 標簽提升無障礙訪問，手機、讀屏設備友好
2. BreadcrumbList 結構化數據（必須加，百度 / 谷歌識別）
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "WebPage",
"@id": "shturl.cc/BXCiA9",
"name": "首頁"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "WebPage",
"@id": "shturl.cc/BXCiA9jiansuji/",
"name": "減速機"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "WebPage",
"@id": "shturl.cc/BXCiA9jiansuji/yingchimian/",
"name": "硬齒面減速機"
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"@type": "WebPage",
"@id": "shturl.cc/XwPoWdN9l8vdoa1mx8DqSPWI100EyfKfu72bqJTkCGPO",
"name": "平行軸硬齒面減速機"
}
}
]
}
</script>
要點：
position序號從 1 依次遞增- 最后一項也要寫，
@id填當前頁面 URL - 放到頁面 head 或者 body 底部都可以；每個內頁都獨立部署
四、頁面布局與 UI 設置規(guī)則
- 位置：頁面標題上方，banner 下方，全站統(tǒng)一位置；不要放頁腳
- 移動端：保留面包屑，字體縮小，自動換行，不要隱藏（很多建站模板移動端直接刪掉面包屑，損失 SEO）
- 鏈接樣式：和正文鏈接區(qū)分，顏色淺一點，不要和主標題一樣醒目；不做加粗、大字號
- 不要重復：面包屑不要和主導航完全重復，只做路徑輔助
五、常見錯誤（一定要避開）
? 當前頁面也加鏈接（會出現自鏈，爬蟲迷惑） ? 層級超過 5 級，路徑冗長 ? 用圖片、Flash、JS 動態(tài)渲染面包屑，無靜態(tài)文本 ? 用瀏覽歷史作為面包屑，層級亂跳 ? 全站面包屑寫死，所有頁面路徑一模一樣 ? 缺少 Breadcrumb 結構化數據，無法觸發(fā)搜索面包屑展示 ? 分類名稱和面包屑文字不一致（欄目叫 “斜齒輪減速機”，面包屑寫 “齒輪減速器”） ? 404 頁面、單頁、聯系我們這種獨立頁面強行套多層面包屑
獨立單頁（關于我們、聯系我們）：
首頁 > 關于我們兩級即可
六、適配不同網站場景建議
- 企業(yè)產品站（減速機這類）：首頁 > 產品大類 > 產品小類 > 產品詳情，3~4 級，必加 Schema
- 資訊 / 博客站：首頁 > 新聞中心 > 行業(yè)資訊 > 文章標題
- 單頁官網：簡單兩級面包屑即可
- 多語言站點：面包屑文字隨語言切換，結構化數據 name 同步翻譯
七、校驗工具
- 百度：百度資源平臺 - 結構化數據測試工具
- Google：富媒體結果測試工具 粘貼頁面 URL 或代碼，檢測 Breadcrumb 有沒有報錯
