情報アーキテクツを考える統計とSEOとweb分析コンテンツ @福岡

schema.org 日本語訳 -get started-

2011年６月２日米国 Google、米国 Microsoft、米国 Yahoo! の3社が
Web ページ向け構造化データ マークアップに必要な共通ボキャブラリなどを策定する取り組み「schema.org」を発表しました。情報アーキテクチャという観点からも非常に見逃せない大事な発表となっております。これによってwebのセマンティック化に
拍車がかかるといいなと願っています。

そこでshema.orgの”get start”の内容を日本語訳しました。個人的に把握するレベルで認識したものをそのままメモのように書き留めてるだけですので判りにくい箇所や語訳もあると思います。もし、ご指摘いただけるなら、コメントよりお願いいたします。
原文はこちらです。
以下、約の内容になります。

Google Yahoo! Bingによるshema.org

ほとんどのwebマスターはHTMLタグで構成されたページについて
詳しく知識をもっています。
通常、HTMLはブラウザに「どのように表示するか？」という情報を
タグに含んでいます。
例えば、 <h1>Avtar</h1>はブラウザに対して、
「Avatorというテキストを見出し１の形式で表示」ということを伝えます。
しかし、HTMLのタグはAvatorというテキスト以外の情報を
webブラウザに教えてはくれません。
Avatorは、有名な３D映画を意味するかもしれないし、
SNSの自分自身のキャラクターかもしれない。
そして、こうした１つの言葉による２つの事を意味する関連性は
検索エンジンがユーザーに対して確かな内容を表示することを難しくしています。

Schema.orgは、ウェブマスターが主要な検索エンジン
Google、Yahoo!,bingに理解されるためのページ上でのマークアップ方法を
集約し、提供します。

Schema.orgを利用するためには、microdata formatを
HTMLコンテンツ上に追加する必要があります。
長期的な目標としては広範囲なフォーマットをサポートすることですが、
今回はMicrodataだけに焦点を絞ります。
このガイドはあなたがいち早くmicrodataを利用してあなたのwebページを
マークアップすることができるように、サポートをします。

1.microdataを利用してマークアップするには
　　a. なぜmicrodataを利用するのか？
　　b. itemscopeとitemtype
　　c. itemprop
　　d. itemを埋め込む

2.schema.org vocabularyを利用する
　　a. schema.org types and properties
　　b. Expected types, text, and URLs
　　c. Testing your markup

3. 応用：バージョン情報を理解させる
　　a. Dates, times, and durations
　　b. Enumerations and canonical references
　　c. Missing/implicit information
　　d. Extending schema.org

1.microdataを利用してマークアップするには

　1a. Why use microdata?
　　　あなたのwebページには、人がそれを読んだとき意味が
　　　判るようになっています。
　　　しかし、それらのページで議論されていることをサーチエンジンが
　　　理解することは限界があります。
　　　HTMLにタグを追加することによってあなたのwebページのタグはこう言います。
　　　「検索エンジンさん、この情報はこの特定の
　　　　映画、場所、人、またはビデオについて説明しますよ」と。
　　　あなたは検索エンジンに対して、またその他のアプリケーションなどに
　　　あなたのコンテンツをより良く理解させ、最適な方法で表示させる事ができます。
　　　microdataはHTML5のタグに含まれることによってこれらのことを可能とします。

　1b. itemscope and itemtype
　　　具体的な実例からはじめてみましょう。映画のアバターに関するページを
　　　持っているとしましょう。
　　　そのページは映画の予告編、ディレクターの情報などがあり、
　　　それらへのリンクがあるとします。
　　　その場合のHTMLコードはこのようになるかもしれません。

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

　　　まずは、映画アバターに関する部分をページから特定してください。
　　　特定できたら、その箇所の情報を含むHTMLにitemscope要素を加えます。
　　　このような形で。

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

　　　itemscopeをHTMLタグ<div>...</div>に加えることによってブロックを
　　　特定のアイテムに指定します。
　　　しかし、この項目がどんな種類かを指定することなく
　　　使用することはできません。
　　　itemscopeを接地した後itemtypeですぐに属性を指定することができます。

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

