導覽標記(breadcrumb)是 SEO 裡滿重要的一個環節，它可以讓使用者以及搜尋引擎更了解你的網站結構，如果你的 WordPress 網站有裝了 Yoast SEO，那麼就可以透過該 Plugin 來設定你要看到的導覽標記。

首先在裝好 Yoast SEO 後，其便會在你的網站生成類似以下的 JSON-LD

"@type": "BreadcrumbList",
"@id": "https://yoast.com/wordpress/plugins/seo/#breadcrumb",
"itemListElement": [
  {
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@type": "WebPage",
      "@id": "https://yoast.com/",
      "url": "https://yoast.com/",
      "name": "Home"
    }
  },
  {
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@type": "WebPage",
      "@id": "https://yoast.com/wordpress/plugins/",
      "url": "https://yoast.com/wordpress/plugins/",
      "name": "WordPress plugins"
    }
  },
  {
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://yoast.com/wordpress/plugins/seo/#webpage"
    }
  }
]

 

 

接著到進階 > 導覽標記。

 

這邊可以設定導覽標記中間的分隔符號、首頁的顯示內容...等。

 

再來是看你想要在導覽標記顯示的階層有哪些，像我這邊如果想再單一文章頁顯示分類的話，就要在這裡選取分類。

 

接著在你的樣板裡面加入 Yoast SEO 的 braedcrumb：

if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<ol id="breadcrumbs">','</ol>' );
}

也可以透過加入 shortcode 生成：

[wpseo_breadcrumb]

 

這樣就會生成導覽列了，生成後再依據設計調整樣式，調整完的結果如下：

以上便是在 Yoast SEO 透過設定後自動生成導覽標記 UI 的方法。