麵包屑導覽標記，英文為 Breadcrumbs，意思是網站上常見的一種導覽使用者介面 (User Interface, UI)，用途是顯示當前頁面的位置路徑和上下文關係，使用戶更容易了解他們在網站上的位置和導航 (Navigation) 到其他相關頁面。
這種麵包屑導覽標記通常位於網頁的頂部，由一系列連結組成，每個連結都代表了用戶從網站首頁到當前頁面的路徑。例如，一個簡單的麵包屑導覽標記可能顯示為：
首頁 > 產品 > 手機 > iPhone在這個例子中，用戶可以點擊任何一個連結，返回上一層或回到首頁。
麵包屑導覽標記不僅可以提供良好的用戶體驗，還可以幫助搜索引擎理解網站結構和內容之間的關係，有助於提高網站的搜索引擎排名。
撰寫麵包屑導覽標記的 HTML 可以按照以下步驟進行：
下面是一個簡單的麵包屑導覽標記的 HTML 範例：
<div class="breadcrumb">
<ol>
<li><a href="/">首頁</a></li>
<li><a href="/products">產品</a></li>
<li><a href="/products/phones">手機</a></li>
<li><a href="/products/phones/iphone">iPhone</a></li>
</ol>
</div>
在這個例子中，麵包屑導覽標記包含四個列表項目，每個列表項目都是一個超連結，用戶可以點擊超連結返回上一層或回到首頁。你可以根據需要自定義樣式和屬性來更改麵包屑導覽標記的外觀和功能。
如果想要讓麵包屑導覽標記呈現在 Google 搜尋頁上，你會需要使用 Google 規範的結構化資料 BreadcrumbList 語法。如果你還不知道什麼是結構化資料，你可以先參考這篇：結構化資料是什麼？SEO 關鍵字排名優化技巧分析與教學。使用結構化資料實作麵包屑導覽標記，即時就算不在網站上呈現給訪客對應的麵包屑 UI，只要能夠被 Google 偵測到結構化資料也會生效！
下面是一個結構化資料顯示的案例：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首頁",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "產品",
"item": "https://example.com/products"
},
{
"@type": "ListItem",
"position": 3,
"name": "手機",
"item": "https://example.com/products/phones"
},
{
"@type": "ListItem",
"position": 4,
"name": "iPhone"
}
]
}
</script>
想在 WordPress 內加入麵包屑導覽標記，你可以安裝並啟用一個適合的 WordPress 麵包屑導覽標記外掛。有許多 WordPress 麵包屑導覽標記外掛可供選擇，知名的有 Yoast SEO、Rank Math、All in One SEO、Breadcrumb NavXT、Breadcrumb Trail 等。這些外掛安裝完後通常會偵測你的主題模板並帶入相對應的麵包屑標記。
如果你不確定該如何在你的網站內加入麵包屑導覽標記，請不要猶豫，立即聯繫集客數據行銷 Inbound Asia。集客數據行銷 Inbound Asia 是一家專精於多種行銷策略計畫的公司。透過工具精準分析數據，提供專業的執行操作，協助企業提高品牌聲量和產品流量，最終促進營收成長。我們堅信，透過精準的行銷策略計畫和執行，任何企業都能在競爭激烈的市場中脫穎而出。我們擁有豐富的經驗和專業知識，能夠幫助企業建立強大的品牌，並在市場中獲得成功。
