SEO 結構化資料指南

Posted by Y Cheung on Fri, Apr 23, 2021

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

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

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

SEO 結構化資料支持的格式

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

如何添加SEO 結構化資料

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

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

導覽標記 BreadcrumbList

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

Breadcrumb rich snippets

Wordpress 網站

啟用 Yoast 插件 [https://yoast.com/] 並啟用 Breadcrumbs功能。

Yoast SEO ➡️ Search Appearance ➡️Breadcrumbs

一般網站

示例代碼

 1<!-- 網站導覽標記example -->
 2<html>
 3  <head>
 4    <title>Award Winners</title>
 5    <script type="application/ld+json">
 6    {
 7      "@context": "https://schema.org",
 8      "@type": "BreadcrumbList",
 9      "itemListElement": [{
10        "@type": "ListItem",
11        "position": 1,
12        "name": "Books",
13        "item": "https://example.com/books"
14      },{
15        "@type": "ListItem",
16        "position": 2,
17        "name": "Science Fiction",
18        "item": "https://example.com/books/sciencefiction"
19      },{
20        "@type": "ListItem",
21        "position": 3,
22        "name": "Award Winners"
23      }]
24    }
25    </script>
26  </head>
27  <body>
28  </body>
29</html>

以 JSON-LD 格式呈現該導覽標記的範例你也可以利用在線Schema Markup Generator (JSON-LD)工具 生成導覽標記。

網站導航架構標記 SiteNavigationElement

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

Organic site links

SiteNavigationElement 需要更改 HTML DOM。

 1<!-- 網站導航架構標記example -->
 2<html>
 3  <head>
 4    <title>Award Winners</title>
 5  </head>
 6  <body>
 7	<nav class="firstNav">
 8 		<ul itemscope itemtype="https://schema.org/SiteNavigationElement">
 9 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
10 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
11 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
12 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
13 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
14 			<li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
15 		</ul>
16 	</nav>
17  </body>
18</html>

測試 SEO 結構化資料