We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

マイクロデータは、 WHATWG HTML 標準の一部であり、ウェブページ上の既存のコンテンツ内でメタデータをネストするために使用されます。[1] 検索エンジン、ウェブクローラー、そしてウェブブラウザーは、ウェブページからマイクロデータを抽出して処理し、ユーザーによりリッチなブラウジング体験を提供するために使用することができます。検索エンジンは、ウェブページ上の情報を理解し、ユーザーにより関連性の高い結果を提供することを可能にするため、この構造化されたデータを直接利用できることから大きな利益を得ます。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。マイクロデータは、機械可読なタグとともに HTML 要素に注釈する、 RDFa や Microformats の同様のアプローチよりも簡単な方法を提供する試みです。

高水準では、マイクロデータは名前と値の組み合わせのグループで構成されます。このグループはアイテムと呼ばれ、それぞれの名前と値の組み合わせがプロパティとなります。アイテムとプロパティは標準の要素によって表されます。

  • アイテムを作成するために、 itemscope 属性が使用されます。
  • アイテムにプロパティを追加するために、 itemprop 属性がアイテムの子孫の1つで使用されます。

語彙

Google やその他の主要な検索エンジンは、構造化されたデータ Schema.org に対応しています。この語彙は、タイプ名やプロパティ名の標準セットを定義しています。たとえば、 Schema.org Music Event はコンサートを表し、 startDatelocation プロパティをコンサートの主要な詳細を指定するために併用します。この場合、 Schema.org Music Event は itemtype によって使用される URL となり、 startDate と location は Schema.org Music Event が定義する itemprop になります。

メモ: itemtype 属性の詳細は http://schema.org/Thing にあります

マイクロデータの語彙は、アイテムのセマンティックスや意味を提供します。ウェブ開発者は専用の語彙を設計したり、 schema.org のような広く使用されている語彙を利用したりすることができます。よく使用されるマークアップ語彙のコレクションは、 Schema.org によって提供されます。

よく使用される語彙:

Google、Microsoft、Yahoo! のような主要な検索エンジンの管理者は、検索結果を改良するために schema.org を頼りにしています。目的によってはその場で作成した語彙が適切です。それ以外の目的には、語彙を設計する必要があります。可能であれば、著者は簡単にコンテンツを再利用できるように、既存の語彙を再利用することを勧めます。

ローカライズ

ある場合に、特定の領域をカバーする検索エンジンはマイクロデータの地域に固有な拡張を提供するかもしれません。例えば、ロシアのメジャーな検索エンジンである Yandex は、hCard (会社の連絡先情報)、hRecipe (料理のレシピ)、hReview (マーケットのレビュー) やhProduct (製品データ) のような microformat をサポートし、用語の定義や百科事典の記事について独自フォーマットを提供しています。この拡張は、キリル文字とラテン文字の間の文字変換の問題を解決するためになされました。スキーマ語彙の追加マーキングパラメータの実装により、ロシア語のウェブページにおける情報のインデックス化は、かなりの成功を収めました。

グローバル属性

itemid – 一意の、アイテムのグローバル識別子。

itemprop – アイテムにプロパティを追加するために用います。すべての HTML 要素は、 itemprop が名前と値のペアから構成する、 itemprop 属性を指定することができます。

itemrefitemscope 属性をもつ要素の子孫でないプロパティは、itemref を用いてアイテムと関連付けることができます。itemref は、要素の id (itemidではなく) のリストに文書の他の場所で追加のプロパティを提供します。

itemscope – itemscope は、ブロックに含まれる HTML が特定のアイテムであることを記述するために itemtype と共に (通常) 動作します。 itemscope はアイテムを作成し、アイテムに関連付けられる itemtype の範囲を定義します。 itemtype は、アイテムとアイテムのプロパティのコンテキストを説明する (schema.org のような) 語彙の妥当なURLとなります。

itemtype – データ構造で itemprop の語彙 (アイテムのプロパティ) を定義するために使用される語彙の URL を指定します。itemscope は、 itemtype によって設定される語彙がアクティブとなるデータ構造の範囲を設定するために使用されます。

HTML

<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

構造化データ

itemscope itemtype SoftwareApplication (http://schema.org/SoftwareApplication)
itemprop name Angry Birds
itemprop operatingSystem ANDROID
itemprop applicationCategory GameApplication (http://schema.org/GameApplication)
itemscope itemprop[itemtype] aggregateRating [AggregateRating]
itemprop ratingValue 4.6
itemprop ratingCount 8864
itemscope itemprop[itemtype] offers [Offer]
itemprop price 1.00
itemprop priceCurrency USD

結果

メモ: HTML からマイクロデータを抽出するための便利なツールとして、 Google の構造化データテストツールがあります。上に示した HTML 上で試してみてください。

ブラウザーの対応

Firefox 16 で対応しました。 Firefox 49 で削除されました。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo
最終更新者: mfuji09,