Microdata 個人的まとめ – その①

Sponsored Links

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

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

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

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

一部抜粋

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!検索プラグインも、そのままいきそうな気もしますしね。

LINEで送る
Pocket
このエントリーをはてなブックマークに追加

Sponsored Links

Sponsored Links

Related Post


投稿者:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

change_history