HTML5-Microdata

Microdataは、Webページに追加のセマンティクスを提供する標準化された方法です。

Microdataを使用すると、独自のカスタマイズされた要素を定義して、Webページにカスタムプロパティの埋め込みを開始できます。高レベルでは、microdataは名前と値のペアのグループで構成されます。

グループは items と呼ばれ、各名前と値のペアは property です。アイテムとプロパティは通常の要素で表されます。

例

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

ここには2つのアイテムがあり、それぞれにプロパティ「名前」があります-

<html>
   <body>

      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>

      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>

   </body>
</html>

それは次の結果を生成します-

プロパティは一般に文字列である値を持っていますが、次のデータ型を持つことができます-

グローバル属性

Microdataでは、5つのグローバル属性を導入しています。これらの属性は、使用するすべての要素で使用でき、データに関するマシンのコンテキストを提供します。

Sr.No.	Attribute & Description
1	itemscope これはアイテムを作成するために使用されます。 itemscope属性は、このページにMicrodataが存在することを示すブール属性であり、ここから開始します。
2	itemtype この属性は、アイテムを定義し、プロパティのコンテキストを提供する有効なURLです。
3	itemid この属性は、アイテムのグローバル識別子です。
4	itemprop この属性は、アイテムのプロパティを定義します。
5	itemref この属性は、アイテムの名前と値のペアを見つけるためにクロールする追加要素のリストを提供します。

プロパティのデータ型

通常、プロパティには、上記の例で説明した文字列の値が含まれますが、URLの値も含まれます。次の例には、1つのプロパティ「image」があり、その値はURLです-

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "finddevguides">
</div>

プロパティは、日付、時刻、または日付と時刻の値を持つこともできます。これは、 time 要素とその datetime 属性を使用して実現されます。

<html>
   <body>

      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>

   </body>
</html>

それは次の結果を生成します-

また、プロパティを宣言する要素にitemscope属性を設定することにより、プロパティ自体を名前と値のペアのグループにすることができます。

Microdata APIサポート

ブラウザがHTML5 microdata APIをサポートしている場合、グローバルドキュメントオブジェクトにgetItems（）関数があります。ブラウザがmicrodataをサポートしていない場合、getItems（）関数は未定義になります。

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizrはまだmicrodata APIのチェックをサポートしていないため、上記のような関数を使用する必要があります。

HTML5 microdata標準には、HTMLマークアップ（主に検索エンジン用）と一連のDOM関数（主にブラウザー用）の両方が含まれています。

Webページにmicrodataマークアップを含めることができ、microdata属性を理解していない検索エンジンはそれらを無視します。ただし、DOMを介してmicrodataにアクセスまたは操作する必要がある場合は、ブラウザーがmicrodata DOM APIをサポートしているかどうかを確認する必要があります。

Microdataボキャブラリーの定義

microdataボキャブラリーを定義するには、動作中のWebページを指す名前空間URLが必要です。たとえば、https://data-vocabulary.org/Personは、次の名前付きプロパティを持つ個人のマイクロデータボキャブラリの名前空間として使用できます-

name -単純な文字列としての個人名
写真-その人の写真のURL。
URL -その人に属するウェブサイト。

約プロパティを使用して、人のマイクロデータは次のようになります-

<html>
   <body>

      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>

            <p>
               <img itemprop = "photo"
                  src = "http://www.finddevguides.com/green/images/logo.png">
            </p>

            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>

   </body>
</html>

それは次の結果を生成します-

Googleは、Rich Snippetsプログラムの一部としてmicrodataをサポートしています。 GoogleのWebクローラーがページを解析し、http：//datavocabulary.org/Personボキャブラリに適合するmicrodataプロパティを見つけると、それらのプロパティを解析し、残りのページデータと共に保存します。

上記の例は、https://search.google.com/structured-data/testing-tool [Rich Snippets Testing]ツールを使用してhttp://www.finddevguides.com/html5/microdataを使用してテストできます。

Microdataのさらなる開発については、https://www.w3.org/TR/html5/microdatal [HTML5 Microdata]をいつでも参照できます。

Html5-microdata

HTML5-Microdata

例

グローバル属性

プロパティのデータ型

Microdata APIサポート

Microdataボキャブラリーの定義

目次