itemid/itemprop/itemref/itemscope/itemtype属性

HTMLの内容が、何を意味するのかを明確化することができます。

本ページでは、グローバル属性のitemid/itemprop/itemref/itemscope/itemtypeについて説明します。

構造化データ

itemid/itemprop/itemref/itemscope/itemtypeは、構造化データを定義する属性です。例えば、人の名前と職業をセットにしてデータとして扱えます。

以下は、各属性の説明です。

【itemid/itemprop/itemref/itemscope/itemtypeの説明】
属性 説明
itemscope 構造化データの範囲となる要素で使います。
itemtype 何を定義しているのかを示します。多くは、以下で定義されたschema.orgを使います。
Full Hierarchy
itemprop プロパティを定義します。
itemid 一意となる識別子を記述します。
itemref 小孫でない要素を、IDで関連付けします。

構造化データは、検索エンジンでも解釈されて、検索結果に使われることがあります。

また、グローバル属性のため、すべてのHTML要素で使えます。

利用例

itemprop/itemscope/itemtypeの利用例は、以下のとおりです。

【itemprop/itemscope/itemtype利用例】
<dl itemscope itemtype="http://schema.org/Person">
<dt>名前</dt>
<dd itemprop="name">山田 太郎</dd>
<dt>職業</dt>
<dd itemprop="jobTitle">先生</dd>
</dl>

構造化データとしては、以下のように認識されます。

【構造化データとしての認識】
@type Person
name 山田 太郎
jobTitle 先生

nameであれば名前、jobTitleであれば職業など、schema.orgで決められています。

本などは、itemidを使ってISBN番号(書籍に付けられる一意の番号)なども記述できます。

【itemidの使い方】
<dl itemscope itemtype="http://schema.org/Book" itemid="urn:978-4297115401">

親子関係にない要素は、itemrefで関係付けできます。

【itemrefの使い方】
<dl itemscope itemtype="http://schema.org/Person" itemref="test">
・・
</dl>
<img id="test" itemprop="image" src="image.jpg" alt="顔写真">

itemrefでIDを指定すれば、そのIDを使った要素が関連付けされます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
itemid
itemprop
itemref
itemscope
itemtype
【スマートフォン】
項目 Sa An Op Ch Fx Sm
itemid
itemprop
itemref
itemscope
itemtype
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。