SEO 結構化資料指南

結構化資料是一種標準化格式,它提供網頁相關資訊並將網頁內容分類,有助於優化搜索引擎SEO。

即使網頁已正確加上標記,Google 也不能保證結構化資料一定會出現在搜尋結果中

使用結構化資料會「啟用」相關功能,但不「保證」該功能可正常顯示。Google 演算法會自行制定搜尋結果,提供使用者最佳的搜尋體驗,然而這類搜尋結果受多種因素影響,包含搜尋記錄、所在位置和裝置類型。在某些情況下,Google 可能會判別某項功能比另一項功能更加合適,甚至選定一般藍色連結為最佳結果。

SEO 結構化資料支持的格式

  • JSON-LD (建議)
  • Microdata 微資料
  • RDFa

如何添加SEO 結構化資料

雖然大部分的 Google 搜尋結構化資料都使用 schema.org 詞彙,但是針對 Google 搜尋的運作方式,developers.google.com 說明文件才是最終的參考指南。

SEO結構化資料有許多種,本文只介紹導覽標記和網站導航架構標記。

添加導覽標記 BreadcrumbList

BreadcrumbList標記用來標記站點上的麵包屑,為搜索結果頁面生成豐富的麵包屑片段。

Breadcrumb rich snippets
  • Wordpress 網站: 啟用 Yoast 插件 並啟用 Breadcrumbs功能。
Yoast SEO ➡️ Search Appearance ➡️Breadcrumbs
  • 一般網站:示例代碼
<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>
以 JSON-LD 格式呈現該導覽標記的範例

你也可以利用在線Schema Markup Generator (JSON-LD)工具生成導覽標記。

添加網站導航架構標記 SiteNavigationElement

SiteNavigationElement標記可以幫助提高搜索引擎對網站結構和導航的了解,並可以用來影響自然搜索排名。

Organic site links

SiteNavigationElement 需要更改 HTML DOM。

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
	<nav class="firstNav">
 		<ul itemscope itemtype="https://schema.org/SiteNavigationElement">
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 		</ul>
 	</nav>
  </body>
</html>
網站導航架構標記

測試 SEO 結構化資料

Y Cheung
Blogger, Backend Developer & Traveler.
Shanghai