Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
©aratana	
  Inc.	
{	
  
	
  	
  “company”:	
  “株式会社アラタナ”,	
  
	
  	
  “name”:	
  “⾼高⾒見見和也”,	
  
	
  	
  “posi1on”:	
  “Fro...
自己紹介	
2	
  
⾼高⾒見見  和也(Takami Kazuya)
株式会社アラタナ
ECテクノロジー事業本部:デザイングループ所属
フロントエンドエンジニア
Twitter@miiitaka
Facebook@miiitaka
戯れている	
3	
  
構造化データ?	
©aratana	
  Inc.	
 4	
  
構造化データとは?	
HTMLに書かれている情報が検索索ロボット(クローラ)が理理解できるよ
うに意味のある(セマンティック)情報にしてあげるメタデータのこと。
HTML5でセマンティックな要素が増えました。	
  
©aratana	
  Inc.	
 5	
  
HTML5でセマンティックな
要素が増えました。
<header>	
<footer>	
<main>	
<nav>	
<figure>	...
具体的な情報を定義	
©aratana	
  Inc.	
 6	
  
要素にプラスして、さらに具体的な情報を定義できます。
具体的な情報を定義	
©aratana	
  Inc.	
 7	
  
要素にプラスして、さらに具体的な情報を定義できます。	
Googleが2009年年から独⾃自に策定していたもの。
Data-­‐Vocabulary.org
<nav>	
...
具体的な情報を定義	
©aratana	
  Inc.	
 8	
  
要素にプラスして、さらに具体的な情報を定義できます。	
Googleが2009年年から独⾃自に策定していたもの。
Data-­‐Vocabulary.org
2011-­‐...
構造化データ(schema.org)のシンタックス	
©aratana	
  Inc.	
 9	
  
Microdata	
  
JSON-­‐LD	
  
RDFa	
  
schema.org のシンタックス(構文規則)	
JSON-LD...
JSON-­‐LD?	
©aratana	
  Inc.	
 10	
  
JSON-­‐LD	
  (JSON	
  for	
  Linking	
  Data)	
  
JSON-LDが
いいよ
JSONを使ってLinked Opend ...
JSON-­‐LD?	
©aratana	
  Inc.	
 11	
  
JSON-­‐LD	
  (JSON	
  for	
  Linking	
  Data)	
  
そうそう
JSONを使ってLinked Opend Dataを表現す...
シンタックス比較	
©aratana	
  Inc.	
 12	
  
レビューの
リッチスニペット
例)レビュー:microdata
microdataの例	
©aratana	
  Inc.	
 13	
  
例)レビュー:microdata	
<div	
  itemscope	
  itemtype="h<p://schema.org/Review">	
  
	
  ...
JSON-­‐LDの例	
©aratana	
  Inc.	
 14	
  
例)レビュー:JSON-LD	
<div>	
  
	
  	
  <div>	
  
	
  	
  	
  	
  <span>The	
  Catcher	
 ...
JSON-­‐LDの例	
©aratana	
  Inc.	
 15	
  
<script	
  type="applica1on/ld+json">	
  
