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

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

作者:Joyy 志強

發佈日期:2022 年 04 月 18 日

首頁 E Divi 教學 E 如何在使用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在許多分享的文章中,都持有正面的結果。所以真的推薦如果你是第一次開始進行網站的架設,可以把這個部分學起來後,在網站建置初期,就一步步將這部分準備好。

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

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

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

推薦閱讀 ▼

【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !

【教學】Cloudways Staging Site 使用方式介紹 ! 讓你更新網站內容更方便 !

Staging Site 又稱之為臨時網站,之前在 Joyy 使用 Siteground 時,就已經知道這個功能。後來在協助其他客戶進行網站建置時,由於需要大改版 … 就是連同佈景主題這種大調整,可能無法在短時間進行修改的狀況。有這個 Staging Site 的功能,就可以滿足這個狀況 ! 可以放心修改,在修改好之後,再與原本的網站進行更新即可。可以說是非常實用的功能喔 ! 在這篇教學內容,將是以 Cloudways 的主機進行說明。如果你還沒有開始使用 Cloudways 的主機,或是在評估是否要更換使用 Cloudways...

【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !

【教學】Post SMTP 使用方式 ! 讓建製的 WordPress 網站可以進行郵件寄送 !

使用 Post SMTP 這個寄件外掛,可以幫助你的網站進行郵件的發送,Post SMTP 是一套非常簡單使用,功能又特別強大的一個寄件外掛,讓你的 WordPress 網站,可以讓訪客在網站上完成某些動作時,即進行郵件的推播與發送,進而維持好與訪客之間的互動。Post SMTP 的設定方式很簡單,接下來就帶你來一步步完成吧 ! Post SMTP 外掛設定前的準備 要讓網站可以寄件,最主要的就是要先準備好一個屬於網站專用的域名信箱。而域名信用的取得方式通常有在購買域名時,域名服務商會進行贈送 ( 例如 Gandi.net...

【教學】Cloudways 如何設定域名信箱 Domain Mailbox

【教學】Cloudways 如何設定域名信箱 Domain Mailbox

Cloudways 是我目前使用最穩定的網站主機,價格、服務、性價比 … 等等,在比較之下,真的都沒話說。而長期使用之下,你一定會需要建置一個 域名信箱,在使用 Cloudways 的情況下,如何快速的為自己建立出 域名信箱,在這篇教學中,將會完整和你分享 Cloudways 如何設定域名信箱,讓你從無到有一次完成 ! 什麼是域名信箱 ? 使用郵件服務,已經現代人生活的習慣之一下,常見的信箱,可能都是以 gmail 為主,或是 hotmail 等等 … 而在你建立網站之後,能使用...

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *