添加 WordPress 麵包屑的基本指南

已發表: 2021-11-26
WordPress 麵包屑

想要降低跳出率、改善網站導航、提升 SEO 並提供出色的用戶體驗? 你當然知道!

但是,如果您不使用麵包屑作為您網站的一部分,那麼您將錯失良機。 麵包屑通過幫助用戶更輕鬆地瀏覽您的網頁(通過“麵包屑”的踪跡)來增強站點導航。

您可能多次遇到麵包屑。 它們通常出現在站點導航菜單的下方。 網站麵包屑示例

資料來源:dedoles.se

今天,我們將分享我們的重要提示和技巧,以幫助您將 WordPress 麵包屑添加到您的網站並開始改善這些用戶體驗。

什麼是麵包屑?

忘記金黃酥脆,新鮮烤製或panko。 這些麵包屑可能非常美味,但這不是我們今天要討論的內容。 不,我們是來討論在線麵包屑的,這是一種功能性更強(且不易食用)的食物。

麵包屑本質上是一個導航鏈接。 連接麵包屑以創建通過網站頁面的文本路徑。 它們跟踪用戶在網站上相對於主頁的位置,通常位於頂部,就在導航欄的下方。

麵包屑導航通過讓用戶更容易回溯他們的導航來改善您網站的用戶體驗(UX)。 他們還通過幫助搜索引擎瀏覽您的網頁和鏈接結構來支持 SEO 排名(稍後會詳細介紹)。

了解不同的麵包屑是如何工作的

出於多種原因,可以將麵包屑應用於網站。 例如,對於在 WordPress 中構建的網站,可以將三種類型的麵包屑合併到網站的導航中。 這些是基於層次結構的、基於屬性的和基於歷史的。

基於層次結構的麵包屑

這些是您的經典麵包屑。 基於層次結構的麵包屑向網站用戶顯示他們在您網站的整體結構中相對於主頁的位置。 這使訪問者可以輕鬆瀏覽類別並找到相關產品。

基於屬性的麵包屑

這些麵包屑最常作為電子商務網站的一部分被發現。 基於屬性的麵包屑列出了用戶為訪問他們正在查看的產品或頁面而搜索的屬性。

例如,假設您正在瀏覽一家在線時裝店。 有時,您可能會被要求根據產品屬性(例如合身、款式、顏色、尺寸)細化您的搜索。 您選擇的屬性將構成您的麵包屑路徑。

基於屬性的麵包屑

圖片來源

基於歷史的麵包屑

這些麵包屑是按時間順序排列的。 它們是根據您在網站上的操作進行排序的。 基於歷史的麵包屑引導用戶通過他們已經瀏覽過的頁面返回。 這些麵包屑的作用有點像瀏覽器上的“返回”按鈕,可幫助用戶返回他們已經訪問過的頁面。

麵包屑的好處

麵包屑對於網站的用戶體驗和搜索引擎優化非常有用。 因此,許多內容營銷服務正在推廣麵包屑的好處,作為強大的數字營銷策略的一部分。

麵包屑允許用戶更輕鬆地瀏覽網站,並幫助搜索引擎爬蟲了解網站的內容。 這意味著提高搜索引擎排名、降低跳出率和更好的用戶體驗。

訪問者的網站導航更容易,這意味著跳出率更低

作為網站訪問者,沒有什麼比發現您已導航到您一點也不感興趣的產品頁面更煩人的了。此時,您可能想做兩件事中的一件。

  • 彈回搜索引擎並重新開始。
  • 返回主頁並嘗試找到您要查找的頁面。

通過將麵包屑添加到您的網站,用戶將不太傾向於反彈,並且會發現更容易找到他們正在尋找的內容。 麵包屑允許網站訪問者輕鬆跟踪他們的用戶旅程并快速找到他們想要的頁面。

網站爬蟲可以更輕鬆地對正確的頁面進行排名

麵包屑通過向搜索引擎傳達網站頁面的內容來提升網站 SEO。 谷歌實際上在搜索片段中使用了網站的名稱和麵包屑路徑,這意味著當谷歌顯示結果列表時,這是您首先看到的內容之一。 這反過來又可以幫助搜索者看到點擊後他們將被帶到哪裡。

例如,如果您搜索“什麼是麵包屑?” 在 Google 中,您的搜索結果會列出每個網站的 URL、麵包屑和標題。

麵包屑和搜索引擎優化

將麵包屑添加到 WordPress 網站的三種方法

那麼,您究竟是如何將麵包屑添加到您的 WordPress 網站的呢? 好吧,您可以選擇幾條不同的路線。 我們將逐步引導您完成各種方法。

選擇一個已經包含麵包屑的 WordPress 主題

將麵包屑添加到 WordPress 網站的最直接方法是安裝已包含它們的主題。 如果你能找到一個與你的品牌非常吻合併且也有方便的麵包屑的,那麼嘿,你準備好了。

