JSON-LD 簡介 - Speaker Deck

Slide 1

Slide 1 text

+40/-% Win Wu   [email protected]  blog.winwu.today ಠ‿ಠ

Slide 2

Slide 2 text

኷ᆴ"(&/%" • 什麼是 JSON-LD? (What is JSON-LD?) • 如何使⽤用 JSON-LD? (How to Use? and Tools.) • Q&A

Slide 3

Slide 3 text

ᚋ麼ᙈ+40/-% 8)"5*4+40/-%

Slide 4

Slide 4 text

᜔᣾ᶝဒ Semantic Markup / Semantic Tag Web ⽂文件透過特定的標記 (標記可以是很多種⽅方式, Ex: HTML)，讓搜尋引擎可以⾃自動擷取結構化的內容，得到更正確的索引 (index) 以及分類結果。對於網站的 SEO 很有幫助。

Slide 5

Slide 5 text

ၢēᠭᚋ麼ᶝဒĦ

Slide 6

Slide 6 text

當然標記也要有個標準，當然也有組織出來決定⼀一些規範。

Slide 7

Slide 7 text

• Schema.org 這個組織⺫⽬目的在於維護和促進互聯網上的結構化數據的模式。 • Google, Bing, Yandex, Yahoo 都⽀支援 (贊助) Schema 進⾏行網⾴頁的資料結構化，建⽴立描述網⾴頁資料的常⽤用詞彙，改善網路瀏覽體驗。 • 編碼⽅方式可以是 Microdata, JSON-LD 或是 RDFa。 4$)&."᜔᣾ᶝᰐ

Slide 8

Slide 8 text

• 不論是 Microdata, JSON-LD, RDFa 哪種編碼⽅方式，都是搭配 schema.org 制訂出來的詞彙 (Vocabulary)，讓原本⾮非結構化的網⾴頁內容，變成是可結構化的。 • 但這些寫編碼⽅方式主要是為了給搜尋引擎閱讀。 .*$30%"5" +40/-% 3%'" Microdata (微資料) JSON-LD (JSON Linked Data) RDFa (Resource Description Framework in Attributes)

Slide 9

Slide 9 text

Microdata JSON-LD RDFa 統⼀一定義的詞彙 (Vocabulary，如 Author, Product…) ⼤大部份的 Search Engine 都⽀支援這些 Vocabulary。搭配 schema 語意標記的編碼⽅方式。 “ schema.org providing the vocabulary for the data and JSON-LD constituting the format and transport for the data. ” - developers.google.com

Slide 10

Slide 10 text

+40/ • 獨⽴立的⽂文本格式。 • JavaScript 的⼦子集。 • 常⽤用於 Web Frontend/Backend 資料交換。 • 格式易懂。 • ⽤用來關聯數據，鏈結資料。 • ⽤用描述 URL 的⽅方式來分享, 連接 Web 之間各種資源的⽅方法。 -*/,&%%"5" JavaScript Object Notation +40/-% JSON-LD 是以 JSON 為基礎的資料格式，⽤用來實作結構化資料，向⼤大部份的搜尋引擎描述您網站上的內容及語意格式。圖源: http://www.slideshare.net/lanthaler/ jsonld-for-restful-services?related=2 作者: Markus Lanthaler

Slide 11

Slide 11 text

ᜰ᷁ᑿᠭ+40/-% )085064&+40/-%

Slide 12

Slide 12 text

4$3*15ᶝᰐ 要寫 JSON-LD 格式就跟使⽤用 JSON 相似，你要把 JSON 格式放在標籤裡⾯面，把這段 script 放在 HTML 裡⾯面 (通常擺在 <head> 裡⾯面，無硬性規定)。注意 script 的 type 格式為 applcation/ld+json。加上 JSON-LD Script ⾄至網⾴頁，就可以讓⽀支援 schema.org 以及 JSON-LD 格式的 Search Engines 讀取。 html <script type="application/ld+json"> { … }

Slide 13

Slide 13 text

