導航列

在頁面加入麵包屑路徑、控制顯示位置，並讓可見導覽路徑與 breadcrumb schema 保持一致。

概覽

導航列 可幫助訪客理解目前頁面位於網站結構中的哪個位置，也能讓搜尋引擎更清楚地理解階層關係。

你可以在 Airygen SEO -> 設定 -> 導航列 進行設定。

這個模組特別適合具有父層頁面、分類彙整頁、搜尋結果頁，或內容層級較深且需要讓使用者回溯的網站。

輸出方式

導航列 同時支援手動放置與自動插入內容。

手動輸出

當你希望自行決定顯示位置時，請開啟 啟用手動導航列輸出。

  • 當你希望把麵包屑放進主題模板時，請使用 範本函式。
  • 當你希望把麵包屑放進文章內容、簡碼區塊或其他支援簡碼的區域時，請使用 簡碼。
  • 當你希望在區塊編輯器中以可視方式放置麵包屑時，請使用 區塊。

範本函式：

<?php if ( function_exists( 'airygen_the_breadcrumbs' ) ) { airygen_the_breadcrumbs(); } ?>

簡碼：

[airygen_breadcrumbs]

區塊：

<!-- wp:airygen/breadcrumb /-->

自動插入

當你希望 Airygen SEO 自動把麵包屑插入主要內容區時，請開啟 啟用自動導航列插入。

  • 插入位置 可讓你選擇將麵包屑放在 內容前 或 內容後。
  • 當你希望大量文章都使用一致的麵包屑位置時，自動插入會更方便。
  • 當你需要在主題或頁面版面中精準控制麵包屑位置時，手動放置會更適合。

如果你同時啟用手動輸出與自動插入，請務必仔細檢查正式頁面，避免麵包屑重複出現兩次。

設定

此頁面分為 設定、版面配置 與 預覽。

設定 分頁

這個分頁用來決定麵包屑如何顯示，以及路徑中包含哪些項目。

輸出控制

  • 啟用手動導航列輸出 會開啟麵包屑使用的 範本函式、簡碼 與 區塊 片段。
  • 啟用自動導航列插入 會依照你選擇的位置，把麵包屑插入文章內容中。
  • 插入位置 用來控制自動輸出出現在 內容前 或 內容後。

階層

這些控制項會決定麵包屑鏈中顯示多少結構資訊。

  • 顯示首頁連結 會讓路徑從首頁標籤與首頁網址開始。
  • 在彙整頁顯示文章頁連結 會在網站使用固定文章頁時，於彙整項目前插入文章頁連結。
  • 顯示上層頁面 會為頁面與階層式自訂文章類型加入父層頁面。
  • 隱藏分類法上層項目 會在你希望路徑更精簡時，移除分類與分類法路徑中的父層項目。
  • 顯示目前頁面 會把目前頁面加入為最後一個麵包屑項目，也會影響 JSON-LD 導航列清單。
  • 顯示分頁 會在分頁彙整頁後方附加目前頁碼。
  • 分隔符號 用來定義麵包屑項目之間顯示的符號。
  • 前綴 可在麵包屑前方加入文字，例如簡短的「你目前在這裡」提示。

標籤

這些欄位可讓麵包屑文案更符合你的網站語氣。

  • 首頁標籤 可更改首頁麵包屑的文字。
  • 彙整標籤 可更改彙整頁使用的標籤文字。
  • 搜尋結果標籤 可更改搜尋結果頁顯示的標籤文字。
  • 404 標籤 可更改找不到頁面時顯示的文案。

版面配置 分頁

這個分頁用來調整麵包屑容器與路徑文字的樣式。

容器樣式

  • 邊框寬度 可調整麵包屑容器邊框粗細。
  • 邊框顏色 可調整邊框顏色。
  • 內距 可調整路徑周圍的內距。
  • 容器背景色 可調整麵包屑後方背景色。

路徑樣式

  • 字級 可調整麵包屑文字大小。
  • 文字顏色 可調整非連結文字顏色。
  • 連結顏色 可調整麵包屑連結顏色。
  • 連結底線 可開啟或關閉連結底線。

