富士山は世界遺産

ぷらっとオンラインのhProduct Microformat 0.3対応について

このページ、ぷらっとオンライン技術ノートのreblogです。書いてる人が同じだから、いいでしょ。。。

hProduct Microformat 0.3対応について http://online.plathome.co.jp/lYAR2

概要

当社のECサイト「ぷらっとオンライン(http://online.plathome.co.jp)」では、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 http://www.google.com/webmasters/tools/richsnippets を使いました。

注意

hProductはドラフト仕様です

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

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

そう言ってます。リッチ スニペットの導入について http://googlewebmastercentral-ja.blogspot.com/2009/11/blog-post_19.html

ツイートする

Permalink | コメント(0) | トラックバック(1) | 17:57