Apr 23, 2021 4 min read web develop

SEO 結構化資料指南

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

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

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

SEO 結構化資料支持的格式

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

如何添加SEO 結構化資料

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

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

添加導覽標記 BreadcrumbList

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

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標記可以幫助提高搜索引擎對網站結構和導航的了解，並可以用來影響自然搜索排名。

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>

網站導航架構標記