ᬥᨷ!$0/5&95ᤎ࿔ !5:1& ⼀一定要指定 @context 以及 @type 兩種 Property。如下範例，假設網⾴頁的內容跟活動有關。 { "@context": "http://schema.org", "@type": "Event", } 表⽰示使⽤用 schema.org 這個 Vocabulary 的 Event 型式來呈現這個資料類型。

Slide 14

Slide 14 text

CreativeWork 創作 Person ⼈人物 Book 書籍 Oragnization 組織 Movie 電影 Restaurant 餐廳 MusicRecording ⾳音樂錄⾳音 Product 產品 Recipe ⻝⾷食譜 Offer 供應 TVseries 電視節⺫⽬目 Review 評論 ImageObject 圖像物件 AggregateRating 評分 VideoObject 影⾳音物件 Place 地⽅方 Event 活動 AudioEvent 聲⾳音物件 @type 可以帶⼊入的型態有很多... 可選擇最適合網⾴頁資料的 Type 來使⽤用。 http://schema.org/[TYPE的型態]

Slide 15

Slide 15 text

&9".1-&1&340/ Web 上描述⼀一個⼈人的內容的 HTML 原始碼： image source: http://schema.org/Person

Slide 16

Slide 16 text

ᦍቝṍျᠤใཋặēᤎ+40/-%ᶡᙎ image source: http://schema.org/Person

Slide 17

Slide 17 text

Ᏽჯ!5:1&់ᢶᏵჯ᧣1301&35: image source: http://schema.org/Person Embedding is a JSON-LD feature that allows an author to use node objects as property values. - www.w3.org

Slide 18

Slide 18 text

+40/-%ฯᙚᣗḪ/FTUJOH image source: http://schema.org/Person Embedding is a JSON-LD feature that allows an author to use node objects as property values. - www.w3.org

Slide 19

Slide 19 text

8"/5.03&

Slide 20

Slide 20 text

ใཋặᥫᇋᲦᙓ https://developers.google.com/structured-data/testing-tool/ 使⽤用 Google 的 Structured Data Testing Tool 驗證資料的正確性。

Slide 21

Slide 21 text

ใཋặᥫᇋṐ᪁໏༺ https://www.google.com/webmasters/markup-helper

Slide 22

Slide 22 text

3*$)4/*11&5 該類別資料⿑齊全的 scheme property，還有可能被瀏覽器顯⽰示為 Rich Snippets. 解讀網站的資料，以全新,特別的⾯面貌呈現你所描述的資料。

Slide 23

Slide 23 text

搜尋框顯⽰示應⽤用 SearchAction 的 Snippet (http://schema.org/SearchAction) 製作 search action 還有其他⽅方式 (如 http://www.opensearch.org/Home)

Slide 24

Slide 24 text

Breadcrumbs 的 Snippet Event 的 Snippet

Slide 25

Slide 25 text

航空公司在機票通知的 Email 加上標記， Gmail 即可顯⽰示相關預訂機票的摘要。 (僅⽀支援 Microdata, JSON-LD) (PPHMFᬧ᡺+40/-%᦬&NBJMṉᙎᓓ https://developers.google.com/gmail/markup/reference/hotel-reservation https://developers.google.com/gmail/markup/registering-with-google https://www.google.com/webmasters/markup-tester

Slide 26

Slide 26 text

 Ღ&."*-."3,61j 測試: 沒有主機請⽤用 (連主機都沒有的⼈人只能夠過這個⾃自⼰己寄給⾃自⼰己) script.google.com  或是你也可透過 Google App Engine 做 End2End 測試

Slide 27

Slide 27 text

Ღᙓḃጴᥫᙺ https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails

Slide 28

Slide 28 text

ớხᴢᬰᥫᙺ https://developers.google.com/gmail/markup/reference/event-reservation

Slide 29

Slide 29 text

測試 N 種格式只有兩封有中...

Slide 30

Slide 30 text

&."*-᧣+40/-%ᰢᠭᮉ໏༺

Slide 31

Slide 31 text

᜵4536$563&%%"5"5&45*/(500-Ᏽჯᶝ᫿

Slide 32

Slide 32 text

Production 環境請向 Google 申請 Gmail Schema Whitelist Request https://docs.google.com/forms/d/1PA-vjjk3yJF7MLPOVKbIz3MBfhyma2obS8NIZ0JYx8I/viewform?pli=1 https://developers.google.com/gmail/markup/registering-with-google

Slide 33

Slide 33 text

+40/-%'PS&OHJOFFS

Slide 34

Slide 34 text

http://json-ld.org/

Slide 35

Slide 35 text

PHP Example: JSON-LD data prepare

Slide 36

Slide 36 text

PHP Example: View

Slide 37

Slide 37 text

JSON-LD Format Validate

Slide 38

Slide 38 text

ᓝ฼ዧ᩼ 2"

Slide 39

Slide 39 text

2᫏ṽ)5.-4&."/5*$ēኼᢶዄᘥ᥅᷁ -*/,&%%"5"᦬ቝṍᓓēᗎᚃቝ᮱᤼ᜀၙṉᙎ ႝᐙ份᧣ᬍ᠓ᥫᙺĦ 是，但是有做 Data Linked 的⺫⽬目的在於讓網⾴頁 (URL) 的資料能夠向 Search Engine ⾃自我描述 (Self-descriptive) 資料的結構跟意義。

