@blog.justoneplanet.info

日々勉強

microformat

検索のリッチ化が進む中、GoogleはRDFaとmicroformatに対応した。RDFaやmicroformatが埋め込まれたサイトでは検索結果が以下のように表示される。

リッチスニペット

■hCard(vCard)

人物に関する情報を記述する。

<div class="vcard">
<img class="photo" src="/wp-content/uploads/2009/12/1261861644_user_48.png" />
<p><strong class="fn">Mitsuaki Sample</strong></p>
<p><span class="org">Nutex Inc.</span>:<span class="title">Engineer</span></p>
<p><span class="adr">
<span class="postcode">141-0022</span><br />
<span class="region">東京都</span><span class="locality">品川区</span>
<span class="street-address">東五反田2-8-8</span><br />
</span></p>
</div>
name(fn) 名前
photo 写真
url URL
org 組織
title 役職
role 役割
adr 住所
>postcode 郵便番号
>region 都道府県
>locality 市町村
>street-address 番地

サンプル

Mitsuaki Sample

Nutex Inc.:Programmer

1410022
東京都品川区東五反田2-8-8

会社(組織情報)だと以下のようになる。

<div class="vcard">
<dt><span class="fn org">株式会社Nutex</span></dt>
<dd><span class="url">http://nutex.jp</span></dd>
<dd><span class="tel">03-5422-8684</span></dd>
<dd class="adr"><span class="postal-code">141-0022</span><br />
<span class="region">東京都</span><span class="locality">品川区</span><span class="street-address">東五反田2-8-8</span></dd>
</div>

サンプル

株式会社Nutex
http://nutex.jp
03-5422-8684
141-0022
東京都品川区東五反田2-8-8

■hReview

レビュー情報を記述する。

<div class="hreview">
<p><span class="item"><strong><span class="fn">NutexのCMS</span></strong></span> - Score:<strong><span class="rating">4.0</span></strong></p>
<p><span class="summary">凄く使いやすい。</span></p>
<p>written by <span class="reviewer">Mitsuaki Sample</span>(<span class="dtreviewed">2009-12-20</span>)</p>
</div>
item 対象アイテム
>name(fn) 名前
rating 評価点
reviewer 評価した人
dtreviewed 評価した日時
summary レビュー概要
description レビュー本文

サンプル

NutexのCMS – Score:4.0

凄く使いやすい。

written by Mitsuaki Sample(2009-12-20)

■hProduct

製品情報を記述する。

<div class="hproduct">
<h5><span class="fn">Rabit</span>(<span class="url">http://nutex.jp</span>)</h5>
<p><span class="price">\100</span></p>
<p class="ta-center"><span class="photo"><img src="http://blog.justoneplanet.info/wp-content/uploads/2009/12/1261863826_computer.png" alt="cms" width="128" height="128" /></span></p>
<p><span class="description">簡単CMS。</span></p>
<p>Brand: <span class="brand">Nutex</span> - Category: <span class="category">CMS</span></p>
</div>
name(fn) 製品名
price 値段
photo 製品写真
url 製品ページ
description 製品説明
brand ブランド
category カテゴリ

サンプル

Rabit(http://nutex.jp)

\100

cms

簡単CMS。

Brand: Nutex – Category: CMS

■応用

レビュー情報と製品情報を組み合わせる。

<div class="hreview">
<div class="item hproduct">
<h5><span class="fn">Rabit</span>(<span class="url">http://nutex.jp</span>)</h5>
<p><span class="price">\100</span></p>
<p class="ta-center"><span class="photo"><img src="http://blog.justoneplanet.info/wp-content/uploads/2009/12/1261863826_computer.png" alt="cms" width="128" height="128" /></span></p>
<p><span class="description">簡単CMS。</span></p>
<p>Brand: <span class="brand">Nutex</span> - Category: <span class="category">CMS</span></p>
</div>
<p><span class="summary">凄く使いやすい。</span> - Score:<strong><span class="rating">4.0</span></strong></p>
<p>written by <span class="reviewer">Mitsuaki Sample</span>(<span class="dtreviewed">2009-12-20</span>)</p>
</div>

サンプル

Rabit(http://nutex.jp)

\100

cms

簡単CMS。

Brand: Nutex – Category: CMS

凄く使いやすい。 – Score:4.0

written by Mitsuaki Sample(2009-12-20)

参考

コメントはまだありません»

No comments yet.

RSS feed for comments on this post.TrackBack URL

Leave a comment