Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

ウェブページのデータを構造化するマークアップ

No description
by

Masafumi Moriwaki

on 6 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of ウェブページのデータを構造化するマークアップ

Open Graph Protocol
ウェブページのデータを構造化するマークアップ
Schema.org と microdata format
Schema.orgとは
Google, Yahoo!, Bing(Microsoft) が共同で進めている、
構造化データの共通仕様を策定する取り組み。
microdataはデータを構造化するためのマークアップ規格で
Schema.orgが標準として採用している。
当該ウェブページが「何についてのページか」を明示する
ウェブページのデータを構造化する
ウェブページ内のデータを標準的な仕様に基づいてマークアップすることで、
実世界の物事との関連性を明確にして、
ウェブにおけるページの利便性/利用可能性を高める。
Open Graph Protocol
microdata (schema.org)
Facebookをはじめとするソーシャルグラフとの連携
検索エンジンでのより質の高い検索結果
ソーシャルグラフとの連携
(facebookページと同等のページになる)
基本的なマークアップ
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<title>ページタイトル</title>
<meta property="fb:app_id" content="0000000">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/sample.html">
<meta property="og:image" content="http://example.com/images/logo.png">
<meta property="og:description" content="ページの概要文">
<meta property="og:sitename" content="ウェブサイト名">
...
</head>
og:typeの種類
music
music.song
music.album
music.playlist
music.radio_station
video
video.movie
video.episode
video.tv_show
video.other
article
book
profile
website
...
http://ogp.me/#types
https://developers.facebook.com/docs/reference/opengraph/object-type
もう少し詳しく...
イベント紹介ページの場合
...
<meta property="og:latitude" content="35.664418">
<meta property="og:longitude" content="139.713247">
<meta property="og:street-address" content="南青山">
<meta property="og:locality" content="港区">
<meta property="og:region" content="東京都">
<meta property="og:postal-code" content="107-0062">
動画掲載ページの場合
<meta property="og:type" content="video">
<meta property="og:video:actor" content="出演者">
実際の表示例
schema.org と Open Graph Protocol
OGPがページ単位の情報を扱うのに対して、
Schema.orgではページ内のコンテンツ、
すなわちマークアップされたデータを対象とする。
基本的なマークアップ例
<div>
<h1>諸葛亮</h1>
<p><img src="ryo.jpg"></p>
<p>中国後漢末期から三国時代にかけての蜀漢(劉備が益州に建てた国)の政治家。字は孔明。</p>
<p>181年生、234年没。父は諸葛珪。兄弟は、呉に仕えた兄・諸葛瑾、同じく蜀漢に仕えた弟・諸葛均がいる。子は蜀漢に仕え、綿竹で戦死した諸葛瞻。</p>
<p><a href="http://ja.wikipedia.org/wiki/%E8%AB%B8%E8%91%9B%E4%BA%AE">Wikipedia</a></p>
</div>
<div
itemscope itemtype="http://schema.org/Person"
>
<h1
itemprop="name"
>諸葛亮</h1>
<p><img src="ryo.jpg"
itemprop="image"
></p>
<p><span
itemprop="nationality"
>中国</span>後漢末期から三国時代にかけての
<span
itemprop="worksFor"

itemscope itemtype="GovernmentOrganization"
>蜀漢(<span
itemprop="founder"
>劉備</span>が<span
itemprop="location"
>益州</span>に建てた国)</span>の政治家。字は孔明。</p>
<p><span
itemprop="birthDate" datetime="0181"
>181</span>年生、
<span
itemprop="deathDate" datetime="0234"
>234</span>年没。父は<span
itemprop="parent"
>諸葛珪</span>。兄弟は、呉に仕えた兄・<span
itemprop="sibling"
>諸葛瑾</span>、同じく蜀漢に仕えた弟・<span
itemprop="sibling"
>諸葛均</span>がいる。子は蜀漢に仕え、綿竹で戦死した<span
itemprop="children"
>諸葛瞻</span>。</p>
<p><a href="http://ja.wikipedia.org/wiki/%E8%AB%B8%E8%91%9B%E4%BA%AE"
itemprop="url"
>Wikipedia</a></p>
</div>
ある事物について書いてあるセクションを指定
itemscope属性を追加
itemtype属性で種類を指定
細かい情報をプロパティとして指定
itemprop属性を指定
itemtypeの例
Thing
CreativeWork
Article, Blog, Book, Movie, Painting ...
Event
Intangible
Organization
Person
Place
Product
構造化データ テストツール
Googleの提供するテストツールを使って、
マークアップした内容が抽出されているか確認する。
propertyの例
共通のもの (Thing)
description, image, name, url ...

Personの場合
birthDate, gender
email, address, telephone
parent, sibling, children
...
構造化してマークアップするメリット
検索結果がリッチスニペットで表示されるため、
ユーザーにアクセスされやすくなることが期待できる
人物
レビュー
商品
facebook デバッガーで確認
https://developers.facebook.com/tools/debug/

メタタグの情報収集状況を確認できる

サイト更新後にfacebook上のキャッシュをクリアするのにも使う
その他には
イベント、レシピなど
Full transcript