Slide 40

Slide 40 text

2.JDSPEBUB ዸᥫᇋ 3%'B +40/-% 定義 schema.org 的 vocabulary 的內容可以⽤用這三種形式，Microdata, RDFa, JSON-LD。 Microdata RDFa JSON-LD HTML attribure HTML attribure tag “Google can read JSON-LD data even when it is dynamically injected into the page's contents, such as by Javascript code or embedded “widgets”." - developers.google.com/structured-data/ schema-org

Slide 41

Slide 41 text

2൱ჯᙉᑿᠭ.JDSPEBUB᜵+40/-% 以 Google 來說，只建議你擇⼀一使⽤用，但 Google 偏好微資料。 schema.org 沒有強制⼀一定只能選⼀一種。 https://support.google.com/webmasters/answer/3069489?hl=zh-Hant

Slide 42

Slide 42 text

2൮ᜰბኼᢶ᧱ᷯᚕ᧣ᥫᇋṞᴋ5ZQFēḒ 怎麼ᑿᠭ+40/-%ᶡᙎቝṍျᠤ᧣ใཋ 1. 什麼都不做. “Do nothing (don't mark up the content in any way). However, before you decide to do this, check to see if any of the types supported by schema.org - such as reviews, comments, images, or breadcrumbs - are relevant.” - schema.org 2. 可以被定義的 Type 內容就先定義某⼀一部份. “Use a less-specific markup type. For example, schema.org has no "Professor" type. However, if you have a directory of professors in your university department, you could use the "person" type to mark up the information for every professor in the directory.”- schema.org

Slide 43

Slide 43 text

Slide 44

Slide 44 text

5)"/,:06 ಠ‿ಠ

Slide 45

Slide 45 text

• https://developers.google.com/structured-data/schema-org • https://www.w3.org/TR/json-ld • https://developers.google.com/web/updates/2015/03/creating-semantic-sites-with-web-components-and-jsonld • https://www.youtube.com/watch?v=vioCbTo3C-4 • http://linter.structured-data.org/examples/ • https://github.com/json-ld/json-ld.org/wiki/Users-of-JSON-LD • http://www.slideshare.net/lanthaler/building-next-generation-web-ap-is-with-jsonld-and-hydra/34 • http://manu.sporny.org/2013/gmail-json-ld/ • https://developers.google.com/gmail/markup/reference/hotel-reservation • https://www.facebook.com/notes/paul-li/%E5%88%9D%E6%8E%A2-json-ld-microdata/10153120269927211/ • https://developers.google.com/structured-data/customize/social-proﬁles 3&'&3&/$& JSON-LD Logo Resource is from : http://json-ld.org/images/