為什麼以及如何添加 Elementor 麵包屑以改善您的網站導航

麵包屑是您的網站路徑指示器，主要位於您網站的頂部。 它還顯示了您網站的用戶旅程，並確保更好的網站導航和更好的可抓取性。

麵包屑作為您網站的導航功能，它們可以對您網站的 SEO 產生重大影響。

但是，您會發現大量網站沒有實施麵包屑導航，這是一個巨大的錯誤。 或者他們實現了它，但不關心設計或位置。

發生這種情況主要是因為他們在網站上顯示麵包屑時遇到了麻煩，此外，他們不知道實施它們的正確方法。

如果您有一個由 Elementor 提供支持的網站並正在尋找添加麵包屑的最終解決方案，那麼您來對地方了。

在本博客中，我們將向您展示如何使用 Elementor 麵包屑小部件向您的網站添加麵包屑功能。 我們還將向您展示添加麵包屑的其他一些方法，並討論有關麵包屑的必要注意事項。

在你走之前，讓我們談談在你的網站上放置麵包屑的重要性。

為什麼考慮將麵包屑添加到您的 Elementor 網站

您可能知道 Google 在搜索結果中顯示麵包屑並使用麵包屑對搜索結果中的信息進行分類。 由此，您可能會猜到麵包屑對您的網站有多重要。

每個網站所有者都希望他們的訪問者在他們的網站上停留很長時間。 添加麵包屑可能是改善網站用戶體驗的好方法。 請記住，用戶總是喜歡那些易於使用、結構良好且速度快的網站類型。

事實上，大多數搜索引擎都會特別注意那些有麵包屑的網站類型。

麵包屑分為三種，

• 基於層次結構的麵包屑：這向用戶顯示了他們在站點中的位置。 例如：首頁 > 博客 > WordPress 指南

• 基於屬性的麵包屑：這主要用於電子商務網站，以顯示用戶點擊了哪些屬性。 例如：首頁 > 鞋子 > 男士

• 基於歷史的麵包屑：向用戶顯示他們訪問過的網站上的其他頁面。 例如：首頁 > Elementor文章 1 > Elementor文章 2 > 當前頁面。

您可以在您的網站上使用它們中的任何一個。 不僅如此，使用麵包屑還可以為您帶來更多優勢，例如，

• 提升用戶體驗
• 提高網站排名
• 添加 SEO 好處
• 降低跳出率
• 確保正確導航。

因此，既然您知道在您的網站上實現麵包屑的重要性，讓我們開始了解如何使用 Elementor 麵包屑小部件添加麵包屑。

將 Elementor 麵包屑添加到您的網站的 2 種方法

在我們博客的以下部分中，您將學習如何通過兩種簡單的方式將麵包屑添加到您的網站。

1. 如何使用 Elementor Breadcrumbs 小部件進行 Yoast SEO

2. 添加元素麵包屑的替代方法（對於其他 SEO 插件）

如何使用 Elementor Breadcrumbs 小部件進行 Yoast SEO

在我們開始之前，您需要在您的網站上安裝以下插件：

• 元素（免費）
• 元素（專業版）
• Yoast 搜索引擎優化

確保您已安裝並激活 Elementor免費和高級版。

如果您是 Elementor 的新手，請查看本指南並了解如何使用 Elementor（初學者分步指南）。

讓我們開始吧：

第 1 步：安裝和設置 Yoast SEO 插件

首先，您需要將 Yoast SEO 插件安裝到您的網站，因為麵包屑小部件僅在您安裝插件時才有效。

轉到插件-> 添加新的。 然後在搜索欄中輸入 Yoast SEO。 找到插件後，單擊安裝按鈕。 最後，單擊“活動”按鈕以完成插件激活過程。

現在，我們將啟用麵包屑選項。 為此，您需要訪問SEO–> Seach Appearance 。 然後單擊麵包屑選項卡。 在這裡，您將獲得設置麵包屑的所有必要選項。

注意：默認情況下，SEO 插件會為您設置完美運行的設置。

第 2 步：創建 Elementor 模板

