リッチスニペット－検索結果に表示される構造化データの書き方
スポンサーリンク
「リッチスニペット」とは、Googleなどの検索画面で検索結果の文章の他に表示されている、パンくずリストや価格、レビューの表示などです。
パンくずリスト。単にURLが出るより、クリック率も上がります。
食べログやiTunesの検索結果にも出る、レビューの表示などもリッチスニペットの一つ。
他にも、著者情報やイベント日時が出たりするのも、リッチスニペットの種類の一つです。
拙作Welcart対応のWordPressテーマにも、リッチスニペット用のマークアップが施されており、構造化データテストツールで試すと、以下のような表示になります。
実際は価格以外に画像にもマークアップしてありますが、現時点では画像は検索結果には出ないようです
このように、検索結果に文章以外の詳細情報を表示させるには、価格などの情報部分に必要なマークアップを行い、構造化データを追加する必要があります。
難しくないのでチャレンジしてみましょう。
もくじ
- 「構造化データ」をGoogleはどう判断している？
- Google推奨のmicrodataと利用できるボキャブラリー
- 商品ページの必要情報をマークアップ！
- パンくずリストにも構造化データをつけてみよう
- まとめ
1.「構造化データ」をGoogleはどう判断している？
上述の検索結果の例などように、「レビュー」「商品」等の必要な部分に構造化データをマークアップしていれば、Googleが自動的にそれを拾い上げて表示してくれるようになります。
Googleでは、このような「構造化データ」をページに付け加えることを推奨しています。GoogleのCEO、マット・カッツ氏も、ユーザーからの「マークアップは必要？」との質問に「もちろんつけてくれ！」と答えています。
マット曰く、「情報が検索される時に構造化データのマークアップがあれば、検索エンジンロボットがそのページが何なのかをより正確に判断する助けになる」とのことです。
Googleのウェブマスターツールのヘルプページでも、リッチスニペットについて解説されています。
Google では、ページのコンテンツを把握した場合に、ユーザーが特定の検索を行う際に役立つ詳細情報となるリッチ スニペットを作成できます。
たとえば、レストランのスニペットであれば、レビューの平均や価格帯などが表示されます。レシピ ページのスニペットであれば、合計所要時間、写真、そのレシピのレビュー評価などが表示されます。音楽アルバムのスニペットであれば、楽曲のリストと各曲の再生のリンクなどが表示されます。
このようなリッチ スニペットにより、ユーザーが検索キーワードと関連性の高いサイトについて情報を得ることができ、また、そうしたページのクリック数の増加にもつながります。
リッチ スニペットと構造化データについて（Googleウェブマスターツール・ヘルプ）より
情報を探している人にとっては、検索結果画面でより詳しい情報がわかるようになるわけですから、マッチング率も上がり、本当にその情報を求めている人に、自分の情報を見てもらえる確率もアップすることになると思います。
検索してもらいたい側としても喜ばしいことですね。
2. Google推奨のmicrodataと利用できるボキャブラリー
さて、構造化データ用のマークアップの形式には、上述のウェブマスターツールの中でも紹介されていますが、3つの規格があります。
- microdata（Google推奨）
- microformats
- RDFa
microdataはHTML5、microformatsとRDFaはXHTMLとHTML5で使われることが想定されているようです。また、利用するボキャブラリーが標準で定義されていない場合は、<html>タグ内で利用の明示を行う必要が出てきます。
どの規格を使うかは目的や自分のサイトのhtmlの種類によっても変わってきますが、今回はGoogleが推奨しているmicrodataで話を進めたいと思います。
microdataで利用されるschema.orgのボキャブラリー
schema.orgは、GoogleやBing（マイクロソフト）、Yahoo!などの大手検索エンジンが検索結果画面（リッチスニペット）に採用しているボキャブラリーです。schemaはカタカナで書けば「スキーマ」でしょうか？
マークアップに使えるアイテムタイプは、記事ならば「Article」、イベントなら「Event」、商品なら「Product」というように、schema.orgのボキャブラリーの中で分類されています。
それらは更に深い階層を持っていて、例えば「Products」ならば、「name」（商品名）・「description」（説明）などの子階層などがあります。
3. 商品ページの必要情報をマークアップ！
という訳で、さっそくマークアップをしてみましょう。マークアップを行う部分は、イメージ的には以下のようになります。
今回はマークアップしていませんが、他にも「在庫」「SKU」などもマークアップすることが出来ます。
Welcartでこれらのカスタマイズを行う場合は、商品ページのテンプレートを編集する必要が出てきます。使用中のテーマ内にwc_item_single.phpをプラグイン内からコピーしてきて設置（退避）し、それを編集するようにして下さい。
構造化データ マークアップ支援ツールを使おう
使用中のテーマの作りによっても、マークアップすべき場所が変わってきます。どうマークアップすればいいのかは、Googleが提供している構造化データ マークアップ支援ツールを使って確認するのが一番簡単です。
実際のウェブページを読み込んでマークアップのシュミレーションも出来ますが、直接HTMLを入力することも出来るので、ローカル環境で制作していてもマークアップすべき部分の確認が出来ます。
3-1. 全体をProductでマークアップ
まずは商品ページを包括しているタグに、Productというschemaを追加します。Welcartデフォルトテーマの場合、46行目（単数SKU）と81行目（複数SKU）の<form>がそれに当たるようです。
<form action="<?php echo USCES_CART_URL; ?>" method="post" itemscope itemtype="http://schema.org/Product">
3-2. 商品名
次に、商品名を出力するタグusces_the_itemName();を、nameでマークアップ。wc_item_single.phpの28行目（単数SKU）と72行目（複数SKU）の2箇所あります。
<h2><span itemprop="name"><?php usces_the_itemName(); ?></span>(<?php usces_the_itemCode(); ?>)</h2>
3-3. 画像
画像もこの調子でマークアップしたいところですが、商品画像を出力するタグusces_the_itemImage();は、それだけで<img>を全て包括して出力してしまいます。つまり、テンプレートをいじって<img>タグの中にschemaを入れることが出来ません。
そこで私の場合は、以下のようにjQueryを使って、<img>の中にitemprop=”image”を入れる命令を読み込むようにしました。
Welcartのデフォルトテーマであれば、商品のメイン画像は<div class=”itemimg”></div>の中に入れられています。その中の<img>タグに属性を追加しますので、jQueryのスクリプトは以下のようになります。
jQuery(function($) {
$('.itemimg img').attr('itemprop', 'image');
});
スクリプトはWordPressではfunctions.phpで読み込めればいいですが、難しい場合は<script type=”text/javascript”></script>ではさんで、</head>直前に入れればOKです。
ただ、imgの構造化データは、検索結果には（今のところ）表示されないので、無理にマークアップをしなくてもいいかもしれません。
3-4. 商品の説明
商品の説明には、itemprop=”description”をつけます。
Welcartでは、説明部分はthe_content();が出力しています。デフォルトテーマではここは特に要素で囲まれていないので、divで囲ってしまえばよいでしょう。
<div itemprop="description"> <?php the_content(); ?> </div>
3-5. 価格
価格には、itemprop=”price”というデータが対応していますが、価格はOfferというカテゴリーに大別される為、例えば以下のようになります。
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">500円</span> </div>
Welcartのデフォルトテーマならば、価格の部分は<div class=”field”>というdivで囲われているので、そこにOfferを足し、<div class=”field_price”>にpriceを加えればよいでしょう。
<div class="field" itemscope itemtype="http://schema.org/Offer">
--略--
<div class="field_price" itemprop="price"><?php usces_the_itemPriceCr(); ?></div>
</div>
4. パンくずリストにも構造化データをつけてみよう
余力があれば、是非パンくずリストにも構造化データをつけてみて下さい。
Welcartのデフォルトテーマにはパンくずリストはついていませんが、ご自身のECサイトでパンくずリストを使っている方も多いと思います。
パンくずリストを構造化データでマークアップすることによって、検索結果ではカテゴリー名などが表示されるようになりますので、検索ユーザーにとってわかりやすく、よりクリックしてもらえる材料となります。
パンくずリストの構造化データは、「商品」とはまた少々変わりますので、以下のGoogleの記事をご参照下さい。
リッチ スニペット – パンくずリスト － Googleウェブマスターツール
一例として、当ブログのパンくずリストはこんな風になっています（以下はわかりやすいようにクラス名などは削除してあります）。
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://welcustom.net" itemprop="url"><span itemprop="title">Welcart カスタマイズ ブログ TOP</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://welcustom.net/category/seo/" itemprop="url"><span itemprop="title">WelcartのSEO対策</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">リッチスニペット－検索結果に表示される構造化データの書き方</span></li>
</ol>
パンくずリストを構造化データでマークアップする場合は、それぞれのパンくずに、以下の構造化データを追加します。
itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”
上記の例では、<a>タグをitemtype=”url”で、タイトルをitemtype=”title”でマークしています。
5. まとめ
構造化データは検索順位を押し上げるものではありませんが、検索結果に自分のサイトが表示される際に、検索ユーザーにアピールできる材料となり、クリック率やマッチング率のUPが期待されます。
マークアップ自体はデザインに影響を与えるものではないので、安心して取り入れられるのもいいですね。
何よりGoogleが推奨しているものですので、今からやって損はないでしょう。構造化データマークアップ支援ツールなども使いながら、是非導入してみて下さい。
[…] リッチスニペット－検索結果に表示される構造化データの書き方 […]
投稿画面で記述したものをthe_content();で吐き出した場合、
投稿画面で一つ一つの商品に構造化データをマークアップしなければならないのでしょうか？
それともなにか一括で記述できる方法はあるのでしょうか？
the_content();は、Welcartでは商品説明部分に当たります。記事ではそれを構造化データ（schema）のdescriptionに当たると判断して、マークアップしています。商品名や価格はそれぞれ別のテンプレートタグが出力しているので、それらはまた別のschemaでマークアップしています。これらは商品ページのテンプレートを編集しているので、全ての商品ページで適用されます。
もしthe_content();が出力する内容（＝自分が入力する商品説明）の中で、リッチスニペットに表示させたい（Googleに認識させたい）ものがあるのなら、その都度マークアップする必要が出てくると思います。
[…] リッチスニペット－検索結果に表示される構造化データの書き方 […]