{	
  
	
  	
  "@context":	
  "hZp://schem...
どうなる?	
©aratana	
  Inc.	
 16	
  
構造化データのマークアップをすると	
  
どうなるの?
リッチスニペット	
©aratana	
  Inc.	
 17	
  
リッチスニペット	
 Products
Articles
Software
Apps
Events
Videos
Reviews
Recipes
ナレッジグラフ	
©aratana	
  Inc.	
 18	
  
ナレッジグラフ	
Logo
Social
ProfileContact
Numbers
イベントプロモート	
©aratana	
  Inc.	
 19	
  
イベントプロモート	
 Venus Performer
Sites
Primary
Ticketers
アクションの提供	
©aratana	
  Inc.	
 20	
  
アクションの提供	
Music
Play
Critic
Review
Movie
Watch
サイト内検索	
©aratana	
  Inc.	
 21	
  
サイト内検索	
Site Link
Search
Box
Thank	
  You	
  !!	
©aratana	
  Inc.	
 22	
  
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

JSON-LD schema.org定義によるデータ構造化のススメ

2015/07/04 - HTML5カンファレンス in 鹿児島
セッション登壇資料

  • Login to see the comments

JSON-LD schema.org定義によるデータ構造化のススメ

  1. 1. ©aratana  Inc. {      “company”:  “株式会社アラタナ”,      “name”:  “⾼高⾒見見和也”,      “posi1on”:  “Front  End  Engineer”   } JSON-LD schema.org 定義による構造化データのススメ
  2. 2. 自己紹介 2   ⾼高⾒見見  和也(Takami Kazuya) 株式会社アラタナ ECテクノロジー事業本部:デザイングループ所属 フロントエンドエンジニア Twitter@miiitaka Facebook@miiitaka
  3. 3. 戯れている 3  
  4. 4. 構造化データ? ©aratana  Inc. 4   構造化データとは? HTMLに書かれている情報が検索索ロボット(クローラ)が理理解できるよ うに意味のある(セマンティック)情報にしてあげるメタデータのこと。
  5. 5. HTML5でセマンティックな要素が増えました。   ©aratana  Inc. 5   HTML5でセマンティックな 要素が増えました。 <header> <footer> <main> <nav> <figure> <section> <aside> <article> <figcaption> <mark>
  6. 6. 具体的な情報を定義 ©aratana  Inc. 6   要素にプラスして、さらに具体的な情報を定義できます。
  7. 7. 具体的な情報を定義 ©aratana  Inc. 7   要素にプラスして、さらに具体的な情報を定義できます。 Googleが2009年年から独⾃自に策定していたもの。 Data-­‐Vocabulary.org <nav>   <ul>   <li  itemscope  itemtype="h<p://data-­‐vocabulary.org/Breadcrumb">   <a  itemprop="url"  href="/"><span  itemprop="Etle">HOME</span></a></li>   <li  itemscope  itemtype="h<p://data-­‐vocabulary.org/Breadcrumb">   <a  itemprop="url"  href="/member/"><span  itemprop="Etle">メンバー紹介</span></ a></li>   <li  itemscope  itemtype="h<p://data-­‐vocabulary.org/Breadcrumb">   <a  itemprop="url"  href="/member/detail.php?id=47"><strong  itemprop="Etle”>高見和也 </strong></a></li></ul></nav>
  8. 8. 具体的な情報を定義 ©aratana  Inc. 8   要素にプラスして、さらに具体的な情報を定義できます。 Googleが2009年年から独⾃自に策定していたもの。 Data-­‐Vocabulary.org 2011-­‐06-­‐02   共同で開発・サポートすることを発表 協力しましょ。
  9. 9. 構造化データ(schema.org)のシンタックス ©aratana  Inc. 9   Microdata   JSON-­‐LD   RDFa   schema.org のシンタックス(構文規則) JSON-LDが いいよ
  10. 10. JSON-­‐LD? ©aratana  Inc. 10   JSON-­‐LD  (JSON  for  Linking  Data)   JSON-LDが いいよ JSONを使ってLinked Opend Dataを表現するために策定を進めてきた仕様で、 2014年年1⽉月16⽇日に正式にW3C勧告となりました。 http://json-ld.org
  11. 11. JSON-­‐LD? ©aratana  Inc. 11   JSON-­‐LD  (JSON  for  Linking  Data)   そうそう JSONを使ってLinked Opend Dataを表現するために策定を進めてきた仕様で、 2014年年1⽉月16⽇日に正式にW3C勧告となりました。 http://json-ld.org 何と言っても 見やすい!
  12. 12. シンタックス比較 ©aratana  Inc. 12   レビューの リッチスニペット 例)レビュー:microdata
  13. 13. microdataの例 ©aratana  Inc. 13   例)レビュー:microdata <div  itemscope  itemtype="h<p://schema.org/Review">      <div  itemprop="itemReviewed"  itemscope  itemtype="hZp://schema.org/Book">          <span  itemprop="name">The  Catcher  in  the  Rye</span>  (          <a  itemprop="sameAs"  href="hZp://en.wikipedia.org/wiki/ The_Catcher_in_the_Rye">wikipedia</a>)      </div>      <span  itemprop="reviewRaEng"  itemscope  itemtype="hZp://schema.org/RaEng">          <span  itemprop="raEngValue">4</span>      </span>  stars  -­‐      <b>"<span  itemprop="name">A  good  read.</span>"  </b>      <span  itemprop="author"  itemscope  itemtype="hZp://schema.org/Person">          <span  itemprop="name">Bob  Smith</span>      </span>      <span  itemprop="reviewBody">Catcher  in  the  Rye  is  a  fun  book.  It's  a  good  book  to   read.</span>   </div> 可読性が 悪い!
  14. 14. JSON-­‐LDの例 ©aratana  Inc. 14   例)レビュー:JSON-LD <div>      <div>          <span>The  Catcher  in  the  Rye</span>  (          <a  href="hZp://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">wikipedia</a>)      </div>      <span>          <span>4</span>      </span>  stars  -­‐      <b>"<span>A  good  read.</span>"  </b>      <span>          <span>Bob  Smith</span>      </span>      <span>Catcher  in  the  Rye  is  a  fun  book.  It's  a  good  book  to  read.</span>   </div> HTMLは そのまま
  15. 15. JSON-­‐LDの例 ©aratana  Inc. 15   <script  type="applica1on/ld+json">   {      "@context":  "hZp://schema.org/",      "@type":  "Review",      "itemReviewed":{          "@type":  "Book",          "name":  "The  Catcher  in  the  Rye",          "sameAs":  "hZp://en.wikipedia.org/wiki/The_Catcher_in_the_Rye"      },      "reviewRaEng":{          "@type":  "RaEng",          "raEngValue":  "4"      },      "name":  "A  good  read.",      "author":{          "@type":  "Person",          "name":  "Bob  Smith"      },      "reviewBody":  "Catcher  in  the  Rye  is  a  fun  book.  It's  a  good  book  to  read."   }   </script> scriptで 別に定義
  16. 16. どうなる? ©aratana  Inc. 16   構造化データのマークアップをすると   どうなるの?
  17. 17. リッチスニペット ©aratana  Inc. 17   リッチスニペット Products Articles Software Apps Events Videos Reviews Recipes
  18. 18. ナレッジグラフ ©aratana  Inc. 18   ナレッジグラフ Logo Social ProfileContact Numbers
  19. 19. イベントプロモート ©aratana  Inc. 19   イベントプロモート Venus Performer Sites Primary Ticketers
  20. 20. アクションの提供 ©aratana  Inc. 20   アクションの提供 Music Play Critic Review Movie Watch
  21. 21. サイト内検索 ©aratana  Inc. 21   サイト内検索 Site Link Search Box
  22. 22. Thank  You  !! ©aratana  Inc. 22   ご清聴ありがとうございました。

×