如何使用

  1. 開啟 Airygen SEO -> 設定 -> 導航列。
  2. 在 設定 分頁中，決定你要使用 啟用手動導航列輸出、啟用自動導航列插入，或只保留一種主要輸出方式。
  3. 如果你要在主題層級放置麵包屑，請開啟 啟用手動導航列輸出，並把 範本函式 片段貼到麵包屑應出現的模板位置。
  4. 如果你要在編輯器層級放置麵包屑，請保持 啟用手動導航列輸出 為開啟，並在內容區插入 簡碼 或 區塊。
  5. 如果你要自動放置麵包屑，請開啟 啟用自動導航列插入，並選擇最適合內容版面的 插入位置。
  6. 在 階層 中，設定是否顯示首頁連結、彙整頁文章連結、父層頁面、目前頁面與分頁資訊。
  7. 設定容易閱讀的 分隔符號 與可選的 前綴，讓麵包屑更符合網站語氣。
  8. 在 標籤 中，自訂首頁、彙整頁、搜尋與 404 頁面的文字。
  9. 開啟 版面配置，調整容器邊框、內距、顏色與路徑文字樣式，讓麵包屑更符合主題設計。
  10. 開啟 預覽，在 筆記型電腦、平板電腦 與 手機 間切換，並在儲存前檢查範例路徑。
  11. 儲存設定後，在正式網站上測試文章頁、彙整頁、搜尋頁與 404 頁。

儲存後請在正式網站確認以下項目：

  • 每個位置的麵包屑只出現一次。
  • 可見路徑符合你希望使用者理解的頁面階層。
  • 只有在開啟 顯示目前頁面 時，目前頁面才會顯示在路徑中。
  • 主題 CSS 載入後，正式頁面樣式仍然正確。

預覽與正式輸出

預覽 分頁會依照你目前的樣式設定顯示簡化版的麵包屑範例。

  • 預覽包含 筆記型電腦、平板電腦 與 手機 裝置切換器。
  • 預覽會反映你目前的邊框、間距、顏色與文字設定。
  • 畫面也會顯示產生的 HTML 與 CSS 範例，方便你檢查範例結構。

正式網站看起來仍可能與預覽不同。

  • 真正的麵包屑路徑會依據實際頁面類型、父層結構、分類法路徑，以及搜尋或 404 情境而改變。
  • 最終外觀仍可能受到啟用中的主題、自訂 CSS 與周邊頁面版型影響。
  • 如果你同時使用手動放置與自動插入，正式頁面可能會出現重複路徑，即使預覽看起來很乾淨。

儲存後，請實際檢查真實文章、真實彙整頁、搜尋結果頁與 404 頁，確認前台可見路徑與 schema 行為正確。

SEO 效益

麵包屑能讓搜尋引擎更容易理解頁面階層，也能幫助訪客從較深層的內容快速回到上層區域，而不必依賴瀏覽器返回鍵。

它也讓從搜尋進站的頁面更容易被探索，尤其適合具有分類樹、彙整頁與多層內容路徑的網站。

使用情境

具有多層主題結構的內容網站

調整前：網站有分類、子分類與長篇系列文章，但讀者無法清楚回到更上層的主題頁。

調整後：導航列 顯示回到上層區域的路徑，讓文章之間的關係更容易理解，也更方便導覽。

擁有深層商品分類的 WooCommerce 或目錄型網站

調整前：使用者從搜尋進入較深層的商品頁或分類頁，卻無法立刻理解該頁在整體目錄中的位置。

調整後：導航列 持續顯示分類路徑，讓使用者能直接回到更大的商品集合，而不必重新開始瀏覽。

想為多個客戶網站統一結構的代理商

調整前：每個網站都用不同方式處理麵包屑位置，導致導覽與 schema 行為很難保持一致。

調整後：導航列 讓代理商可以在同一個地方管理位置、標籤與版面，同時依每個網站選擇手動輸出或自動插入。

常見問題

我該用手動輸出還是自動插入？

當你需要在模板或內容區精準控制位置時，請使用手動輸出。當你希望大量文章都固定插入同一位置時，請使用自動插入。

如果麵包屑出現兩次，我該怎麼辦？

請檢查你是否同時開啟 啟用自動導航列插入，又在同一頁放入 簡碼、區塊 或 範本函式。該位置只保留你真正需要的一種輸出方式即可。

為什麼預覽和正式頁面不完全一樣？

預覽只是你目前樣式設定的簡化呈現。正式輸出仍會受到真實頁面階層、目前查詢條件與主題 CSS 影響。