　　　この指定によってこのdivに含まれた項目は、Movieであるとされます。
　　　schema.orgで定義されるように、階層構造をタイプしてください。
　　　URLとして項目タイプを提供します。
　　　この場合だと、http://schema.org/Movie　となります。

　1c. itemprop
　　　その他にAvatarに関してどのような情報を検索エンジンに追加することが
　　　できるだろうか？
　　　映画には俳優、ディレクター、評論などの興味深い特性があります。
　　　それらの項目の特性をラベルするためにitemprop attributeを利用します。
　　　例えば映画のディレクターを特定します。
　　　itemprop=”director”をディレクターの名前を含めるタグに追加してください。
　　　（映画に関連づけることができるすべての特性に関するリストは
　　　　http://schema.org/Movieにあります）

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

　　　ここでページの適切なテキストにitemprop属性を付けるために追加で
　　　<pre><span>...</span>タグを加えたことに注意してください。
　　　このタグはページがwebブラウザによって表示が変更されることはありません。
　　　それらがitempropと共に使用する便利なHTML要素です。
　　　
　　　サーチエンジンは、現在、まさしくその http://www.avatarmovie.com の
　　　URLですが、それがジェームス・キャメロンによって指示された
　　　サイエンスフィクション映画Avatarのためのトレーラのための、
　　　またそのURLでもあることをそう理解できません。

　1d. Embedded items
　　　item propertyにはそれぞれ個別に設定することができます。
　　　例えば、映画のディレクターには、itemのtypeとしてPersonが指定でき、
　　　Personのプロパティには”name”と”birthDate”があります。新しい項目と、
　　　プロパティを指定するには新しい”itemscope”を設定し、
　　　すぐそのあとにitempropを記述します。

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name"&g;Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

2. Using the schema.org vocabulary

　2a. schema.org types and properties
　　　すべてのwebページが映画と個人についてのモノだけではありません。
　　　MovieとPersonについてはsection1で説明しましたが、
　　　schema.orgのもつ様々なitem typeを説明します。
　　　item typeはそれぞれpropertyをもち、それについての説明も行います。

　　　もっとも広い項目を持っているのはThingです。
　　　４つのpropertyがあり、name, description, url, image です。
　　　より多くの特定のtypeが、より広いtypeとpropertyを共有します。
　　　例えば、例えば、PlaceはThingの、より特定のtypeです。
　　　それとLocalBusinessより特定されたtypeといえます。
　　　より特定の項目は彼らの親の特性を引き継ぎます。
　　　(LocalBusinessが実際に、Placeより特定のtypeと
　　　Organizationのより特定のtypeであるので、
　　　それは両方の親typeからpropertyを引き継ぎます。)

　　　ここに一般的に利用されるitem typeの一覧を用意しています。

　　　●　Creative works: CreativeWork, Book, Movie,
　　　　 MusicRecording, Recipe, TVSeries
　　　●　Embedded non-text objects: AudioObject,
　　　　　ImageObject, VideoObject
　　　●　Event
　　　●　Organization
　　　●　Person
　　　●　Place, LocalBusiness, Restaurant …
　　　●　Product, Offer, AggregateOffer
　　　●　Review, AggregateRating

　　　item typeの一覧はこちらから

　2b. Expected types, text, and URLs
　　　schema.orgをwebページに追加する場合に覚えておくいくつかの
　　　注意があります。
　　　隠しテキストは利用しないほうがよい。
　　　通常マークアップする情報は多ければ多いほど良いです。
　　　しかし、隠されたdivやその他の隠されたページ要素ではなく
　　　人にも見える内容だけをマークアップすべきです。