是時候創建一個頁面模板來添加麵包屑了。 為此，您需要轉到Template–>Theme Builder 。 然後打開單頁選項卡並單擊添加新單頁按鈕。

一段時間後，您會發現一個模式彈出窗口，您可以在其中添加模板的名稱。 然後單擊創建模板按鈕並等待以下頁面。

在下一頁上，您將獲得大量預製模板，您可以輕鬆地將其安裝到您的站點。 只需單擊安裝按鈕並等待模板安裝。

第 3 步：添加元素麵包屑小部件

讓我們添加元素麵包屑小部件到我們新創建的頁面模板。 您可以從 Elementor 小部件庫中找到該小部件。 然後將其拖放到要顯示麵包屑的合適位置。 通常，麵包屑顯示在頁面頂部和網站標題區域的正下方。

第 4 步：自定義您的麵包屑

您可以按照自己的方式自定義麵包屑。 內容區域允許您設置麵包屑的內容。 在這裡，您可以定義Alignment和HTML Tag 。 這些是您為麵包屑設置的 HTML 標記。

• 默認
• 磷
• div
• 導航
• 跨度

您還可以使用樣式選項設置麵包屑的樣式。 在樣式區域中，您可以按照自己的方式更改排版、文本顏色和鏈接顏色。 您會看到我們更改了文本和鏈接顏色。

如果要更改懸停顏色，可以按照下圖進行操作。

添加 Elementor 麵包屑的替代方法（適用於其他 SEO 插件）

您可以按照其他一些方法將麵包屑添加到您的 Elementor 網站。

Elementor 免費版

如果您沒有 Elmntor pro 許可證，您可以將麵包屑添加到您的站點。 請按照以下步驟執行此過程。

• 創建要顯示麵包屑的部分
• 將 Elementor Shortcode 小部件添加到部分
• 粘貼以下 Yoast SEO 麵包屑簡碼

[wpseo_breadcrumb]

現在您可以在您的網站上顯示麵包屑。

排名數學 SEO

您還可以使用 Rank Math SEO 插件來顯示麵包屑。 如果您是 Rank Math 專業用戶，您可以使用小部件輕鬆添加麵包屑。

但是，如果您是普通用戶，則必須手動添加麵包屑。 像 Elementor 免費用戶一樣，您還必須使用簡碼方法來完成任務。

該過程與上述類似。 但是您必須確保使用 Rank Math 插件提供的正確短代碼。 這裡是Rank Math 的麵包屑簡碼。

 [rank_math_breadcrumb]

而已。

Elementor 麵包屑常見問題解答

讓我們查看以下有關 Elementor 麵包屑的常見問題解答。

獎勵：使用快樂插件的麵包屑小部件在您的 Elementor 網站上添加令人驚嘆的麵包屑！

如果您想要更高級的選項來為您的 Elementor 網站添加流暢、吸引人且可自定義的麵包屑，那麼您應該嘗試 Happy Addons Breadcrumbs Widget。 這個驚人的小部件允許您以更藝術的方式將動態麵包屑添加到您的網站。 它還帶有一些漂亮的預製麵包屑設計。

主要特徵。

• 使用方便。
• 提供漂亮的預構建麵包屑設計，可幫助您輕鬆設計麵包屑。 您可以在演示頁面上找到它們。

• 完全可定制。
• 獲取更多高級設置。
• 能夠添加主頁圖標，這將使您的麵包屑更具可信度。

查看 Happy Addons Breadcrumbs 的文檔並了解如何使用它。

使用麵包屑改善您的網站用戶體驗

添加麵包屑可為您的 Elementor 網站帶來額外的 SEO 優勢。

在本指南中，我們介紹了添加此 Web 元素的所有可能方法。 我們已經討論了它的重要性。 此外，還簡要介紹了 Happy Addons 的麵包屑小部件。

如果您對此博客有任何疑問，可以對我們發表評論。

不要忘記訂閱我們的時事通訊，以獲取有關 Elementor 和 Happy Addons 的更酷提示和技巧。