Successfully reported this slideshow.
Your SlideShare is downloading. ×

実践!構造化マークアップ

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
HTML5 Web Design Workflow
HTML5 Web Design Workflow
Loading in …3
×

Check these out next

1 of 46 Ad

More Related Content

Similar to 実践!構造化マークアップ (20)

Recently uploaded (20)

Advertisement

実践!構造化マークアップ

  1. 1. 実践!構造化マークアップ 小川裕之 2015.05.11 書籍『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント
  2. 2. 2012 年 4 月よりフリーランスとして独立。 Webデザイン・コーディングの受託を中心に、雑誌への寄稿、 最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。 横浜在住。 小川 裕之 barchin  hiro.ogw 「レスポンシブWebデザイン入門」 「現場のプロが教えるHTML+CSSコーディングの最新常識  知らないと困るWebデザインの新ルール4」執筆
  3. 3. 今日話すこと •構造化データとは •構造化マークアップの実践
  4. 4. 構造化データとは?
  5. 5. ! ? 『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント 開催日時 :2015年5月11日(月)19:30∼21:30 会場   :株式会社ディー・エヌ・エー 参加費  :1,000円 講演者  :小川裕之、大竹孔明、中江亮
  6. 6. 構造化データ 『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント 開催日時 :2015年5月11日(月)19:30∼21:30 会場   :株式会社ディー・エヌ・エー 参加費  :1,000円 講演者  :小川裕之、大竹孔明、中江亮 ! Event Event location Event performer !?
  7. 7. メリット • 情報が正確にインデックスされる • 音声検索や地図検索で適切な情報が得られる • リッチスニペットやナレッジグラフに反映
  8. 8. 情報 (HTML) シンタックス ボキャブラリー ++ 構造化データ
  9. 9. 情報 (HTML) シンタックス ボキャブラリー ++ 構造化データ 記述方法 意味を表す 定義
  10. 10. シンタックス • RDFa(RDFa Lite)
 HTMLだけでなく、XML(X)HTML、にも使える。勧告済み。 • Microdata
 HTML5の仕様の一つとして策定。現在は止まってる。 • JSON-LD
 JSONベースのリンクトデータ。勧告済み。
  11. 11. ボキャブラリ • Scheme.org
 Google、Yahoo!、Bing(後にYandex)が中心となって策定。 • Data-vocabulary
 開発終了。Scheme.orgに引き継がれる。
  12. 12. 実践
  13. 13. <h1>『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl>
  14. 14. Microdata + Scheme.org
  15. 15. <div itemscope itemtype=""> <h1>『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  16. 16. <div itemscope itemtype="http://schema.org/Event"> <h1>『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  17. 17. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  18. 18. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  19. 19. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate">2015年5月11日 19:30</time> ∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  20. 20. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  21. 21. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼<time itemprop="endDate" datetime="2015-05-11T21:30">21:30</time></dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  22. 22. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼<time itemprop="endDate" datetime="2015-05-11T21:30">21:30</time></dd> <dt>会場</dt> <dd itemprop="location">株式会社ディー・エヌ・エー (東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  23. 23. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼<time itemprop="endDate" datetime="2015-05-11T21:30">21:30</time></dd> <dt>会場</dt> <dd itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">株式会社ディー・エヌ・エー</span> (<span itemprop="address"> 東京都渋谷区渋谷2-21-1</span>) </span> </dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl> </div>
  24. 24. <div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念 イベント</h1> <dl> <dt>開催日時</dt> <dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼<time itemprop="endDate" datetime="2015-05-11T21:30">21:30</time></dd> <dt>会場</dt> <dd itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">株式会社ディー・エヌ・エー</span> (<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressRegion">東京都</span> <span itemprop="addressLocality">渋谷区</span> <span itemprop=“streetAddress">渋谷2-21-1</span> </span>) </dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl>
  25. 25. <dt>講演者</dt> <dd> <span itemprop="performer" >小川裕之</span>、 <span itemprop="performer" >大竹孔明</span>、 <span itemprop="performer" >中江亮</span> </dd> </dl> </div>
  26. 26. <dt>講演者</dt> <dd> <span itemprop="performer" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">小川裕之</span> <span itemprop="worksFor">ツクリベ</span> </span>、 <span itemprop="performer" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">大竹孔明</span> <span itemprop="worksFor">株式会社ディー・エヌ・エー</span> </span>、 <span itemprop="performer" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">中江亮</span> <span itemprop="worksFor">株式会社ディー・エヌ・エー</span> </span> </dd> </dl> </div>
  27. 27. https://developers.google.com/structured-data/testing-tool/
  28. 28. RDFa Lite + scheme.org
  29. 29. <div vocab="http://schema.org/" typeof="Event"> <h1 property="name">『現場のプロが教えるHTML+CSSコーディングの最新常識』 発売記念イベント</h1> <dl> <dt>開催日時</dt> <dd><time property="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time> ∼<time property="endDate" datetime="2015-05-11T21:30">21:30</time> </dd> <dt>会場</dt> <dd property="location" typeof="Place"> <span property="name">株式会社ディー・エヌ・エー</span> <span property="address" typeof="PostalAddress"> <span property="addressRegion">東京都</span> <span property="addressLocality">渋谷区</span> <span property="streetAddress">渋谷2-21-1</span> </span> </dd> <dt>講演者</dt> <dd>
  30. 30. JSON-LD + Scheme.org
  31. 31. <script type="application/ld+json"> { "key": "value", "key": "value", "key": "value", "key": "value" } </script> <h1>『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント</h1> <dl> <dt>開催日時</dt> <dd>2015年5月11日 19:30∼21:30</dd> <dt>会場</dt> <dd>株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)</dd> <dt>講演者</dt> <dd>小川裕之、大竹孔明、中江亮</dd> </dl>
  32. 32. <script type="application/ld+json"> { "@context": "http://schema.org" } </script>
  33. 33. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", } </script>
  34. 34. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント" } </script>
  35. 35. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント”, "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30" } </script>
  36. 36. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location":"株式会社ディー・エヌ・エー(東京都渋谷区渋谷2-21-1)" } </script>
  37. 37. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location":{} } </script>
  38. 38. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location": { "@type": "Place", "name": "株式会社ディー・エヌ・エー", "address":"東京都渋谷区渋谷2-21-1" } } </script>
  39. 39. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location": { "@type": "Place", "name": "株式会社ディー・エヌ・エー", "address": { "@type": "PostalAddress", "addressRegion": "東京都", "addressLocality": "渋谷区", "streetAddress": "渋谷2-21-1" } },
  40. 40. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location": { "@type": "Place", "name": "株式会社ディー・エヌ・エー", "address": { "@type": "PostalAddress", "addressRegion": "東京都", "addressLocality": "渋谷区", "streetAddress": "渋谷2-21-1" } }, "performer":["小川裕之","大竹孔明","中江亮"] } </script>
  41. 41. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "『現場のプロが教えるHTML+CSSコーディングの最新常識』発売記念イベント", "startDate": "2015-05-11T19:30", "endDate": "2015-05-11T21:30", "location": { "@type": "Place", "name": "株式会社ディー・エヌ・エー", "address": { "@type": "PostalAddress", "addressRegion": "東京都", "addressLocality": "渋谷区", "streetAddress": "渋谷2-21-1" } }, “performer”:[{},{},{}] } </script>
  42. 42. "performer": [ { "@type" : "Person", "name" : "小川裕之", "worksFor" : "ツクリベ" }, { "@type" : "Person", "name" : "大竹孔明", "worksFor" : "株式会社ディー・エヌ・エー" }, { "@type" : "Person", "name" : "中江亮", "worksFor" : "株式会社ディー・エヌ・エー" } ] } </script>
  43. 43. JOSON-LDの特徴 • HTMLと分離できる • データを取得して処理がしやすい • 各種言語から生成ができる
  44. 44. http://json-ld.org/
  45. 45. まとめ • 構造化データにすることで、情報を正確に発信でき 効果的に扱うことができる • 構造化データは作りやすくなっている • アプリ・IoTの普及を考えると更に必要性は高まる
  46. 46. ご清聴ありがとうございました。

×