Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】itemid属性の使い方

itemid属性の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

itemidプロパティは、HTML要素によって表現される「アイテム」のグローバルな一意の識別子を保持するプロパティです。この属性は、Webページの情報を機械が理解しやすいように構造化するためのMicrodata(マイクロデータ)仕様の一部として定義されています。

itemscope属性が指定されたHTML要素が特定のエンティティ(例えば、商品、イベント、記事など)を表す場合、itemidはそのエンティティに対して、インターネット全体で一意となる識別子を付与します。これにより、同じエンティティが複数のWebページに存在する場合でも、それぞれのページで一貫した参照が可能になります。例えば、特定の商品が複数の販売サイトに掲載されている場合でも、itemidを使ってその商品を一意に識別し、関連情報を紐付けることができます。

itemidに指定する値は、そのアイテムを一意に特定できる有効なURL(Uniform Resource Locator)またはURN(Uniform Resource Name)である必要があります。この属性は、主に検索エンジンがWebページのコンテンツをより深く理解し、検索結果にリッチスニペットとして表示するなど、ユーザー体験を向上させるために活用されます。itemtype属性やitemprop属性と連携して、Web上の構造化データセマンティクスを強化する重要な要素の一つです。

公式リファレンス: HTML itemid global attribute

構文(syntax)

1<div itemid="https://example.com/unique-id-for-item" itemscope itemtype="https://schema.org/Thing">
2  <!-- item content -->
3</div>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

itemid属性で「モノ」を識別する

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>itemid 属性のサンプル</title>
7</head>
8<body>
9
10    <!--
11        itemid 属性は、itemscope および itemtype 属性が指定された要素に対して、
12        グローバルな一意の識別子を提供します。
13        主にMicrodata(schema.orgなど)と組み合わせて、特定の「モノ」を
14        一意に識別し、検索エンジンなどのシステムにコンテンツの意味を伝えるために使用されます。
15    -->
16    <div itemscope itemtype="http://schema.org/Book" itemid="urn:isbn:978-4-04-870000-0">
17        <h2 itemprop="name">プログラミング言語の基礎</h2>
18        <p>著者: <span itemprop="author">山田 太郎</span></p>
19        <p>ISBN: <span itemprop="isbn">978-4-04-870000-0</span></p>
20        <p itemprop="description">プログラミング言語の歴史から基本的な概念までを網羅した入門書です。</p>
21        <p>出版年: <time itemprop="datePublished" datetime="2023-01-15">2023年1月15日</time></p>
22    </div>
23
24</body>
25</html>

HTMLのitemid属性は、ウェブページ上の特定の情報(「モノ」と表現されます)に対して、世界中で一つしかない固有の識別子を提供するグローバル属性です。この属性は単独では機能せず、必ずitemscope属性とitemtype属性が同時に指定された要素に対して使用されます。itemscopeはその要素が「モノ」であることを宣言し、itemtypeはその「モノ」が何であるか(例えば「本」や「人物」など)を定義します。itemidは、定義された「モノ」を具体的に特定するためのIDとなります。

これにより、Googleなどの検索エンジンやその他のウェブサービスが、ページのコンテンツをより正確に理解し、活用できるようになります。例えば、ウェブサイトで紹介されている「本」が具体的にどの本であるかをISBNコードなどで一意に識別し、検索結果に詳細な情報を表示したり、関連情報を抽出したりするために使われます。

サンプルコードでは、<div itemscope itemtype="http://schema.org/Book" itemid="urn:isbn:978-4-04-870000-0">の部分で、このdiv要素が「本」という種類の「モノ」であり、その本がISBNコード「978-4-04-870000-0」で識別されることを示しています。このように、itemid属性は引数を持たず、特定の値を返すこともありませんが、ウェブコンテンツのセマンティックな意味を強化する重要な役割を果たします。

