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

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

發佈日期:2022年04月18日

你也是使用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之中

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

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

設定與調整Breadcrumbs的顯示

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

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

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

結語與後記

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

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

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

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

其他推薦內容

Divi教學-Divi表單如何設定Google reCAPTCHA

Divi教學-Divi表單如何設定Google reCAPTCHA

還在煩惱網站中的表單被人亂留言、亂輸入資訊而打優嗎?使用Google提供的服務reCAPTCHA就可以有效防止,簡單的設定步驟,在這篇完整教會你!

Divi教學-Divi Breadcrumbs外掛使用教學

Divi教學-Divi Breadcrumbs外掛使用教學

Divi這個強大的佈景主題,簡單幾步驟,就可以完成一個頁面或文章的導覽(Breadcrumbs)設定,只要使用Divi Breadcrumbs就能搞定,不清楚怎麼設定嗎?看這篇就搞定!

Cloudways Migrator快速搬家圖文教學

Cloudways Migrator快速搬家圖文教學

想從A主機搬到B主機,如果真沒學過一些資料處理的話,還真是頭大。Cloudways這間高CP的主機商,提供的完美的搬家工具Cloudwyas WordPress Migrator,讓你完全可以無痛搬移,快速完成搬移工作。

站長: Joyy志強

網路行銷玩家 | 期待透過更多免費的分享,讓更多人學到如何有效的從網路上建立屬於你自己的收入來源。 如果你也有好的網路賺錢項目,或想學習建立收入的方式,開始搭建一個可以為你賺錢的網站,歡迎透過下方聯絡我的方式和我洽談與聯絡喔。

折扣優惠推薦

Divi theme 推薦

Follow Joyy

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。

error: 本站內容具著作權保護!