構造化データを使用して検索結果にリッチスニペットを表示する

構造化データって・・・？

詳しくはGoogleウェブマスターツールのヘルプに記載がありますが、
schema.orgに定義されたデータ構造に則ってWEBサイトをマークアップすれば、検索エンジンがサイトの内容を把握して適切に表示する出来るよ。という仕組みです。

このschema.org、ヘルプによると

検索エンジン大手の Google、Microsoft、Yahoo! がウェブの改善を目的として共同で進めている、構造化データ マークアップの共通仕様を策定する取り組み

らしいです。

つまり、構造化データをルールに則ってマークアップしていれば、Googleはもちろん、YahooやBingといった大手検索エンジンでも適切に扱ってくれるというわけですね！

マークアップ方法

ヘルプによるとマークアップ方法は3種類あります。

1. microdata
2. microformat
3. RDFa

Googleでは1のmicrodataを推奨しており、schema.orgのブログもmicrodata書式でマークアップされています。
なので、今回はmicrodata書式でのマークアップの例をご紹介します。

構造化データの書き方サンプル

1. パンくず

適切に記述すれば検索結果のページタイトルの下の部分に緑色で表示されます。パンくずは「Breadcrumb」というスキーマで定義されています。

<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル}}</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル}}</span>
</a>
</li>
</ul>

パンくずの1アイテムを「Breadcrumb」と定義して、URLとパンくずの名前を設定するだけ。
検索結果には前後関係を判断して勝手に表示してくれるようです。

ちなみに、複数のパンくずにも対応しています。

<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li>
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{共通タイトル}}</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル1}}</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル2}}</span>
</a>
</li>
</ul>

<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li>
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{共通タイトル}}</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル3}}</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル4}}</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{{URL}}" itemprop="url">
<span itemprop="title">{{タイトル5}}</span>
</a>
</li>
</ul>

アマゾンなどのショッピングサイトで、商品が複数カテゴリに所属していたりする場合などによくありますね。

2. 新着情報

新着情報やブログ記事なども構造化データとしてマークアップできます。 <div itemscope itemtype="http://schema.org/NewsArticle">
<h1 itemprop="name">{{新着情報のタイトル}}</h1>
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<div itemprop="articleBody">
{{新着記事の内容}}
</div>
</div>

ものすごく簡単な例ですが、新着情報1記事に対して「NewsArticle」というスキーマを定義、
タイトル、公開日、内容をそれぞれ指定しています。

「NewsArticle」に似たスキーマで「BlogPosting」などもあったりするので、新着情報以外にも何かしらの記事を構造化データとしてマークアップする際には最適なスキーマを選ぶようにしましょう。

やっておいて損はない、リッチスニペット

既存のHTMLに少し手を入れるだけで簡単に実現できるリッチスニペット。WordPressなどのCMSではリッチスニペットに対応するプラグインなどもあるようで、わりと簡単に導入できるかと思います。

また、今回紹介した例以外にも非常に豊富な構造化データが提供されているので、一度schema.orgをチェックしてみましょう！
検索結果の見え方がよくなれば、サイトへの検索流入がもっとアップするかも！？