schema.orgを使いましょう
ウェブサイトを作っているほとんどの人がHTMLタグについてご存じでしょう。一般的に、HTMLタグはブラウザーに対してタグ内の情報をどのように提示するかを指示します。例えば、<h1>Avatar<h1>とすれば、ブラウザーは文字列Avatarを大見出しとして表示します。しかし、HTMLタグはこの文字列が何を意味するかについての情報は与えられません。Avatarは大ヒットした映画のことかもしれませんし、インターネット上のプロフィール画像のことを指すかもしれません。このために、検索エンジンが関連した内容を見つけるのが難しくなってしまうのです。
Schema.orgは、ウェブサイトを、Google、Microsoft、Yahoo!などの巨大な検索エンジンでヒットさせるために使える用語集を提供するものです。
Schema.orgの用語集とmicrodata formatを使用すれば、HTMLに情報を加えることができるようになります。長期的なゴールは様々なフォーマットを使えるようになることですが、まずはmicrodataから始めます。このガイドを読めば、ウェブサイトにマークアップを追加できるようになるはずです。
1. microdataを使ったマークアップの仕方
1a. microdataの利点
人間であれば、ウェブサイト上の情報を読み理解することができます。しかし、検索エンジンはウェブ上で提示されている情報のうち限られた量しか理解できません。HTMLにタグを追加することによって、例えば、この情報はこの映画の、この場所の、この人の、このビデオのことを説明しているんだよと検索エンジンに伝えることによって、検索エンジンや他のアプリケーションが内容を理解し、関連のある情報を提示できるようになります。HTML5と共に登場したmicrodataを使えば、こういったことが可能になるのです。
1b. itemscopeとitemtype
具体的な例から見ていきましょう。あなたは、映画Avatarについてのウェブページを持っているとします。そこには、映画のトレーラーへのリンクや、監督についての情報などが載っているでしょう。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>
まず、Avatarについて書いてあるセクションを指定しましょう。そのためには、itemscope要素を映画についての情報を含むHTMLタグに追加します。すると、下記のようになります。
<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を追加することによって、<div>と</div>の間にあるHTMLがある特定のものについての情報であると示すことになります。
しかし、あるものについての情報があると分かっても、それが一体どのようなものなのかが分からなければ意味がありません。項目の種類を特定するには、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>
こうすることによって、schema.orgの階層内で定義されているとおり、divの中にある項目は映画であると特定することができます。項目の種類はURLで表示されます。この例でいえば、http://schema.org/Movieの部分です。
1c. itemprop
映画Avatarには、他にどのような情報を追加できるでしょう？映画には、俳優や監督、評価といったプロパティがあります。項目のプロパティをラベル付けするには、itemprop属性を使用します。例えば、映画の監督を指定するには、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>
<span>・・・</span>というタグがitemprop属性をテキストと結び付けるために使われていることに注目してください。<span>タグは、ウェブサイトがウェブブラウザー上にどのように表示されるかは変化させないので、itempropと共に使うには便利なHTML要素なのです。
これで、検索エンジンが、http://www.avatarmovie.com はURLというだけでなく、ジェームズ・キャメロン監督のSF映画のトレーラーのURLだと分かるようになりました。
1d. 埋め込み項目
ある項目プロパティの値自体が、異なるプロパティを持った別の項目であることもあります。例えば、映画の監督を人という型であると特定することもできますが、人は名前や誕生日といったプロパティを持っています。あるプロパティの値が別の項目であると特定するためには、itempropのすぐ後で新しいitemscopeを使ってください。
<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. schema.orgを使う
2a. schema.orgの型とプロパティ
全てのウェブサイトが映画や人に関してのものであるわけではありません。セクション1で説明した映画や人といった型に加え、schema.orgは様々な項目のタイプを説明しています。それぞれが項目を説明する独自のプロパティを持っています。
最も大きな項目の型はThing(もの)です。Thingには、名前、詳細、URL、イメージという4つのプロパティがあります。子タイプは、親タイプと同じプロパティを持っています。例えば、Place(場所)はThingの子タイプです。また、LocalBusinesはPLaceの子タイプです。子アイテムはそれぞれの親の性質を受け継いでいます。（LocalBusinesは、Placeの子タイプですが、同時にOrganization(組織)の子タイプでもあります。つまり、両方の性質を受け継いでいるのです。）
下記が一般的な項目の型のリストです。
- クリエイティブな作品: CreativeWork, Book(本), Movie(映画), MusicRecording(曲), Recipe(レシピ), TVSeries(テレビの連続番組) ...
- 文ではない埋め込みオブジェクト: AudioObject(オーディオファイル), ImageObject(画像ファイル), VideoObject(ビデオファイル)
- Event(イベント)
- Organization(学校、NGOなどの組織)
- Person(人)
- Place(場所), LocalBusiness(組織が有する実際の店舗や支店), Restaurant(レストラン) ...
- Product(製品), Offer(オファー), AggregateOffer()
- Review(レビュー、評価), AggregateRating(レビューの平均)
こちらで、全リストを見ることができます。
2b. 予期できるタイプ、テキスト、そしてURL
schema.orgのマークアップを使う際に覚えておくと便利なことを以下に記します。
- 隠されたテキスト以外の場所では、より多くのマークアップを使ったほうが良い一般的に、多くのマークアップを使ったほうが良いのです。しかし、ウェブサイトを訪れた人が読める範囲のものをマークアップして、それ以外の隠されたdiv内の内容や隠された要素などはマークアップしないというのが慣習であることを覚えておいてください。
- 予期できる型とテキストschema.orgをブラウズしていくと、多くのプロパティが"予期できる型"を持っていることに気付くと思います。つまり、プロパティの値自体が埋め込み項目であるということです。しかし、これは必須ではありません。テキストとURLだけを含むようにしてもかまいません。また、予期できる型を特定するときは、その型の子タイプを埋め込んでもかまいません。例えば、予期できる型がPlaceであるなら、LocalBusinessを埋め込んでもいいのです。
- URLプロパティを使うある特定の項目だけを扱っているウェブページも存在します。例えば、ある一人の人に関するウェブページであれば、Personの型を使ってマークアップできます。色々な項目があるウェブページもあるでしょう。例えば、会社のウェブサイトには従業員のリストがあり、そこに個人のプロフィールに繋がるリンクを載せることもできます。このような色々な項目のあるウェブページでは、項目を一つずつマークアップして（この会社の例で言えば、一人一人を人としてマークアップします）、URLプロパティを各項目のリンクに加えてください。下記がその例です。
<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. マークアップが正しいかの確認
ブラウザーがウェブパージのレイアウトの変更を確認するのに重要であるように、またコンパイラーがコードの動作を確認するのに重要であるように、使用したschema.orgのマークアップが正しいかを見る必要があります。Googleが提供しているリッチスニペットを使って、マークアップが正しいか、また間違いがあるならばどこにあるのかを確認してください。
3. 応用編: パソコンにも理解可能な情報
セクション1とセクション2で見てきたように、多くのページはitemscope属性、itemtype属性、itemprop属性とschema.orgで定義されている型やプロパティを使って記述できます。
しかし、項目プロパティは追加情報がないと曖昧になってしまうことがあります。このセクションでは、ウェブページをマークアップする際に、この曖昧さを解消する方法をみていきましょう。
- 日付、時間、期間には、timeタグとdatetimeを使います
- リスト、参照には、linkタグとhrefを使います
- 表示されていない情報には、metaタグとcontentを使います
3a. 日付、時間、期間: timeタグとdatetime
日付や時間は機械が理解するには難しいものです。例えば、“04/01/11”ですが、これは2004年の1月11日でしょうか、2011年の1月4日でしょうか、それとも2011年の4月1日でしょうか。このような曖昧さを解消するにはtimeタグとdatetime属性を使います。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>
実際の使用例を見てみましょう。下記は2011年の5月8日に開かれるコンサートの情報を示すHTMLコードです。このコンサートのマークアップは、名前、詳細、そして日付を含んでいます。
<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>
期間はP（期間を表わす英語のperiodのpです）を前に付けます。下記のコードは1時間半かかる料理のレシピのコード例です。
<time itemprop="cookTime" datetime="P1H30M">1 1/2 hrs</time>
Hは時間を、Mは分を指定するために使われています。
日付、時間、期間の基準はISO 8601 date/time standardによって特定されています。
3b. リストと参照: linkとhref
リスト
プロパティの中には、限られた値しか取らないものもあります。これらは、リスト（enumerations）と呼ばれます。例えば、一つの商品を扱うオンラインストアはOffer項目を使って商品の詳細を特定します。availabilityプロパティは、限られた値の中から一つだけを取ります。In stock, Out of stock, Pre-orderなどです。項目プロパティがURLで特定されるのと同様に、schema.orgにおけるリストの値もURLで特定されます。
下記は、Offerタイプとそれに関連するプロパティを使ってマークアップされた商品の例です。
<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>
下記は同じ商品を、リンクとhrefを使ってavailabilityプロパティを特定したコードです。
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> <link itemprop="availability" href="http://schema.org/InStock"/>Available today! </div>
schema.orgにはリスト用に多くのプロパティが用意されています。特に、あるプロパティが取りうる値が限られている場合、schema.orgにはそれに対応したリストが必ずあります。上記の例では、availabilityが取りうる値はItemAvailabilityで特定されています。
参照（canonical references）
基本的にリンクは要素を使って特定されます。例えば、下記のHTMLコードは、英語版Wikipediaの“ライ麦畑で捕まえて”のページへのリンクが載っています。
<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>
御覧の通り、itemprop=”url”は、別のウェブサイトの同じ項目を扱っているページへのリンクを特定するのに使われます。（上記の例では、Wikipediaです。）別のウェブサイトへのリンクを使えば、検索エンジンがあなたのウェブサイトで扱っている項目を見つけやすくなります。
しかし、リンクをそのまま載せるのはやめたほうが良いでしょう。こういうときは、下記のようにlink要素を使いましょう。
<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. 表示されていない情報: metaタグとcontent
マークアップする価値のある情報でも、その情報のウェブページへの載せ方のためにマークアップ出来ないこともあるでしょう。例えば、評価を5つ星で表わすようなイメージや、動画の長さのようなFlashオブジェクトのもの、値段の通貨のようにページ上ではっきりと述べられていないものなどです。
こういったときは、metaタグと共にcontent属性を使って情報を特定しましょう。下記の例は、5つ星で4つ星の評価のものを表示するコードです。
<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>
しかし、これはあまり頻繁に使わないようにしてください。metaタグはマークアップ出来ない情報にのみ使いましょう。
3d. schema.orgの拡張
ほとんどのウェブサイトや組織にはschema.orgを拡張する理由などないでしょう。しかし、schema.orgでは、新たなプロパティや既在の型の子タイプを特定することが出来ます。興味がおありでしたら、schema.org 拡張メカニズムをお読みください。