カテゴリー: サイト構造化

わりと以前からではありますが、サイト構造としてのマークアップの一環として、
Microformats やRDFa、そして、今回統一されるMicrodata。

日本でも一部、利用が開始され突如（？）打ち切りとなったRDFa が基準と思われたSearchMonkey や、
Google などが初期の段階から取り入れていたMicroformats など、使用用途で使い分けなども行ったりしてましたが、これがまたすべてを記述すると、若干手間だったりしてました。
※RDFa の名前空間など、わりと場所とったりと…

それが今回、Google、Yahoo!、Microsoft がschema.org にてMicrodata を統一の構造化マークアップ とすることで同意したそうです。
そんな世の中的にどうなんだろうと感じなくはないですが、個人的にはかなりウレシイ出来事の一つ。

個人的には当初、基準とするならMicroformats かなぁと思った時期もありましたが、
ここのところ、Google がMicrodata を中心とする感があったので、まさかすぐに検索エンジン各社が統一とするとは思ってませんでしたが、HTML5 との親和性などもあるでしょうし、Microdata に決まったみたいです。

失礼ながら地味にもこの手のことを追っていた方にとっては、けっこう朗報になったように思います。笑

Official Google Webmaster Central Blog: Introducing schema.org: Search engines come together for a richer web

schema.org – Home

HTML Microdata

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

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

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

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

一部抜粋

Microdataの属性は5つ

• itemscope
• itemprop
• itemtype
• itemref
• itemid

記述例

• Person
• Product

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