Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSON-LD 簡介

B72258db4bea39b1ff31ca60725be83f?s=47 winwu
February 22, 2016

JSON-LD 簡介

有 typo, 錯誤的地方 歡迎 email 到 yiyingwu.1990[at]gmail.com

B72258db4bea39b1ff31ca60725be83f?s=128

winwu

February 22, 2016
Tweet

Transcript

  1. +40/-% Win Wu 
 yiyingwu.1990@gmail.com
 blog.winwu.today ಠ‿ಠ

  2. ኷ᆴ"(&/%" • 什麼是 JSON-LD? (What is JSON-LD?) • 如何使⽤用 JSON-LD?

    (How to Use? and Tools.) • Q&A
  3. ᚋ麼ᙈ+40/-%  8)"5*4+40/-%

  4. ᜔᣾ᶝဒ Semantic Markup / Semantic Tag Web ⽂文件透過特定的標記 (標記可以是很多種⽅方式, Ex:

    HTML),讓搜尋引擎可以⾃自動擷取結構化的內容, 得到更正確的索引 (index) 以及分類結果。對於網 站的 SEO 很有幫助。
  5. ၢēᠭᚋ麼ᶝဒĦ

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

  7. • Schema.org 這個組織⺫⽬目的在於維護和促進互聯網上的結構化 數據的模式。 • Google, Bing, Yandex, Yahoo 都⽀支援

    (贊助) Schema 進⾏行網 ⾴頁的資料結構化,建⽴立描述網⾴頁資料的常⽤用詞彙,改善網路 瀏覽體驗。 • 編碼⽅方式可以是 Microdata, JSON-LD 或是 RDFa。 4$)&."᜔᣾ᶝᰐ
  8. • 不論是 Microdata, JSON-LD, RDFa 哪種編碼⽅方式,都是搭配 schema.org 制訂出來的詞彙 (Vocabulary),讓原本⾮非結構化 的網⾴頁內容,變成是可結構化的。

    • 但這些寫編碼⽅方式主要是為了給搜尋引擎閱讀。 .*$30%"5"  +40/-% 3%'" Microdata (微資料) JSON-LD (JSON Linked Data) RDFa (Resource Description Framework in Attributes)
  9. 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
  10. +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
  11. ᜰ᷁ᑿᠭ+40/-%  )085064&+40/-%

  12. 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>
  13. ᬥᨷ!$0/5&95ᤎ࿔ !5:1& ⼀一定要指定 @context 以及 @type 兩種 Property。 如下範例,假設網⾴頁的內容跟活動有關。 <script

    type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", } </script> 表⽰示使⽤用 schema.org 這個 Vocabulary 的 Event 型式來呈 現這個資料類型。
  14. CreativeWork 創作 Person ⼈人物 Book 書籍 Oragnization 組織 Movie 電影

    Restaurant 餐廳 MusicRecording ⾳音樂錄⾳音 Product 產品 Recipe ⻝⾷食譜 Offer 供應 TVseries 電視節⺫⽬目 Review 評論 ImageObject 圖像物件 AggregateRating 評分 VideoObject 影⾳音物件 Place 地⽅方 Event 活動 AudioEvent 聲⾳音物件 @type 可以帶⼊入的型態有很多... 可選擇最適合網⾴頁資料的 Type 來使⽤用。 http://schema.org/[TYPE的型態]
  15. &9".1-&1&340/ Web 上描述⼀一個⼈人的內容的 HTML 原始碼: image source: http://schema.org/Person

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

  17. Ᏽჯ!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
  18. +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
  19. 8"/5.03&

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

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

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

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

    http://www.opensearch.org/Home)
  24. Breadcrumbs 的 Snippet Event 的 Snippet

  25. 航空公司在機票通知的 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
  26.  Ღ&."*-."3,61j 測試: 沒有主機請⽤用 (連主機都沒有的⼈人只能夠過這個 ⾃自⼰己寄給⾃自⼰己) script.google.com
 或是你也可透過 Google App Engine

    做 End2End 測試
  27. Ღᙓḃጴᥫᙺ https://developers.google.com/schemas/tutorials/embedding-schemas-in-emails

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

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

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

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

  32. 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
  33. +40/-%'PS&OHJOFFS

  34. http://json-ld.org/

  35. PHP Example: JSON-LD data prepare

  36. PHP Example: View

  37. JSON-LD Format Validate

  38. ᓝ฼ዧ᩼ 2"

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

    Engine ⾃自我描述 (Self-descriptive) 資料的結構跟意義。
  40. 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
  41. 2൱ჯᙉᑿᠭ.JDSPEBUB᜵+40/-% 以 Google 來說,只建議你擇⼀一使⽤用,但 Google 偏好微資料。 schema.org 沒有強制⼀一定只能選⼀一種。 https://support.google.com/webmasters/answer/3069489?hl=zh-Hant

  42. 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
  43. 2"

  44. 5)"/,:06 ಠ‿ಠ

  45. • 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-profiles 3&'&3&/$& JSON-LD Logo Resource is from : http://json-ld.org/images/