如何在使用Divi主題下,使用RankMath建立Breadcrumbs

如何在使用 Divi 主題下,使用 RankMath 建立 Breadcrumbs

你也是使用 Divi 這個佈景主題的使用者嗎?

在進行了一段 SEO 自我學習時,了解到如何建立網站文章的麵包屑 ( Breadcrumbs ),是可以幫助文章供給搜尋引擎來了解,進而有助於文章的 SEO 優化。

但 Divi 本身並沒有建立 Breadcrumbs 的功能,在這裡將教你如何透過使用 RankMath 這個 SEO 外掛,就能在 Divi 建立 Breadcrumbs 的方法喔。

什麼是麵包屑 Breadcrumbs?

這名稱最早源自己『格林童話』的『糖果屋』故事裡,是說到一對兄妹,要進入森林時,因害怕迷路,所以沿路將麵包撕成碎片狀,丟在來的路上,來避免之後找不到回去的路。

因此麵包屑即被拿來網路上做為【導航、導覽】的代表名稱。

麵包屑 Breadcrumbs 重要嗎?

我們先想像一下,如果你第一次到了一間量販百貨賣場,只是想隨意走走看看,一進到裡想離開時,你第一個念頭是什麼?

確認地圖或指標,找離開的路線!

同理,如果你的網站能有導航、導覽,是不是更能夠讓人清楚知道目前所在位置。

如果你是個電商平台,商品上千樣、上萬種,是不是更該做好分類與導覽的工作呢?

可能這對於小型網站暫時不太需要。但若是思考網頁的優化,麵包屑 Breadcrumbs 就變的重要了。

使用麵包屑 Breadcrumbs 的好處

以下整理我對於 Breadcrumbs 的看法,如有缺漏的部分,歡迎你到最下方的地方留言分享讓我們知道囉。

提高訪客使用體驗

使用麵包屑,可以讓訪客在到訪網站時,很清楚自己所在的位置。若要找尋其他相關類似產品或文章,也可以透過麵包屑的分類快速找到,提高訪客的使用體驗與留存時間,幫助達到留客的效果。

換言之,就是減少網頁的跳出率

有利於 SEO 爬蟲軟體收錄網站

這一點,實際的原理 Joyy 個人沒有太深入的研究,而這是參考許多知名 SEO 網站所提出的看法。

主要提到,在有良好的分類之下,使用麵包屑 Breadcrumbs,可以讓爬蟲軟體知道你的網頁整體結構的完整性,用來提供給 SEO 做為參考資訊。

畢竟爬蟲是套軟體,不可能以人眼人工的方式來進行。

如果有做好麵包屑的分類,對於 SEO 上多少有些正面的幫助。

有興趣可以參考這裡的說明 Wiki 麵包屑導覽

如何建立麵包屑 Breadcrumbs

在這裡和你分享,使用Divi這個佈景主題(Theme)或頁面編輯器(Page Builder),如何使用RankMath這個SEO外掛,來做到麵包屑Breadcrumbs的建立,只要跟著以下的步驟,就可以做到喔。

開啟 RankMath 選單

如何在使用Divi主題下,使用RankMath建立Breadcrumbs_01

Breadcrumbs 的選項,就在 Rank Math 裡的 General Settings 裡。

如何在使用Divi主題下,使用RankMath建立Breadcrumbs_02

其實在這裡出現的代碼就可以拿去到Divi裡去用了。有寫 <?php…. ?> 的部分,因為我自已本身也不會使用它。所以建議是使用 中括弧裡的 [ ] 就好囉。

於 Divi 的 Theme Bulider 插入代碼

如何在使用Divi主題下,使用RankMath建立Breadcrumbs_04

如上圖,開啟Theme Builder裡,到自定義內文(Custom Body)去新增代碼。

將剛剛準備好的Code碼複製後,開啟Divi的Module,找【Code】這個項目,並將它貼上(如上圖所示)

使用RankMath建立麵包屑Breadcrumbs的成果

設定與調整 Breadcrumbs 的顯示

如何在使用Divi主題下,使用RankMath建立Breadcrumbs_03

只要點擊 Enable Breadcrumbs Function 的開關,就會看到這些調整細項了。

接下來,至於後續你要怎麼調整,就依照個人喜好囉。

結語與後記

網站結構中,有麵包屑 Breadcrumbs 在許多分享的文章中,都持有正面的結果。所以真的推薦如果你是第一次開始進行網站的架設,可以把這個部分學起來後,在網站建置初期,就一步步將這部分準備好。

能夠建置麵包屑的方式也很多,建議這部分越單純越好。使用過多語法或外掛,想弄的華麗點,反而會讓網站帶來一些不必要的負擔。

網站建置不論是寫文章,還是要做任何銷售,都需要進行佈局與規畫的。只要有了開始,就不會後悔。畢竟建置這些內容,目的最終都是希望有人能看見並提供更好的建議與幫助。

歡迎有任何問題,可以在下方留言處留言我們知道喔。你的留言或許就可以幫助到有和你相同問題的人喔。

打造網路賺錢基地 實戰課程

▲ 讓你擁有一個能帶來現金流的網路賺錢基地,建立網路收入之路,實踐打造網路賺錢基地的策略與技巧 !

其他 Divi 相關教學文章推薦

  • 【Divi教學】Divi主題 SEO 基礎設定說明,簡易SEO功能介紹
    Divi主題之中,針對SEO的功能有著其基礎設定。在這次divi教學裡,將會教會你如何將divi主題裡的SEO功能進行基礎設定,這在divi教學中可則是非常基礎的一課。了解基礎設定後,後續若要使用其他SEO外掛,也就更能明白為什麼需要如此設定。你也可以選擇直接使用SEO外掛,在divi主題中,可以直接與外掛相支援。
  • 【Divi教學】Divi主題 Navigation 導航選項設定
    Divi主題之下,可以透過原本的divi主題設定,來決定導航列(Navigation)所能夠呈現的功能。在這篇文章中,將詳細和你說明在Divi主題下的設定中,導航列的所有相關設定方式。
  • 【Divi教學】Divi主題Options基本設置選項教學
    在divi主題中,由於沒有中文版本,有中文的版本在使用上常遇到更新就變的無法使用。 在這整理divi主題的使用細節,來幫助更多喜好使用divi主題的人,可以有一個正常參考的地方。 文章在一樓喔
  • 【Divi教學】Divi表單如何設定Google reCAPTCHA
    還在煩惱網站中的表單被人亂留言、亂輸入資訊而打優嗎?使用Google提供的服務reCAPTCHA就可以有效防止,簡單的設定步驟,在這篇完整教會你!
  • 【Divi教學】Divi Breadcrumbs外掛使用教學
    Divi這個強大的佈景主題,簡單幾步驟,就可以完成一個頁面或文章的導覽(Breadcrumbs)設定,只要使用Divi Breadcrumbs就能搞定,不清楚怎麼設定嗎?看這篇就搞定!
  • 如何在使用 Divi 主題下,使用 RankMath 建立 Breadcrumbs
    Divi這個佈景主題,並沒有內建可以建立Breadcrumbs的功能。都需要另外安裝外掛才可以進行。但如果你本身有在使用RankMath的話,就可以透過簡易的方式直接來建立囉。

About Joyy

網路行銷玩家
現任職於顧問公司擔任行銷。分享許多網路行銷與網路賺錢相關知識 ! 期待透過更多免費的分享,讓更多人學到如何有效的從網路上建立屬於你自己的收入來源。

粉絲專頁

最新文章

Udemy 線上課程

留下您的問題: