網站的文章或頁面變多時,開始需要新增結構化資料,也就是大家都應該認識的 Breadcrumb 麵包屑,清楚的結構化資料會讓 Goolge 等搜尋引擎容易爬蟲到自己的網站,抓到網站所有頁面、文章的分類結構與其組織。
WordPress也有外掛的Breadcrumb 麵包屑,但是不多,最多人使用的是 Yoast SEO ,裡面有Breadcrumb的設定,但西門老年生活的網站沒有使用 Yoast SEO ,是使用All in One SEO ,查了很久好像沒有 Breadcrumb 的功能,於是就找了比較熱門的 WordPress Breadcrumb NavXT 的外掛程式來安裝。

安裝外掛Breadcrumb NavXT 後,啟用使用,發現有不少的功能設定。

所有的設定幾乎都不需要更改,只有在Post Types選項哩,下方有個Post Hierarchy的設定,預設值是分類,如果要更改Dates、標籤或者Post Parent,再自行切換即可。

然後重要的新增程式碼是這裡:外觀 / 佈景主題編輯器 / content-single.php ,這個檔案,要看自己網站的主題是什麼而定,有可能是 xxxxxx-single.php , 新增一段程式碼,是有關於放置breadcrumb的內容。

通常是在h1的下方,也就是在主標題的下方放置,放入以下的程式碼:
<br> <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> <br>

如果覺得與h1標題列太近不好看,可以上下內容加<br>隔開,比較好看。

此時,回到每個文章或頁面,就可以看到文章已加入Breadcrumb 麵包屑了,此結構化資料都已經設定完成了,因為是依照分類的設定,所以第2層結構化是分類彙整的內容。
接下來是檢測剛剛設定的結構化資料有沒有正確,開網頁到Google結構化資料測試工具頁面檢測看看。

此時需要輸入自己單一頁面或文章的網址即可。

複製自己的單一頁面或文章網址,例如https://jesychen.com/2019/03/27/sec-3-xinyi/
貼上到Google 結構化資料測試工具的視窗上。

過了約20 ~ 30秒後,就出現資料了,可以看右邊的視窗 BreadcrumbList 的結果,如果不正常會出現錯誤,會有紅色的文字,我的設定是正確的,所以沒有任何錯誤或警告。

點開BreadcrumbList後,看到此網頁結構化的結果,是沒有問題的,表示設定成功。