　　　Expected types vs text schema.orgでtypeをブラウジングしていると
　　　多くのpropertyに”Expected type”があることに気がつくでしょう。
　　　これは、propertyの値がitemに埋め込まれていることを意味します。
　　　（セクション1d：embedded itemsを見てください）
　　　しかし、それは必須条件ではありませんが、
　　　これらには、通常のテキストかURLを含む事を推奨します。
　　　また、さらに、”Expected type”が指定されるときはいつも、
　　　Expected typeの子typeである項目を埋め込む
　　　事を推奨します。例えば、Expected typeが
　　　「Place」だった場合、「LocalBusiness」を埋め込むのもOKです。
　　　
　　　URL propertyを使用する。
　　　いくつかのウェブページが特定の項目に関するものです。
　　　例えば、あなたのwebサイトは独身者に関するページを多く
　　　持っていたとします。これらをPerson item typeをつかって
　　　マークアップします。
　　　その他のページには、そのページの項目について説明したものにします。
　　　例えば、あなたの会社のサイトが雇用している人々のリストページを
　　　持っていたとします。
　　　それぞれ、個人のプロフィールページへリンクしているとします。
　　　項目に関して一覧のページがある場合、各それぞれの項目を
　　　マークアップするべきです。
　　　（この場合、Personで各個別に対応します）各個別に対応するため、
　　　それぞれに対応するページへのリンクにurlのpopertyを加えてください。
　　　下記参照

<div itemscope itemtype="http://schema.org/Person">
  <a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
  <a href="bob.html" itemprop="url">Bob Smith</a>
</div>

　2c. Testing your markup
　　　また、あなたのウェブページレイアウトへの変化をテストするのに、
　　　ウェブブラウザが重要であり、あなたが書くテストコードに、
　　　コードコンパイラが重要であるように、あなたはそれが正しく実装されるのを
　　　確実にするためにschema.orgマークアップをテストするべきです。
　　　Googleはあなたがあなたのマークアップをテストして、
　　　Google rich snippets testing toolを提供します。

　　　
3. Advanced topic: Machine-understandable versions of information
　　　chema.org(セクション2の説明)で定義されたタイプと特性と共に
　　　itemscope、itemtype、およびitemprop属性だけを
　　　使用することで(セクション1の説明)ほとんどのページについて
　　　使用が可能です。

　　　しかしながら、検索エンジンに、item propertyに曖昧さの解消をせず、
　　　理解させるのは難しいです。
　　　 このセクションはあなたのページをマークアップするとき、
　　　あなたがどう検索エンジンに情報のバージョンを
　　　提供できるかを説明します。

　・日付、回数、および持続時間: datetimeがあるtimeタグを
　　使用してください。
　・Enumerations と canonical references: hrefがあるlinkタグを
　　使用してください。
　・Missing/implicit information: contentのある meta tag を
　　利用してください。

　3a. Dates, times, and durations: use the time tag with datetime
　　　日付や時間といったものは、機械にとって理解するのが難しいものです。
　　　「04/01/11」という日付を考えてください。
　　　これは、１月11日2004年を指しているのか？
　　　それとも４月１日2011年を指しているのか？日付を明確にするためには、
　　　datetime属性のtimeタグを使用してください。
　　　datetime属性の値は、YYYY-MM-DD形式を使用することで指定された日付です。
　　　以下のHTMLコードは明白に2011年4月1日として日付を指定します。

<time datetime="2011-04-01">04/01/11</time>

　　　また、時間に関しては”hh:mm”もしくは、”hh:mm:ss”の形式を
　　　利用できます。
　　　時間のまえにTで置いて、こう言った形式で表現します。

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

　　　実際の内容で確認すると、HTMLで場所と、５月８日2011年の
　　　コンサートについて説明したものがあります。
　　　”Event” propertyでは、イベントの名前、ディスクリプション、
　　　およびイベントの日付を含んでいます。

<div itemscope itemtype="http://schema.org/Event">
  <div itemprop="name">Spinal Tap</div>
  <span itemprop="description">One of the loudest bands ever
  reunites for an unforgettable two-day show.</span>
  Event date:
  <time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm</time>
</div>

