読者です 読者をやめる 読者になる 読者になる

スプーキーズの中の人。

スプーキーズの中の人が徒然なるままに、垂れ流します。

RDFaリッチスニペットで検索結果に商品情報を表示する

『リッチスニペット』を使って、商品を取り扱ったサイトの情報を ちょっとリッチにして検索結果に表示する方法について。

検索結果といえば ページタイトル ページの説明が...何行か表示されて.. http://www.spookies.co.jp/blog/... と、だいたい3つの要素から構成されていますが、

リッチスニペットを使うと ページタイトル ★★★★★ レビュー 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">

&lt;span property=&quot;v:brand&quot;&gt;ブランド&lt;/span&gt;
&lt;span property=&quot;v:category&quot;&gt;カテゴリ&lt;/span&gt;
&lt;span property=&quot;v:description&quot;&gt;商品説明&lt;/span&gt;
&lt;span property=&quot;v:image&quot;&gt;&lt;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