![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>](https://image.slidesharecdn.com/structureddata-201108124702/85/Structured-data-7-320.jpg)
![如何寫 Structured Data
? 瞭解頁面的內容，找出相對應的 JSON-LD 標籤 (網址)
? 定期溫習 Google Search Structured Data 文件
? 自己動手寫看看 – [Codelab]](https://image.slidesharecdn.com/structureddata-201108124702/85/Structured-data-9-320.jpg)
More Related Content
Similar to Structured data (20)
More from Chieh Kai Yang (11)
![Web.dev extended : What's new in Web [GDG Taichung]](https://cdn.slidesharecdn.com/ss_thumbnails/web-200724032032-thumbnail.jpg?width=560&fit=bounds)
Structured data
- 2. What’s Structured Data ? 一種描述網頁內容的資料結構 ? 可幫助 Google 搜尋引擎了解你的網站 ? 可豐富網站顯示在 Google 搜尋頁面上的樣式(複合式搜尋結果) ? Google Assistance 有部分支援 ? Google Actions 支援, 例如 How-to Page ? 可以用在 Gmail Markup Template 上
- 3. Structured Data 的好處 ? 幫助搜尋引擎更準確地了解網頁的內容 ? 更豐富美麗的搜尋結果
- 7. 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>
- 8. 結構化資料格式 ? 目前 Google 搜尋引擎所支援的格式有 3 種 格式 說明 JSON-LD (建議) 這是一種嵌入在網頁標頭或內文 <script> 標記中的 JavaScript 表示法。由於標 記不會與使用者可見的文字交錯，因此可透過更簡易的方式表達巢狀項目，例 如 Country > PostalAddress > MusicVenue > Event。 此外，Google 能夠解讀以動 態方式植入網頁內容的 JSON-LD 資料，例如透過 JavaScript 程式碼或內容管理 系統中內嵌小工具所植入的資料。 微資料 (microdata) 一種開放社群 HTML 規格，用於為結構化資料在 HTML 內容中建立巢狀結構。 例如 RDFa 會使用 HTML 標籤屬性為您想要以結構化資料形式呈現的資源命名。 通常用於網頁內文，但也可用於標題。 RDFa 一種 HTML5 擴充功能，透過引入與使用者可見內容對應的 HTML 標記屬性來 支援連結資料，可用於您想要對搜尋引擎描述的使用者內容。RDFa 經常用於 HTML 網頁的標題和本文部分。
- 9. 如何寫 Structured Data ? 瞭解頁面的內容，找出相對應的 JSON-LD 標籤 (網址) ? 定期溫習 Google Search Structured Data 文件 ? 自己動手寫看看 – [Codelab]
- 10. Angular 能使用 Structured Data嗎? ? 搜尋引擎對於 SPA 網站的索引能力? ? 只能用 SSR (Server-Side Rendering) 來解這問題?
- 12. Remote Structured Data Fetching 瞭解 JavaScript 搜寻引擎最佳化 (SEO) 基礎知識 (圖片來源取自此處)
- 13. 遠端取得 Structured Data ? 可使用 fetch 等 API 來呼叫 API 取得要顯示的內容 ? 動態新增 <script type=“application/ld+json></script> ? 會跟原本既有的 Structured Data 並存 ? 限制 ? Request Time 有時間上的限制，呼叫時間太久的話會被忽略
- 14. 測試驗證工具 ? 複合式搜尋結果測試 ? 使用網址 ? 使用程式码片段
- 15. Demo
- 16. 參考資料 ? Remote Structured Data Fetching by Paul Li ? 瞭解 JavaScript 搜寻引擎最佳化 (SEO) 基礎知識 ? 瞭解結構化資料的運作方式 ? 複合式搜尋結果測試
- 17. 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
Editor's Notes
- #8: https://developers.google.com/search/docs/data-types/article 展示更多類型的結構化資料格式