『リッチスニペット』を使って、商品を取り扱ったサイトの情報を ちょっとリッチにして検索結果に表示する方法について。
検索結果といえば ページタイトル ページの説明が...何行か表示されて.. http://www.spookies.co.jp/blog/... と、だいたい３つの要素から構成されていますが、
リッチスニペットを使うと ページタイトル ★★★★★ レビュー xx件 - 価格帯: ¥1～¥999,999 ページの説明の上に...何か表示されて.. http://www.spookies.co.jp/blog/... と、 少しリッチな検索結果を表示して見せることができます。 （スニペットとは、検索結果の説明文のことです）
方法は何通りかありますが、 今回はRDFaを使った方法を紹介します。
ほかの手法 (HTML5規格のmicrodataと、任意団体の推進するmicroformats)は、 Googleに日本語ドキュメントがあります。 それを真似すればできると思います。
※RDFaはXHTML規格
それでは 日本語の解説がなくて苦労致しました、 RDFa商品情報リッチスニペットの 日本語解説です！
サンプルを掲載したほうが話が早いように思うので まずはコードをお見せします。 <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Product">
<span property="v:brand">ブランド</span>
<span property="v:category">カテゴリ</span>
<span property="v:description">商品説明</span>
<span property="v:image"><img
src="http://www.spookies.co.jp/img/logo_spookies.gif" alt="商品画像" /></span> <span property="v:name">商品名</span> <span rel="v:review"> <span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> <span property="v:count">総レビュー数</span> <span property="v:rating">平均評価（標準5段階）</span> </span> </span> <span rel="v:offer"> <span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Offer"> <span property="v:availability" content="in_stock">在庫あり</span> <span property="v:condition" content="new">新品</span> <span property="v:price">2000</span> <span property="v:currency"content="JPY">円</span> <span property="v:priceValidUntil" content="2011-08-04">8月4日</span> <span property="v:seller">販売者</span> </span> </span> </div> 。。。と、こんな感じです。
xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Product" これを書いておくと、 検索エンジンはそれ以降のタグを意味付けして解釈してくれます。
”新品”や在庫ありなど、表現が揺れる可能性のあるものは content="" で規格に定められた通りに宣言します。 新品はnew、在庫ありはin_stockなど。 この辺りはGoogleのドキュメントを参照。
さてさて、大まかには <v:Product> <v:Review-aggregate></v:Review-aggregate> <v:Offer></v:Offer> <v:Product> といった構造になっていますが、
製品そのものの情報(v:Product)と、 商品のレビュー情報(v:Review-aggregate)と、 販売情報(v:Offer)は それぞれ異なるタグの体系になります。
それぞれのpropertyは その体系が宣言されている中でしか利用できません。
となると、そのままでは 製品情報、商品レビュー、販売情報が 関連付けられず独立してしまいます。
そこで、 これを一つのまとまりとするために、 rel 属性を利用しています。
v:Productsが宣言された中で <span rel="v:xxxxxx"> と宣言してやると、 （span でも p でも div でも、どれの属性としてでもよい） その中に含まれるものは全て、 外側のv:Productに所属することになります。 <code> <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Product"> <span rel="v:【ここは何でもいい半角】"> <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"></div> </span> </code> こうすることで、 レビューが製品情報に付帯するように扱われます。
ミソは、横着に
のように、 relをv:Review-aggregateと一緒に宣言すると、 うまくいかないらしい...ということです。
microdataなら横着に出来るんですけどね。
また、 親に付帯する子の要素が飛び地になるとダメな様です。
<v:Product v:name v:description <v:Offer v:orice ＜＝ここにOfferの要素 v:Offer> ＜＝ここで一度Offerが閉じてるのに、 v:category <v:Offer v:condition ＜＝ここにもOfferの要素があるとか v:Offer> v:brand v:Product> といったことをしてしまうと、 正常に読み込んでもらえなかったりします。
ちなみに、 <v:Product> v:name <v:Offer></v:Offer> v:description </v:Product> と、親の中に子要素が挟まって分断されるのは 入れ子構造が崩れない限り、特にかまわないようです。
リッチスニペットを導入したサイトがきちんと読み込まれるかは、 Googleの提供するリッチスニペットテストツールで試すことができます。 http://www.google.com/webmasters/tools/richsnippets
