カテゴリー: Microdata

Microdata 個人的まとめ – その①

Microformats やRDFa については、ちょっと実際に書いてみたりしたのですが、
こと、Microdata については、ちょっと忘れてました..。

ちょうどTwitter のTL でその話題を見掛け、先日、試しにちょっとまとめてみました。

詳細については、以下のスライドでかなり分り易くまとめていらっしゃいますので、
ぜひそちらを参考にどうぞ。

Microdata: A Primer

大変参考になりました、ありがとうございます。

一部抜粋

Microdataの属性は5つ

  • itemscope
  • itemprop
  • itemtype
  • itemref
  • itemid

記述例

■Person

<div itemtype=”https://microformats.org/profile/hcard” itemscope>
<div itemscope itemprop=”n”>
<div>Title:
<span itemprop=”honorific-prefix”>kots</span>
</div>
<div>First Name:
<span itemprop=”given-name”>kazunori</span>
</div>
<div>Last Name:
<span itemprop=”family-name”>iguchi</span>
</div>
</div>
<div itemscope itemprop=”adr”>
<div>State or Provence:
<span itemprop=”region”>中央区</span>
</div>
<div>Country:
<span itemprop=”country-name”>東京</span>
</div>
<div>Address Type:
<span itemprop=”type”>pref</span>
</div>
</div>
<div itemscope itemprop=”email”>
<div>Email Address Type:
<span itemprop=”type”>internet</span>
</div>
<div>Email Address:
<span itemprop=”value”>info@kots.jp</span>
</div>
</div>
<div>Webpage:
<a itemprop=”url” href=”https://kazunoriiguchi.com”>https://kazunoriiguchi.com</a>
</div>
<div itemscope itemprop=”twitter”>
<div>IM Type:
<span itemprop=”type”>twitter</span>
</div>
<div>Twitter Account:
<a itemprop=”value” href=”https://twitter.com/Scenery”>@Scenery</a>
</div>
</div>
</div>
ボキャブラリ で「hcard」も使えるんですね。

■Product

<div itemscope itemtype=”https://data-vocabulary.org/Product”>
Brand: <span itemprop=”brand”>ブランド</span>
Category: <span itemprop=”category”>アイテムカテゴリー</span>
<h1><span itemprop=”name”>商品名</span></h1>
<span itemprop=”photo”><img src=”https://kazunoriiguchi.com/blog/apple-touch-icon.png”/></span>
On sale for <span itemprop=”price”>&yen;999</span>.
<span itemprop=”description”>商品説明</span>
<a href=”https://kazunoriiguchi.com/blog/” itemprop=”url”>商品詳細説明ページURL</a>
</div>

どちらかと言うと、Microformats やRDFa より、Microdata の方がWebデザイナーさんとかも使い易いように思います。
※Dreamweaver で任意のプロパティとか、登録できたっけ..？

Yahoo! SearchMonkey のテストツールで試してみたのだけど、やはり、Microdata では反応なし..。
あくまでも、RDFa 対応が現状のようですね。

Microformats とRDFa が補完し合うように、Microdata も現状では、そのように使ってみようと思います。

Yahoo! がGoogle の検索エンジンを使用するとしても、
UI は現状通り独自だそうなので、Yahoo!検索プラグインも、そのままいきそうな気もしますしね。

change_history