業務用IT機器の通販サイト
カゴの中を見る

技術ノートインデックスへ

hProduct Microformat 0.3対応について

2009/11/26 – ma2shita

記載内容については利用規約：第１４条「責任事項」に則っております。要するに At Own Your Riskです。また、本ページにおいては問い合わせは受け付けておりません。問い合わせないでください。担当が泣き、公開を止めてしまうかもしれません。

概要

ぷらっとオンラインでは、2009/11/25より商品詳細ページにおいてMicroformatsのhProduct 0.3に対応しています。(以下、hProductとします。バージョンは言及がない限り0.3を対象としています。)
本ページはぷらっとオンラインをどうやってhProductを適用したのか、hProduct適用時の注意点をまとめたものです。

hProduct適用のメリット / デメリット

hProductでマークアップすると、データが構造化されます。

メリット

検索結果に商品情報を載せる事ができる（可能性）があるので、クリック率向上につながるでしょう。SEOと組み合わせると非常に効果が高くなる。

デメリット

スクレイピングされやすくなるでしょう。でも、これデメリットですかね？？

論よりコード

hProduct適用前と後です。

--- old 2009-11-26 11:34:26.000000000 +0900 +++ new 2009-11-26 11:33:43.000000000 +0900 @@ -79,15 +79,15 @@ <div id="centrecontent" class="column"> - <div class="post" id="post-410387"> + <div class="post hproduct" id="post-410387"> <h1 class="posttitle">PLAT&#8217;HOME OpenBlockS[オープンブロックス] 600 キャンペーンモデル (OBS600/RAP/C)</h1> <p class="postmeta"> -<a href="http://online.plathome.co.jp/public/tag/PLAT%27HOME" rel="tag">PLAT'HOME</a> / -<a href="http://online.plathome.co.jp/public/tag/%E3%82%B5%E3%83%BC%E3%83%90" rel="tag">サーバ</a> / -<a href="http://online.plathome.co.jp/public/tag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%90" rel="tag">マイクロサーバ</a> / -<a href="http://online.plathome.co.jp/public/tag/%E3%82%B0%E3%83%AA%E3%83%BC%E3%83%B3IT" rel="tag">グリーンIT</a> / -<a href="http://online.plathome.co.jp/public/tag/OpenBlockS%20600" rel="tag">OpenBlockS 600</a> +<a href="http://online.plathome.co.jp/public/tag/PLAT%27HOME" rel="tag" class="category">PLAT'HOME</a> / +<a href="http://online.plathome.co.jp/public/tag/%E3%82%B5%E3%83%BC%E3%83%90" rel="tag" class="category">サーバ</a> / +<a href="http://online.plathome.co.jp/public/tag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%90" rel="tag" class="category">マイクロサーバ</a> / +<a href="http://online.plathome.co.jp/public/tag/%E3%82%B0%E3%83%AA%E3%83%BC%E3%83%B3IT" rel="tag" class="category">グリーンIT</a> / +<a href="http://online.plathome.co.jp/public/tag/OpenBlockS%20600" rel="tag" class="category">OpenBlockS 600</a> </p> <style type="text/css"> div.postentry ol li{list-style-type:decimal;margin-bottom:0.5em;} @@ -141,10 +141,10 @@ <div class="item-detail"> <div class="item-image"> - <a href="http://image.plathome.co.jp/common/cat/img/12441396.jpg"><img src="http://image.plathome.co.jp/common/cat/img200/12441396.jpg" style="width: 200px; height 200px;" /></a> + <a href="http://image.plathome.co.jp/common/cat/img/12441396.jpg"><img src="http://image.plathome.co.jp/common/cat/img200/12441396.jpg" style="width: 200px; height 200px;" class="photo" /></a> </div> <div class="prices"> - <span style="font-weight: normal;">販売価格</span> <span class="item-price">59,800円</span> + <span style="font-weight: normal;">販売価格</span> <span class="item-price price">59,800円</span> <span class="tax-label">(税込)</span> <div class="buttons"> <div><a class="add-to-cart-link" href="https://online.plathome.co.jp/cart/add?scd=12441396" onclick="addcart_ajax('12441396'); return false;"><img id="buy-icon" src="http://image.plathome.co.jp/images/buy.png" alt="かごへ入れる" /></a></div> @@ -158,15 +158,15 @@ <tbody> <tr> <th>メーカー</th> - <td><a href="/public/tag/PLAT%27HOME">PLAT'HOME</a></td> + <td><a href="/public/tag/PLAT%27HOME" class="brand">PLAT'HOME</a></td> </tr> <tr> <th>商品名</th> - <td>OpenBlockS 600 キャンペーンモデル</td> + <td class="fn">OpenBlockS 600 キャンペーンモデル</td> </tr> <tr> <th>型番</th> -<td>OBS600/RAP/C<br /> +<td><span class="model">OBS600/RAP/C</span><br /> <div class="campinfo">※本型番は、OBS600/RAPにプレゼント品が添付されている、キャンペーンモデル専用型番です。</div> </td> </tr> @@ -184,13 +184,13 @@ </tr> <tr> <th>商品番号</th> -<td>12441396</td> +<td class="sku">12441396</td> </tr> </tbody> </table> </div> - <div class="postentry"> + <div class="postentry description"> <table style="margin-top:1em;" border="0"> <tbody>

マークアップtips

identifierの書き方

WEBページによっては <span class="identifier"> <span class="type">JAN</span> <span class="value">49XXXXXXXXX</span> </span> と書いているところも有りますが、これは違うようです。

これでOKです。 <span class="jan">49XXXXXXXXX</span>

検証方法

Microformatの検証用のツールは、http://microformats.org/wiki/debugging-toolsで紹介されていますが、hProductを検証できるツールがありません。

当社ではGoogle webmaster toolsで提供されているRich Snippets Testing Toolを使いました。

実行サンプル(別窓で開きます)

注意

hProductはドラフト仕様です

よって、マークアップの方法や名前が変わるかもしれません。

リッチ スニペット表示を保証するものではありません

そう言ってます。リッチ スニペットの導入について

技術ノートインデックスへ