Structured data

What’s Structured Data
• 一種描述網頁內容的資料結構
• 可幫助 Google 搜尋引擎了解你的網站
• 可豐富網站顯示在 Google 搜尋頁面上的樣式(複合式搜尋結果)
• Google Assistance 有部分支援
• Google Actions 支援, 例如 How-to Page
• 可以用在 Gmail Markup Template 上

Structured Data 的好處
• 幫助搜尋引擎更準確地了解網頁的內容
• 更豐富美麗的搜尋結果

Structured Data 範例<html>
<head>
<title>Apple Pie by Grandma</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Apple Pie by Grandma",
"author": "Elaine Smith",
"image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
"description": "A classic apple pie.",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "7462",
"bestRating": "5",
"worstRating": "1"
},
"prepTime": "PT30M",
"totalTime": "PT1H30M",
"recipeYield": "8",
"nutrition": {
"@type": "NutritionInformation",
"calories": "512 calories"
},
"recipeIngredient": [
"1 box refrigerated pie crusts, softened as directed on box",
"6 cups thinly sliced, peeled apples (6 medium)"
]
}
</script>
</head>
<body>
</body>
</html>

結構化資料格式
• 目前 Google 搜尋引擎所支援的格式有 3 種
格式說明
JSON-LD (建議) 這是一種嵌入在網頁標頭或內文 <script> 標記中的 JavaScript 表示法。由於標
記不會與使用者可見的文字交錯，因此可透過更簡易的方式表達巢狀項目，例
如 Country > PostalAddress > MusicVenue > Event。此外，Google 能夠解讀以動
態方式植入網頁內容的 JSON-LD 資料，例如透過 JavaScript 程式碼或內容管理
系統中內嵌小工具所植入的資料。
微資料 (microdata) 一種開放社群 HTML 規格，用於為結構化資料在 HTML 內容中建立巢狀結構。
例如 RDFa 會使用 HTML 標籤屬性為您想要以結構化資料形式呈現的資源命名。
通常用於網頁內文，但也可用於標題。
RDFa 一種 HTML5 擴充功能，透過引入與使用者可見內容對應的 HTML 標記屬性來
支援連結資料，可用於您想要對搜尋引擎描述的使用者內容。RDFa 經常用於
HTML 網頁的標題和本文部分。

如何寫 Structured Data
• 瞭解頁面的內容，找出相對應的 JSON-LD 標籤 (網址)
• 定期溫習 Google Search Structured Data 文件
• 自己動手寫看看 – [Codelab]

Angular 能使用 Structured Data嗎?
• 搜尋引擎對於 SPA 網站的索引能力?
• 只能用 SSR (Server-Side Rendering) 來解這問題?

JavaScript 搜尋引擎最佳化 (SEO)

Remote Structured Data Fetching
瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識 (圖片來源取自此處)

遠端取得 Structured Data
• 可使用 fetch 等 API 來呼叫 API 取得要顯示的內容
• 動態新增 <script type=“application/ld+json></script>
• 會跟原本既有的 Structured Data 並存
• 限制
• Request Time 有時間上的限制，呼叫時間太久的話會被忽略

測試驗證工具
• 複合式搜尋結果測試
• 使用網址
• 使用程式碼片段

參考資料
• Remote Structured Data Fetching by Paul Li
• 瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識
• 瞭解結構化資料的運作方式
• 複合式搜尋結果測試

Kevin Yang (楊捷凱)
• Microsoft Most Valuable Professional
• Angular GDE
• Blog：https://blog.kevinyang.net/
• FB Page：
https://www.facebook.com/CKNotepad
• Organizer:
• Angular Taiwan
• Angular Online Study Group
• GDG Taichung

Structured data

Recommended

Recommended

More Related Content

Similar to Structured data

Similar to Structured data (20)

More from Chieh Kai Yang

More from Chieh Kai Yang (11)

Structured data

Editor's Notes