結構化資料是一種標準化格式,它提供網頁相關資訊並將網頁內容分類,有助於優化搜索引擎SEO。
⚠ 即使網頁已正確加上標記,Google 也不能保證結構化資料一定會出現在搜尋結果中。
使用結構化資料會「啟用」相關功能,但不「保證」該功能可正常顯示。Google 演算法會自行制定搜尋結果,提供使用者最佳的搜尋體驗,然而這類搜尋結果受多種因素影響,包含搜尋記錄、所在位置和裝置類型。在某些情況下,Google可能會判別某項功能比另一項功能更加合適,甚至選定一般藍色連結為最佳結果。
SEO 結構化資料支持的格式
- JSON-LD (建議)
- Microdata 微資料
- RDFa
如何添加SEO 結構化資料
雖然大部分的 Google 搜尋結構化資料都使用 [schema.org] (https://schema.org/) 詞彙,但是針對 Google 搜尋的運作方式,developers.google.com 說明文件 才是最終的參考指南。
SEO結構化資料有許多種,本文只介紹導覽標記和網站導航架構標記。
導覽標記 BreadcrumbList
BreadcrumbList標記用來標記站點上的麵包屑,為搜索結果頁面生成豐富的麵包屑片段。
Wordpress 網站
啟用 Yoast 插件 [https://yoast.com/] 並啟用 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標記可以幫助提高搜索引擎對網站結構和導航的了解,並可以用來影響自然搜索排名。
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>