itemid属性は、その要素が表す「モノ」を一意に識別するためのグローバルな識別子です。この属性は、必ずitemscopeおよびitemtype属性と組み合わせて使用し、単独では機能しません。主にMicrodata(schema.orgなど)と組み合わせて、検索エンジンなどの外部システムにコンテンツの意味を正確に伝えるために利用されます。itemidの値は、世界中で重複しないURLやURNなどを指定する必要があり、サンプルコードのようにISBNをURN形式で記述することも有効です。この属性はウェブページの視覚的な表示には影響しませんが、情報の機械的な理解を助け、検索結果の向上などに寄与する可能性があります。

HTML Microdataのitemidとitempropを定義する

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Microdataのitemidとitempropの例</title>
7</head>
8<body>
9
10    <!--
11    itemscope属性は、この要素がMicrodataアイテムを定義することを示します。
12    itemtype属性は、アイテムのタイプ(ここではSchema.orgのProduct)を指定します。
13    itemid属性は、この製品のグローバルな一意な識別子(URI)を提供します。
14    ここでは、書籍のISBN番号を例としています。
15    -->
16    <div itemscope itemtype="http://schema.org/Product" itemid="urn:isbn:978-4-87311-855-0">
17        <!-- itemprop="name" は製品の名前を表します。 -->
18        <h2 itemprop="name">プログラミング言語の基礎</h2>
19        <!-- itemprop="description" は製品(書籍)の説明を表します。 -->
20        <p itemprop="description">
21            システムエンジニアを目指す初心者向けに、プログラミング言語の基本概念と主要なHTML、CSS、JavaScriptの活用方法を解説する入門書です。
22        </p>
23        <!--
24        itemprop="url" は製品の詳細ページへのURLを表します。
25        itemidがアイテムのグローバルな識別子であるのに対し、itemprop="url"はWeb上の特定のリソースへのリンクです。
26        -->
27        <p>詳細はこちら: <a href="https://example.com/book/programming-basics" itemprop="url">製品ページへ</a></p>
28    </div>
29
30</body>
31</html>

HTMLのitemid属性は、ウェブページ上の特定の「モノ」(商品や記事など)に対して、インターネット上で一意な識別子を与えるためのグローバル属性です。これは、Microdataという仕組みを利用して、検索エンジンなどの機械がウェブページの内容をより正確に理解し、他の情報と関連付けられるようにするために使用されます。

itemidは、itemscope属性で定義されたMicrodataアイテムに対して、そのアイテムのグローバルな識別子を指定します。この識別子は、通常、URI(Uniform Resource Identifier)形式で記述され、書籍のISBN番号やユニバーサルに一意な識別子(UUID)などが利用されます。この属性自体に引数や戻り値はありません。

サンプルコードでは、div要素にitemscopeitemtype="http://schema.org/Product"を指定することで、このdivが製品に関するMicrodataアイテムであることを宣言しています。そして、itemid="urn:isbn:978-4-87311-855-0"によって、この製品が「ISBN 978-4-87311-855-0」という書籍であることを一意に識別しています。その中でitemprop属性は、itemidで識別されるこの書籍の具体的な情報(タイトル、説明、URLなど)を表現するために使われています。これにより、検索エンジンは「プログラミング言語の基礎」という名前の書籍が、特定のISBN番号を持つ製品であることを理解できます。

itemidは、Webページ内の情報が何であるかを検索エンジンなどの機械に正確に伝えるための「グローバルな一意の識別子」です。主にitemscopeitemtypeと組み合わせて、Microdataという構造化データの一部として利用します。その値は、ISBNやURL、URNといったURI形式で指定する必要があり、単なる文字列ではない点に注意してください。

itemidがアイテム全体の一意な識別子であるのに対し、itempropはアイテムの特定の「プロパティ(属性)」を定義するもので、役割が異なりますので混同しないよう注意が必要です。これらの属性を正しく活用することで、Webコンテンツの理解度を高め、検索結果での表示改善など、SEOにも繋がります。

関連コンテンツ

関連IT用語