kojika17HTML5の新要素「data要素」に繋がる Microdataのプロパティについて
time要素の廃止、そしてdata要素の登場により、Microdataを扱う機会が増えてくると予想されます。
またHTML5 の Microdata が主にGoogleなどで取り入れられているケースが出てきているので、
Microdataで利用できるプロパティを紹介致します。
Microdata とは
HTML5の独立した仕様です。
HTML文章に、コンピュータが可読できるデータにすることができ、RDFやJSONなどの多数の他のデータ形式と互換性を持たせることができます。
記述方法は以前の記事を参照して下さい。
MicroformatsとMicrodataの違いについて : Web Design KOJIKA17
なぜコンピュータが可読できるデータにする必要があるのか？？
HTMLでは、人や時間、場所など細かくマークアップすることができません。
例として、機械翻訳したカンナダ語を見てみましょう。
<article>
<h1>????? ??????</h1>
<p>17 ?????? ???</p>
<p>12 ??? ?????? ?????????? ?? 8 ??? ?????? ???, ?????? ????? ????, ??????-kyo ?????????? ???? ??? ?????????????.</p>
</article>見出ししか分かりません。
しかもこの見出しは、会社名なのか、コンテンツの見出しなのか分かりません。
コンピュータも同様の状態です。
Microdataでマークアップすると以下のような形になります。
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">????? ??????</h1>
<p itemprop="author">17 ?????? ???</p>
<p itemprop="articleBody">12 ??? ?????? ?????????? ?? 8 ??? ?????? ???, ?????? ????? ????, ??????-kyo ?????????? ???? ??? ?????????????.</p>
</article>http://schema.org/ArticleというURIを設定することにより、記事の一部であること。
著者や記事の内容はココ、ということが分かるようになった思います。
私たちがこの文章の構成を読み取れたように、コンピュータも同じように読み取れるようにし、他の言語とも互換性を持たせることにより、アプリケーションなどのデータの移行などが容易になります。
Microdataのプロパティについて
私の知っている限り、Microdataを使用できるプロパティを策定している団体は3つです。
- microformats.org
- Webサイトで人やイベント、ブログ記事、レビュー、ライセンスなどのような共通して公開されているものを記述する際に用いるマークアップパターンを策定する団体です。
2011年11月現在、イベントの記述などでFacebookも一部利用しています。 - data-vocabulary.org
- どのような団体が策定しているのかは、不明。(W3C?)
主にGoogleの検索エンジンで、利用されています。 - schema.org
- 主要な検索エンジンによって認識される構造化データマークアップの標準化を目指す団体。
長期的なゴールは幅広いフォーマットのサポートを目指しているが、まずはMicrodataに集中しています。
Google、Microsoft、Yahoo!の検索大手3社が策定を行っています。
Googleの +1ボタンのUS版では、schema.orgの形式がすでに取られています。
上記のうち今後、需要が出てくるであろう schema.org について、説明致します。
schema.orgのタイプとプロパティについて
schema.orgには、Thingという大きなくくりが存在します。
Thingには「説明」「画像」「名前」「URL」というプロパティの他にタイプが存在ます。
- 創作活動(CreativeWork)
- イベント(Event)
- 無形(Intangible)
- 組織(Organization)
- 人(Person)
- 場所(Place)
- 製品(Product)
このタイプは「http://schema.org/タイプ名」のようにURIをitemtypeに入れて使用します。
タイプの中にさらにタイプが存在する場合があり、創作活動(CreativeWork)の中は下記のようなリストになっています。
- 創作活動(CreativeWork)
- 記事(Article)
- BlogPosting
- NewsArticle
- ScholarlyArticle
- ブログ(Blog)
- 書籍(Book)
- 地図(Map)
- 映画(Movie)
- 写真(Photograph)
- レシピ(Recipe)
- ウェブページ(WebPage)
- AboutPage
- CheckoutPage
- CollectionPage
- ImageGallery
- VideoGallery
- ContactPage
- ItemPage
- ProfilePage
- SearchResultsPage
- ... (以下省略)
タイプの一覧参照(英語)
- 記事(Article)
schema.orgで設定されているタイプを選び、その中のプロパティをitempropなど入れ、利用することができます。 プロパティは親のプロパティを継承できます。
以下は、Thing > 創作活動(CreativeWork) > 記事(Article) のプロパティ表の一部です。
これ以外にも多くのプロパティが存在します。
記事(Article)の一覧(英語)
| プロパティ | 期待される内容 | プロパティ説明 |
|---|---|---|
| Thing | ||
| description | テキスト | 項目の短い説明。 |
| image | URL | アイテムの画像のURL。 |
| name | テキスト | アイテムの名前。 |
| url | URL | アイテムのURL。 |
| CreativeWork | ||
| about | もの | コンテンツの主題。 |
| comment | ユーザーのコメント | 創作活動に対しての一般的ユーザからのコメント。 |
| dateCreated | 日 | 創作物が作成された日付。 |
| dateModified | 日 | 創作物が変更された日付。 |
| datePublished | 日 | 最初の放送/出版の日付。 |
| headline | テキスト | 記事の見出し |
| interactionCount | テキスト | 特定ユーザーとの対話の数。 例：いいねの数、コメントの数、ダウンロード数など。 この形式のサブタイプにはUserInteractionというタイプのいずれかでなければなりません。 |
| Article | ||
| articleBody | テキスト | 記事の内容。 |
| articleSection | テキスト | 雑誌や新聞などの1つまたは複数の"セクション"に属している可能性がある記事一部 |
| wordCount | 整数 | 記事のテキスト内の単語の数。 |
上記のプロパティを使用した例
例文
ロゴマークの暗黙知について - Webサイトの上部にリンクは必要か？ -
kojika17
多くのWebサイトの上部にはロゴマークやサイト名が表示されており、
HOMEに戻るためのリンクが貼られている場合が多いと思います。
サイトの上部のHOMEに戻るリンクには、どのような効果があるのか、
また暗黙知としてのユーザーの反射的な行動について、20週間のデータから考えてみます。
いいねの数は34です。はてなブックマークに投稿されたコメントは8コメントです。
Microdataによるマークアップ
<body>
<section itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">ロゴマークの暗黙知について - Webサイトの上部にリンクは必要か？ -</h1>
<span itemprop="author">kojika17</span>
<div>
<p itemprop="description">
多くのWebサイトの上部にはロゴマークやサイト名が表示されており、
HOMEに戻るためのリンクが貼られている場合が多いと思います。
サイトの上部のHOMEに戻るリンクには、どのような効果があるのか、
また暗黙知としてのユーザーの反射的な行動について、20週間のデータから考えてみます。
</p>
<div>いいねの数は<span itemprop="interactionCount" content="UserLikes:34">34</span>です。はてなブックマークに投稿されたコメントは<span itemprop="interactionCount" content="UserComments:8">8</span>コメントです。</div>
</div>
</section>
</body>
廃止されたtime要素、追加されたdata要素
2011年10月30日の Editor's Draft から time要素が削除され、data要素が追加されたようです。
2011年11月12日にtime要素が復活したみたいです。
HTML5 追加された data 要素について - U log
W3C Editor's Draft - 4.6.10 The data element
W3Cのサンプルコードでは、microformats, Schema.org の両方で記述しています。
日付をマークアップする場合は別仕様の、Microdata, Microformats にあわせてマークアップする必要性が出てきそうです。
今回説明したSchema.org は Draft Version 0.9 であり、まだ未完成な部分が多くあると思います。
検索エンジンでは、GoogleやYahooなどで一部リッチスニペットに反映させれる例も出てきています。
今後もGoogle、Microsoft、Yahoo!の検索大手3社が策定を進めることで、検索の方法、情報の扱い方など、HTMLのコーディングの方法の見直しが必要になってくるかもしれません。