NHN Japan ウェブサービス本部の「キョウ」と申します。
NAVERサービスのマークアップ等を担当している、「突っ込みづらいキャラ」で有名な男ですw
今回はマークアップエンジニアやSEOエンジニアの中で注目を集めている、
schema.orgについてご説明させていただきます。
この記事を読んでいる方の中には「schema.org公式サイト（英）」
「schema.org 日本語訳」をご覧になった方も多いと思いますが・・・
皆様理解できましたか？
正直難易度が高いと思うので、初心者向けに内容を砕いて説明していきます。
目次
1. schema.orgとは？
簡単に説明すると、schema.orgの仕様通りにHTMLをマークアップする事で、
リッチスニペットの表示や、検索エンジンにコンテンツの情報を伝える事ができます。
Google、Yahoo!、Microsoft 3社が共同でセマンティックウェブを導入しやすい環境作りに取り組む。検索結果に詳細情報を反映するために必要な構造化データについて、フォーマットや形式を標準化した Schema.org イニシアティブを発足。
スキーマとは、ウェブマスターがページをマークアップすることによって大手検索プロバイダーに認識されやすくなるHTMLタグです。 Bing、Google、Yahoo! などの検索エンジンサイトはこのマークアップを通してより質の高い検索結果を出すことができ、またユーザは探したいページを簡単に見つけられるようになります。
2. schema.org導入メリットは？
schema.orgの導入メリットは下記の2点
- 検索エンジンでリッチスニペットを表示させる事ができる
- ページのカテゴリやテーマを検索エンジンに伝える事ができる
特にリッチスニペットは画像や評価等の情報を掲載できるため、ユーザーの目線誘導に大きな影響を与えます。
それにより、クリック率が増加し、アクセスに大きな影響を与える事ができます。
[参考] Googleマップのアイトラッキング調査で明らかになったソーシャルシグナルの重要性
2011年11月現在の対応状況は、
Googleはschema.orgによるリッチスニペット表示に対応しており
bingはこれから対応を始めていくようです。
そして、今後schema.orgによって今まで手間がかかった、
下記の検索への掲載申請も不要になって行きます。
- Googleショッピングへの掲載依頼（schema.orgに対応済）
- Googleブログ検索への掲載依頼
- Google動画検索への掲載依頼
schema.orgは検索エンジン最適化（SEO）を行う上で必ず知っておくべき技術と言えるでしょう。
3. schema.org 初心者向けQ&A
まずは「schema.org公式サイト（英）」「schema.org 日本語訳」を
簡単にご覧になった上で、下記のQAをお読みください。
Q：schema.orgの指定はサイト単位？ページ単位？
A：ページ単位で指定を行います。
「リッチスニペットを表示する為に利用する」と考えればイメージしやすいと思います。
Q：itemtype属性って何を指定すればいいの？
A：皆様「itemtypeの値をどうすればいいのかわからない！」「どんな種類があるのかわからない」と思ってる方も多いでしょう。
実はこの値、schema.org公式サイトのURLなのです！実際にブラウザからURLを叩いてみればわかります。
<div itemscope itemtype="http://schema.org/City">
～～～省略～～～<
/div>「今から私が書く内容はこのページに書かれている内容です！」と言う宣言と思ってください。
Q：サンプルにitemtypeの中でitemtypeが指定されているものがあるのですが・・・
A：はい。使われます。
商品のレビュー等の情報を定義する場合、「商品型」の中に「レビュー型」を内包して使います。
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
～～～省略～～～
</div>
</div>Q：型を一通り読みましたがどれを選べばいいのか分かりません。
A：とりあえずschema.org日本語訳基に、分かりやすいように3種類に分類してみました。
- Categoryタイプカテゴリを意味するItem型 商品、イベント、組織、人等
- CreativeWorkタイプWEBサイトのページやコンテンツを意味するItem型 画像ギャラリー、ナビゲーション等
- Intangibleタイプ上2つの中で利用するItem型 レビュー、商品販売状況
「CreativeWork」と「Intangible」ツリー以外は、ページのカテゴリを示すものと思ってください。
◆対応手順
1.Item型の一覧ページから該当するItem型を探し出しクリック。
2.URLをコピペしてitemtypeを設定。
例えば、ページが「東京の地域情報」の場合は、
Place > AdministrativeArea > Cityのページが該当ページになります。
http://www.schema.org/City
その為、itemtype属性を指定する場合下記ようになります。
<div itemscope itemtype="http://www.schema.org/City">
～～～省略～～～
</div>Q：プロパティで指定する値ってどこ見ればわかる？
A：下記のページを基に説明していきます。
上記表の「Property」と書かれている値がitemprop属性で指定する値です。
そして、「Expected Type」項目が入力形式を示しています。
Text、URL、Date、Numberは下記のように指定します。
//Expected TypeがText
<span itemprop="{Property}">テキストデータです</span>
//Expected TypeがURL
<span itemprop="{Property}">http://www.schema.org</span>
//Expected TypeがDate
<span itemprop="{Property}" content="2011-04-01">2011年4月1日</span>
//Expected TypeがNumber
<span itemprop="{Property}">4</span>
<span itemprop="{Property}" content="4">四</span>で・・・・「Expected Type」にリンクがついているのは何かと言うと、
「item型を入れ子にして利用してね」と言う意味です。
ProductのReviewを例にすると
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">掃除機</span> - <span itemprop="author">山田太郎</span>,
<meta itemprop="datePublished" content="2011-04-01">2011年4月1日
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>
</div>
<span itemprop="description">割と使える掃除機でした。</span>
</div>
</div>型を入れ子にして使う場合「itemprop」「itemscope」「itemtype」を設定します。
4. schema.org実践編
上記の説明で基本は把握できたと思います。あとはマークアップするだけですね。
と言うことで導入手順を説明いたします。
下記ページがitem型のルールと構造を示してる図になっています。
http://schema-ja.appspot.com/docs/full.html
1.自分のページにマッチする、item型を選びクリックします。
2.URLをコピーし「itemtype属性」を定義する。
<div itemscope itemtype="http://www.schema.org/Product">
～～～省略～～～
</div>3.「Properties」項目を基に「itemprop属性」を定義する。
<p itemprop="description">三菱電機 [23インチ ブラック]が超お得価格で販売。</p>4.「Expected Type」項目にリンクがある場合、リンクをクリック
5.ページの内容を基に「itemtype属性」と「itemprop属性」を定義し、2～4の手順を繰り返す。
<div itemprop="aggregateRating" itemscope itemtype="http://www.schema.org/AggregateRating">
<span itemprop="bestRating">1</span>/
<span itemprop="ratingValue">5</span>
～～～省略～～～
</div>上記の手順で行うことによって、schema.orgの仕様にのっとったマークアップができるようになります。schema.orgのルールをすべて覚えるのは難しいので、schema.org公式サイトを参考にしながら作業を行いましょう。
つまり「schema.org公式サイト」は
schema.org導入の為のツールと言っても過言ではありませんね。
■リッチスニペットを表示する為の重要事項
忘れる方が多いのですが・・・・
Googleでリッチスニペットを表示する為には申請が必要です。申請後1～2カ月程度で反映されるようですが、隠しテキストがサイト内に含まれると却下されるようなので気を付けてください。
5. 最後に
今回、schema.orgの使い方について説明いたしましたが、皆様はどう思いましたか？
実は2011年6月7～8日にシアトルで開催された「SMX Advanced 2011」で、こんな事が・・・
パネリストは、Schema.orgのタグがコードの膨張につながる点に関してコメントし、
最終的に新しいSchema.orgの新しいタグを使ってサイト全体のコーディングをやり直す取り組みを推奨するパネリストは一人も現れなかった。
そして、Schema.orgのタグをSEO戦略として利用する点に対して、経験に基づいた証拠もまた提示されなかった。
Schema.orgを推奨するパネラーはいなかったそうです。
マークアップエンジニア目線で見ても、Schema.org導入によって運用が困難になると想定されます。導入の際は運用ルールをしっかり策定して行ったほうが良いでしょう。
■schema.orgは導入するべきか？
2012年2月現在、schema.orgによる恩恵は多くありません。
schema.orgによる検索順位アルゴリズムや検索結果への大きな影響もありませんし、
「google リッチスニペット」もschema.orgの変わりに
「microdata（data-vocabulary.org）」で対応できる状態です。
ただし、今後の検索エンジンの対応によっては、schema.orgを使用しなければならない場面が出てくると思います。その際にこの記事を参考にしていただけばと思います。