5
kurita『リッチスニペット』を使って、商品を取り扱ったサイトの情報を
ちょっとリッチにして検索結果に表示する方法について。
検索結果といえば
ページタイトル
ページの説明が…何行か表示されて..
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>
こうすることで、
レビューが製品情報に付帯するように扱われます。
ミソは、横着に
xmlns:v="http://rdf.data-vocabulary.org/#"typeof="v:Review-aggregate">
のように、
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
Leave a Reply