　　　datetime属性があるtimeタグを使用する類似の方法で期間を
　　　指定できます。
　　　期間はPを前に置き、（Pは期間の略です）ここに調理のレシピとして、
　　　調理時間11 ½ を記入するためには、

<time itemprop="cookTime" datetime="P1H30M">1 1/2 hrs</time>

　　　Hは時間を指定するために使われます。
　　　Mは分を指定するために使われます。
　　　日付、時間、期間は、ISO 8601 date/time standard.によって
　　　指定されています。

　3b. Enumerations and canonical references: use link with href
　　Enumerations
　　　いくつかのプロパティは、使用可能な値の限られたセットを
　　　取得することができます。
　　　プログラマーはしばしば、このことを”enumerations.”と呼びます。
　　　例えば、オンラインストアで売り出している商品には
　　　Offer itemのtypeを指定してofferの詳細を指定できます。
　　　availability propertyは、通常のいずれかを持っていることができる
　　　唯一の​​いくつかの可能な値は、在庫あり、在庫切れ、プレオーダーなど
　　　があります。
　　　多くのitem typeは、URLとして指定されているように、
　　　schema.orgに列挙体の有効な値は、
　　　URLとして指定することができます。
　　　
　　　ここに、販売のためのOffer tipeと関連のpropertyで
　　　マークアップされた、項目があります。

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <span itemprop="availability">Available today!</span>
</div>

　　　Schema.org が提供する enumerations はごく一部のものです。
　　　通常、プロパティの一般的な値の数が限られているどこにいても、
　　　schema.orgで指定された対応するenumerationsがあります。
　　　この例では、availabilityのための可能な値はItemAvailabilityで
　　　指定されます。

　Canonical references
　　　通常、リンクは<a>要素を使用して指定されています。
　　　例えば、以下のHTMLは”ライ麦畑で捕まえて”という本のために
　　　wikipedeiaにリンクしたものです。

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  by <span itemprop="author">J.D. Salinger</a>
  Here is the book's <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page</a>.
</div>

　　　お分かりのように、同じ項目について議論しながら
　　　別のサイト(この場合ウィキぺディア)の1ページへのリンクを
　　　指定するのにitemprop=”url”を使用できます。
　　　3rdパーティーサイトへのリンクは、あなたがウェブページで
　　　説明している項目をより理解するために検索エンジンの検索を
　　　助けることができます。

　　　しかし、あたは自分のサイトのページに、目に見える形でのリンクを
　　　設置したくないと考えているかもしれません。

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>

　3c. Missing/implicit information: use the meta tag with content
　　　webページには時々、マークアップすべき重要な情報がありながら、
　　　ページへの表示方法によって思った通りマークアップできない事があります。
　　　イメージで運用されているデータ（例えば、イメージでユーザー評価が
　　　４であったり、最高は５であったりを表示している）
　　　もしくは、Flashオブジェクトを利用している
　　　（例えば、ビデオクリップの期間であったり）、もしくは情報はあるものの、
　　　ページで明確に記載されていない場合などである
　　　（例えば通貨ごとの価格など）

　　　こういった場合は、content 属性に伴うメタタグを使用して、
　　　情報を指定してください。
　　　イメージとしては、ユーザレビューのアベレージは４で、最高が５つ星です。

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <img src="four-stars.jpg" />
  Based on 25 user ratings
</div>

　　　ここの例では、再度レート情報などをマークアップしています。

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    Based on <span itemprop="ratingCount">25</span> user ratings
  </div>
</div>

　　　このテクニックは控えめに使用されるべきです。
　　　そうでなければマークアップできない情報に単に内容がある
　　　メタを使用してください。

　3d. Extending schema.org
　　　ほとんどのサイトと組織には、schema.orgを広げる理由がないでしょう。
　　　しかしながら、schema.org新たに既存のサイトに価値を追加するか、
　　　もしくは活用されていないデータを現状のサイトで
　　　有効活用することを提供します。
　　　もし、さらにschema.orgの技術に興味をもたれたのなら、
　　　schema.org extension mechanism.をさらにお読みください。