這篇文章最後更新日期：2024 年 5 月 10 日
作者： Mack Chan
導覽標記 (Breadcrumb) 是資訊型網站常見的實用功能，民間也常俗稱作 麵包屑 / 麵包屑導覽，它是一系列 [相關聯] 和 [有上下層級] 的頁面路徑，網站的訪客能夠閱讀路徑的關係，清晰地認知得到自己在網站的位置和定位。
Astra 佈景主題提供完整的相關功能，你可以自由地控制導覽標記出現的位置、導覽標記來源、分隔符號、對齊方式、條件式的顯示設定和文字外觀等等，所有的設定都統整在一個操作介面。
導覽標記的示範效果如下：
首頁 > 台灣 > 台北地區 > 九份
Google 官方說明文件：
導覽標記 (BreadcrumbList) 結構化資料
快速進入 Astra 導覽標記 (Breadcrumb) 設定的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]
你將會學習得到以下知識和技能：
- 了解導覽標記 (Breadcrumb) 是什麼？
- 導覽標記能夠提升 SEO 成效
- 前往新增和調整網站導覽標記 (Breadcrumb) 區域
- 調整導覽標記出現的數據來源和版面位置
- 分隔符號和對齊方式 | 管理網頁元件介面
- 管理導覽標記的顯示和出現設定 | 管理網頁元件介面
- 完整控制所有字型細節設定 | 管理字型介面
- 調整文字色彩和格式化 | 管理文案介面
導覽標記 (Breadcrumb) 是什麼？
以知名 Klook 旅遊介紹和訂票網站為例，他們的網站性質就非常適合啟用導覽標記 (Breadcrumb) 在每項服務和產品之上，加上他們的網站架構完整和脈絡清晰，你可以在每篇文章的上方發現相關的文章和頁面路徑的連結，你可以隨時決定返回上層的結構。
重要觀念：
關於更多導覽標記 (Breadcrumb) 的定義和描述，建議完整閱讀 Google 官方說明文件：導覽標記 (BreadcrumbList) 結構化資料，我們這篇教學不會深入描述這系列的觀念。
導覽標記能夠提升 SEO 成效
由於導覽標記是歸類在 Google 結構化資料標記 之一，你可以發現在 Google 的搜尋結果會出現相關的上下層結構和連結路徑，如果你正在需要這類的加強效果，建議啟用 WordPress 佈景主題 的相關設定，加強在 SEO 領域的競爭力。
前往新增和調整網站導覽標記 (Breadcrumb) 區域
快速進入修改和編輯 Astra導覽標記 (Breadcrumb) 的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]
調整導覽標記出現的數據來源和版面位置
區域一：導覽標記的頁首位置 (Breadcrumb Position)
選項 01：選擇「無 / None」即代表不使用導覽標記。
選項 02：選擇「內部 / Inside Header」即代表出現在第一個頁首區域之內部。
選項 03：選擇「下方 / After Header」即代表出現在第一個頁首區域的下方。
選項 04：選擇「標題上方 / Before Title」即代表 每篇文章 / 頁面的 H1 標題 的上方。
區域二：導覽標記的來源數據 (Breadcrumb Source)
Astra 佈景主題有 [預設的相關功能]，但你也可以透過其他外掛作為導覽標記的來源數據，下方列出一些支援的外掛。
關於第三方 WordPress SEO 外掛提供的導覽標記來源，請參考他們官方的相關技術說明文件
Rank Math SEO
Yoast SEO
All in One SEO
Breadcrumb NavXT
如何使用短代碼 (Shortcode) 在呈現導覽標記？
如果你是 WordPress 的進階使用者，對自己的操作非常有信心，你可以在合適的網頁位置插入以上的短代碼 (Shortcode)，建議位置例如資訊欄 (側邊欄)、頁首或頁尾位置，而且可以獨立彈性控制，不過如果是初學者就不建議使用短代碼置入的方式。
[astra_breadcrumb]
延伸閱讀：
Astra 佈景主題 | 如何使用短代碼 (Shortcode) 在呈現導覽標記？
分隔符號和對齊方式 | 管理網頁元件介面
區域一：3 個預設的分隔符號
分隔符號提供 3 種選擇，分別是「>」、「>>」和「/」，也是最常見的選擇。
區域二：自訂義分隔符號
如果認為預設的分隔符號不合適，可以輸入 Unicode 字元來取代，參照以下權威資訊來源。
維基百科：Unicode 是什麼？
維基百科：Unicode 字元列表是什麼？
區域三：對齊方式
對齊方式提供 3 種選擇，分別是「靠左對齊」、「置中對齊」和「靠右對齊」。
管理導覽標記的顯示和出現設定 | 管理網頁元件介面
區域一：於首頁啟用
首頁其實不需要使用這個導航功能，建議取消打勾。
區域二：於網站文章 / 文章頁面啟用
推薦使用於網站文章 (Post) / 文章頁面 (Page)。
區域三：於搜尋結果頁面啟用
推薦使用於搜尋結果頁面。
區域四：於彙整頁面啟用
推薦使用於彙整頁面。
區域五：於單篇頁面啟用
推薦使用於單篇頁面。
區域六：於單篇文章啟用
推薦使用於單篇文章。
區域七：於各式單篇內容啟用
不推薦使用，特殊的頁面不需要。
區域八：於 404 頁面啟用
404 頁面是網頁的錯誤頁面，其實不常見，所選不使用也可以。
完整控制所有字型細節設定 | 管理字型介面
區域一：字型系列或家族 (Font Family)
支援搜尋字體功能，貼上例如 Noto Sans TC 或 Noto Serif TC，就能套用推薦的思源黑體和思源宋體字體。參考 Astra 佈景主題教學 | 全域字型排版樣式 (Global Typography) 操作應用
區域二：字重 (Font Weight)
字文字重可以選擇 300，標題字重推薦 700，字體粗幼明顯和清晰。
區域三：字型大小 (Font Size)
調整字型大小的設定，可能參考市場上的網站作為基準，不同時代背景有差異。
區域四：行高和字距 (Line Height and Gap)
行高可以調整 [每行] 之間的留白，比例一般可以選擇 1.3 至 1.7，看那個設定比較舒服。字距一般保留預設值即可。
區域五：裝飾性外觀 (Text Transformation)
裝飾性的設定包括全部小寫 (Lowercase)、首字大寫 (Capitalize)、全部大寫 (Uppercase)、底線 (Under Line)、刪除線 (strikethrough) 等等。
調整文字色彩和格式化 | 管理文案介面
區域一：背景色彩
背景色彩建議保留預設值，即透明，除非你想強調這個區域，不然可能和網站的整體色彩規劃相衝突。
區域二：文字色彩
網站導覽標記裡主要的文字色彩，建議使用「比較明亮和鮮豔的色彩」，強調這個區域的重要性，參考 Astra 佈景主題教學 | 全域色彩 (Global Colors) 控制和操作應用。
區域三：分隔符號色彩
分隔符號色彩建議使用比較「低調的色彩」，和導覽標記主體形式對比色彩。
區域四：內容連結色彩
超連結有 2 個色彩選項，左方是超連結正常狀態的色彩，而右方是當網站訪客的遊標滑到超連結時出現的色彩。
區域五：間距
你可以控制導覽標記的上方、下方、左方或右方的間距距離，讓不同的物件有合適的空間，不會推疊在一起或混淆。
常見問題 FAQ
閱讀完以上教學，你將會學習得到以下知識和技能：
1. 了解導覽標記 (Breadcrumb) 是什麼？
2. 導覽標記能夠提升 SEO 成效
3. 前往新增和調整網站導覽標記 (Breadcrumb) 區域
4. 調整導覽標記出現的數據來源和版面位置
5. 分隔符號和對齊方式 | 管理網頁元件介面
6. 管理導覽標記的顯示和出現設定 | 管理網頁元件介面
7. 完整控制所有字型細節設定 | 管理字型介面
8. 調整文字色彩和格式化 | 管理文案介面
如何編輯 Astra 導覽標記 (Breadcrumb) 的流程？
✅ 快速進入 Astra 導覽標記 (Breadcrumb) 設定的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]
參考資料和引用文獻：
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
