fbpx
黑色星期五 (Black Friday) 優惠整理

Astra 佈景主題教學 | 如何新增導覽標記 (Breadcrumb)?

導覽標記 (Breadcrumb) 是資訊型網站常見的實用功能,民間也常俗稱作 麵包屑 / 麵包屑導覽,它是一系列 [相關聯] 和 [有上下層級] 的頁面路徑,網站的訪客能夠閱讀路徑的關係,清晰地認知得到自己在網站的位置和定位。

Astra 佈景主題提供完整的相關功能,你可以自由地控制導覽標記出現的位置、導覽標記來源、分隔符號、對齊方式、條件式的顯示設定和文字外觀等等,所有的設定都統整在一個操作介面。

📝 導覽標記的示範效果如下:
首頁 > 台灣 > 台北地區 > 九份

✅ Google 官方說明文件:
導覽標記 (BreadcrumbList) 結構化資料

✅ 快速進入 Astra 導覽標記 (Breadcrumb) 設定的捷徑:
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]


瀏覽 Astra 佈景主題
完整教學系列指南目錄

你將會學習得到以下知識和技能:

  • 了解導覽標記 (Breadcrumb) 是什麼?
  • 導覽標記能夠提升 SEO 成效
  • 前往新增和調整網站導覽標記 (Breadcrumb) 區域
  • 調整導覽標記出現的數據來源和版面位置
  • 分隔符號和對齊方式 | 管理網頁元件介面
  • 管理導覽標記的顯示和出現設定 | 管理網頁元件介面
  • 完整控制所有字型細節設定 | 管理字型介面
  • 調整文字色彩和格式化 | 管理文案介面

導覽標記 (Breadcrumb) 是什麼?

導覽標記 (Breadcrumb) 是什麼?
導覽標記 (Breadcrumb) 是什麼?
導覽標記 (Breadcrumb) 是什麼?
導覽標記 (Breadcrumb) 是什麼?

以知名 Klook 旅遊介紹和訂票網站為例,他們的網站性質就非常適合啟用導覽標記 (Breadcrumb) 在每項服務和產品之上,加上他們的網站架構完整和脈絡清晰,你可以在每篇文章的上方發現相關的文章和頁面路徑的連結,你可以隨時決定返回上層的結構。

重要觀念:
關於更多導覽標記 (Breadcrumb) 的定義和描述,建議完整閱讀 Google 官方說明文件:導覽標記 (BreadcrumbList) 結構化資料,我們這篇教學不會深入描述這系列的觀念。


導覽標記能夠提升 SEO 成效

導覽標記能夠提升 SEO 成效
導覽標記能夠提升 SEO 成效
導覽標記能夠提升 SEO 成效
導覽標記能夠提升 SEO 成效

由於導覽標記是歸類在 Google 結構化資料標記 之一,你可以發現在 Google 的搜尋結果會出現相關的上下層結構和連結路徑,如果你正在需要這類的加強效果,建議啟用 WordPress 佈景主題 的相關設定,加強在 SEO 領域的競爭力。


前往新增和調整網站導覽標記 (Breadcrumb) 區域

前往新增和調整網站導覽標記 (Breadcrumb) 區域
前往新增和調整網站導覽標記 (Breadcrumb) 區域
前往新增和調整網站導覽標記 (Breadcrumb) 區域
前往新增和調整網站導覽標記 (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 個色彩選項,左方是超連結正常狀態的色彩,而右方是當網站訪客的遊標滑到超連結時出現的色彩。

區域五:間距
你可以控制導覽標記的上方、下方、左方或右方的間距距離,讓不同的物件有合適的空間,不會推疊在一起或混淆。


瀏覽 Astra 佈景主題
完整教學系列指南目錄

常見問題 FAQ

閱讀完以上教學,你將會學習得到以下知識和技能:

1. 了解導覽標記 (Breadcrumb) 是什麼?
2. 導覽標記能夠提升 SEO 成效
3. 前往新增和調整網站導覽標記 (Breadcrumb) 區域
4. 調整導覽標記出現的數據來源和版面位置
5. 分隔符號和對齊方式 | 管理網頁元件介面
6. 管理導覽標記的顯示和出現設定 | 管理網頁元件介面
7. 完整控制所有字型細節設定 | 管理字型介面
8. 調整文字色彩和格式化 | 管理文案介面

如何編輯 Astra 導覽標記 (Breadcrumb) 的流程?

✅ 快速進入 Astra 導覽標記 (Breadcrumb) 設定的捷徑:
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [導覽標記]

參考資料和引用文獻:

我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

WordPress 學員人數
12,000+ 人 (持續增加之中)

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

發表您的留言