導覽標記 (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)
選項 02：選擇「內部 / Inside Header」即代表出現在第一個頁首區域之內部。
選項 03：選擇「下方 / After Header」即代表出現在第一個頁首區域的下方。
選項 04：選擇「標題上方 / Before Title」即代表 每篇文章 / 頁面的 H1 標題 的上方。
區域二：導覽標記的來源數據 (Breadcrumb Source)
關於第三方 WordPress SEO 外掛提供的導覽標記來源，請參考他們官方的相關技術說明文件
Rank Math SEO
Yoast SEO
All in One SEO
Breadcrumb NavXT
如何使用短代碼 (Shortcode) 在呈現導覽標記？
[astra_breadcrumb]如果你是 WordPress 的進階使用者，對自己的操作非常有信心，你可以在合適的網頁位置插入以上的短代碼 (Shortcode)，建議位置例如資訊欄 (側邊欄)、頁首或頁尾位置，而且可以獨立彈性控制，不過如果是初學者就不建議使用短代碼置入的方式。
✅ 延伸閱讀：
Astra 佈景主題 | 如何使用短代碼 (Shortcode) 在呈現導覽標記？
分隔符號和對齊方式 | 管理網頁元件介面
區域一：3 個預設的分隔符號
區域二：自訂義分隔符號
區域三：對齊方式
管理導覽標記的顯示和出現設定 | 管理網頁元件介面
區域一：於首頁啟用
區域二：於網站文章 / 文章頁面啟用
區域三：於搜尋結果頁面啟用
區域四：於彙整頁面啟用
區域五：於單篇頁面啟用
區域六：於單篇文章啟用
區域七：於各式單篇內容啟用
區域八：於 404 頁面啟用
完整控制所有字型細節設定 | 管理字型介面
區域一：字型系列或家族 (Font Family)
區域二：字重 (Font Weight)
區域三：字型大小 (Font Size)
區域四：行高和字距 (Line Height and Gap)
區域五：裝飾性外觀 (Text Transformation)
調整文字色彩和格式化 | 管理文案介面
區域一：背景色彩
區域二：文字色彩
區域三：分隔符號色彩
區域四：內容連結色彩
區域五：間距
常見問題 FAQ
閱讀完以上教學，你將會學習得到以下知識和技能：
1. 了解導覽標記 (Breadcrumb) 是什麼？
2. 導覽標記能夠提升 SEO 成效
3. 前往新增和調整網站導覽標記 (Breadcrumb) 區域
4. 調整導覽標記出現的數據來源和版面位置
5. 分隔符號和對齊方式 | 管理網頁元件介面
6. 管理導覽標記的顯示和出現設定 | 管理網頁元件介面
7. 完整控制所有字型細節設定 | 管理字型介面
8. 調整文字色彩和格式化 | 管理文案介面
如何編輯 Astra 導覽標記 (Breadcrumb) 的流程？
✅ 快速進入 Astra 導覽標記 (Breadcrumb) 設定的捷徑：
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]
參考資料和引用文獻：
- Astra 佈景主題 | 官方網站
- Astra 佈景主題 | 如何新增導覽標記 (Breadcrumb)？
- Astra 佈景主題 | 如何簡易和快捷地新增導覽標記？
- Astra 佈景主題 | 如何使用短代碼 (Shortcode) 在呈現導覽標記？
- Breadcrumb NavXT 外掛
- Google 官方說明文件：導覽標記 (BreadcrumbList) 結構化資料
- Google 官方說明文件：結構化資料標記的運作方式簡介
- WordPress 官方網站主站 (英語)
- WordPress 官方網站分站 (繁體中文)
- 維基百科：Unicode 是什麼？
- 維基百科：Unicode 字元列表是什麼？
- 網站迷谷：全域色彩 (Global Colors) 控制和操作應用是什麼？
- 網站迷谷：全域字型排版樣式 (Global Typography) 操作應用是什麼？
- 網站迷谷：頁首編輯器 (Header Builder) 操作應用
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
學員人數：9,200+ 人 (持續增加之中)
