JSON-LD 簡介

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

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

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

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

ၢēᠭᚋ麼ᶝဒĦ

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

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

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

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

+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

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

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

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

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

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

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

Ᏽჯ!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

+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

8"/5.03&

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

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

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

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

Breadcrumbs 的 Snippet Event 的 Snippet

航空公司在機票通知的 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

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

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

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

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

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

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

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

+40/-%'PS&OHJOFFS

http://json-ld.org/

PHP Example: JSON-LD data prepare

PHP Example: View

JSON-LD Format Validate

ᓝ฼ዧ᩼ 2"

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

2.JDSPEBUB ዸᥫᇋ 3%'B +40/-% 定義 schema.org 的 vocabulary 的內容可以⽤用這三種形式，Microdata,
RDFa, JSON-LD。 Microdata RDFa JSON-LD HTML attribure HTML attribure <script> 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

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

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

5)"/,:06 ಠ‿ಠ

• 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/

JSON-LD 簡介

JSON-LD 簡介

More Decks by winwu

Other Decks in Programming

Featured

Transcript