通過自定義代碼實現麵包屑

將麵包屑添加到 WordPress 網站的另一種方法是通過自定義代碼實現它們。 假設您在 WordPress 上找到了一個主題,但它不包含麵包屑。 有了一些基本的編碼經驗,您可以通過在您選擇的主題上編輯 function.php 文件來自己添加它們。

這是您需要做的:

  1. 使用 FileZilla FTP 等 FTP 站點將 WordPress 連接到您的服務器
  2. 單擊 FileZilla 客戶端中的 public_html 文件夾(這包括您網站的文件)。 在 FileZilla 客戶端中選擇 public_html 文件夾
  3. 單擊 wp-content 文件夾。
  4. 單擊主題目錄並選擇您當前的主題文件夾。
  5. 單擊functions.php 文件夾,然後選擇查看/編輯。
  6. 插入下面的代碼以在您的網站上註冊麵包屑功能。 WordPress 麵包屑代碼
  7. 出現提示時保存更改並上傳更新的文件。

使用插件添加麵包屑。

將麵包屑添加到 WordPress 網站的第三種也是最後一種方法是使用插件。 您需要使用專業工具來執行此操作,例如 Yoast SEO、Breadcrumb NavXT 或 WooCommerce Breadcrumbs 插件。

使用 Yoast SEO 插件

Yoast 是WordPress 最著名的 SEO 插件之一,可用於在您的網站上啟用麵包屑。 如果您已經在使用 Yoast 進行 SEO,那麼這是您最好的選擇,儘管還有其他可用選項(我們稍後會討論)。

要使用 Yoast 添加麵包屑,請執行以下步驟:

  1. 從您的 WordPress 儀表板安裝 Yoast SEO 插件,即插件 > 添加新 > 在搜索欄中輸入“Yoast”> 安裝。
  2. 在 Yoast 插件中,導航到外觀。
  3. 點擊主題編輯器。
  4. 選擇名為 header.php 的模板。
  5. 在下面插入代碼片段。 Yoast 麵包屑代碼片段
  6. 單擊“更新文件”保存更改。

使用 Breadcrumb NavXT 插件

使用 Yoast 的另一個替代方法是 Breadcrumb NavXT。 這個插件可以像 Yoast 一樣安裝在您的網站上。 安裝後,只需按照以下步驟實現麵包屑。

  1. 在 NavXT 插件中導航到設置。
  2. 單擊麵包屑導航導航。 WordPress 麵包屑插件
  3. 從四個麵包屑導航選項中進行選擇。
  4. 配置插件並保存更改。
  5. 導航到外觀。
  6. 點擊主題編輯器。
  7. 選擇 header.php 文件。
  8. 插入下面的代碼。 麵包屑代碼
  9. 單擊更新文件。

使用 Woocommerce 麵包屑插件

最後,如果您是 Woocommerce 用戶,您可以使用 Woocommerce Breadcrumbs 插件將麵包屑功能添加到您的網站。

這是您需要做的:

  1. 在您的 WordPress 網站上安裝 Woocommerce Breadcrumbs 插件。
  2. 導航到設置。
  3. 單擊 WC 麵包屑。
  4. 勾選旁邊的框以啟用麵包屑。
  5. 單擊保存更改

woocommerce 麵包屑

資料來源:fixrunner.com

使用 CSS 自定義 WordPress 麵包屑

您可以通過應用自定義 CSS 來設置麵包屑的樣式以匹配您網站的獨特樣式。 如果您自己編寫麵包屑,則需要考慮您所追求的美學。

為此,您需要添加自定義 CSS 以在現有主題樣式表或 WordPress 定制器中設置麵包屑樣式。 在這裡,您將能夠對麵包屑進行設計調整,包括調整字體、顏色、邊距、圖標和邊框。

從您的網站中刪除麵包屑的兩種方法

麵包屑在幫助網站導航和SEO 增長方面具有明顯的優勢,但並不是每個人都喜歡包含它們。 如果您決定要刪除網站的麵包屑,有兩種方法可以做到這一點。

切換禁用開關

刪除麵包屑的第一種方法是簡單地切換插件中的開關以禁用麵包屑或完全停用插件。

刪除手動輸入的代碼

另一種選擇是刪除手動輸入的代碼。 只需返回站點的 header.php 文件夾並刪除將麵包屑添加到站點的代碼行。

留下麵包屑的痕跡

麵包屑是任何網站的絕佳補充。 它們幫助用戶瀏覽您的網頁和搜索引擎爬蟲,以更好地了解您的內容。

更重要的是,將麵包屑合併到您的網站中非常簡單。 一些 WordPress 模板甚至包含麵包屑。

如果您還沒有麵包屑,您還在等什麼?