Html5-microdata
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]をいつでも参照できます。