【HTML Living Standard】itemprop属性の使い方
itemprop属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
itempropプロパティは、HTML要素が保持する特定の意味や値を定義するためのプロパティです。これにより、Webページのコンテンツに「マイクロデータ（Microdata）」と呼ばれる構造化された情報を埋め込むことが可能になります。
このプロパティを使用することで、Webページ上のテキストや画像などの情報が具体的に何を意味するのかを、人間だけでなく検索エンジンや他の機械が正確に理解できるようになります。例えば、「価格」「商品名」「著者」「評価」といった、特定のデータが持つプロパティの名前を指定し、そのプロパティに対応する値をHTML要素に紐付けます。これにより、検索エンジンはページの内容をより深く解釈し、検索結果にその情報をリッチスニペットとして表示するなど、ユーザーにとってより有益な形で提供することが可能になります。
itempropは、itemscopeプロパティで定義されたアイテムのスコープ内で、そのアイテムの具体的なプロパティとして機能します。また、itemtypeプロパティと組み合わせることで、アイテムの種類（例：商品、人物、イベントなど）を定義し、その種類に応じた標準的なプロパティ名をitempropで指定します。これは、国際的な標準に基づいた情報の構造化を可能にし、幅広いシステムでの相互運用性を確保します。
システムエンジニアを目指す初心者の方にとって、itempropはWebサイトの検索エンジン最適化（SEO）や、セマンティックな（意味のある）Webコンテンツを構築する上で重要なツールであり、情報の機械可読性を高める技術として理解しておくことが推奨されます。
構文(syntax)
1<element itemprop="property_name"></element>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML 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>itemprop属性のサンプル</title> 7</head> 8<body> 9 10 <!-- 11 itemprop属性は、Microdata（マイクロデータ）の仕様の一部です。 12 HTML要素にプロパティ名（例: name, jobTitle）を付与することで、 13 その要素がどのような情報であるかを検索エンジンなどのマシンに伝えます。 14 これにより、Webページのコンテンツの意味がより正確に理解され、 15 検索結果などに活用される可能性が高まります。 16 17 この例では、schema.orgで定義されている「Person（人物）」の情報をマークアップしています。 18 親要素にitemscopeとitemtypeを指定して、全体が何に関する情報であるかを定義し、 19 その子孫要素にitempropを使って各プロパティを記述します。 20 --> 21 <div itemscope itemtype="http://schema.org/Person"> 22 <h2>社員情報</h2> 23 <!-- itemprop="name" で人物の名前を定義 --> 24 <p>名前: <span itemprop="name">山田 太郎</span></p> 25 <!-- itemprop="jobTitle" で役職を定義 --> 26 <p>役職: <span itemprop="jobTitle">システムエンジニア</span></p> 27 <!-- itemprop="email" でメールアドレスを定義 --> 28 <p>メール: <a href="mailto:taro.yamada@example.com" itemprop="email">taro.yamada@example.com</a></p> 29 <!-- itemprop="telephone" で電話番号を定義 --> 30 <p>電話: <span itemprop="telephone">03-1234-5678</span></p> 31 <!-- itemprop="worksFor" で所属組織を定義 (組織自体もMicrodataとしてマークアップ可能) --> 32 <p>所属: <span itemprop="worksFor" itemscope itemtype="http://schema.org/Organization"> 33 <span itemprop="name">株式会社サンプルシステム</span> 34 </span></p> 35 </div> 36 37</body> 38</html>
HTMLのitemprop属性は、Webページ内の特定の情報が「何であるか」を検索エンジンなどの機械に正確に伝えるためのグローバル属性です。これは、コンテンツの持つ意味を構造化して定義するMicrodata（マイクロデータ）という技術仕様の一部です。この属性を使用することで、Webページのコンテンツが単なるテキストではなく、意味のあるデータとして認識され、検索結果の改善や特別な表示に活用される可能性が高まります。
itemprop属性は、通常、親要素にitemscope属性とitemtype属性を組み合わせて使用されます。まずitemscopeでマークアップするデータの範囲を定義し、itemtypeでそのデータがどのような種類（例: 人物、商品、イベントなど）であるかを指定します。その上で、itempropはそのデータブロック内の子孫要素に対し、それぞれの具体的なプロパティ名（例: name、jobTitle、emailなど）を割り当てます。
サンプルコードでは、http://schema.org/Personというタイプ（人物情報）を例にしています。「名前」をitemprop="name"、「役職」をitemprop="jobTitle"、そして「メールアドレス」をitemprop="email"のようにマークアップしています。これにより、検索エンジンは「山田太郎さんがシステムエンジニアである」といった情報を明確に理解できます。itemprop属性には引数はなく、また特定の値を戻すものでもありません。Webコンテンツのセマンティック（意味）を強化し、機械可読性を高める上で非常に重要な役割を果たします。
itemprop属性は、単独では効果がなく、必ず親要素でitemscopeとitemtypeを使って定義された「アイテム」のプロパティとして使用します。何に関する情報かをitemtypeで明確にした上で、その中の個別の要素がどのようなプロパティであるかをitempropで示してください。
指定するプロパティ名（例: nameやjobTitle）は、itemtypeで参照するスキーマ（多くの場合schema.org）で正式に定義されているものを正確に選ぶ必要があります。誤ったプロパティ名では、構造化データとして正しく認識されません。この属性を追加してもWebページの見た目は変わりませんが、検索エンジンなどがコンテンツの意味をより正確に理解できるようになり、検索結果のリッチスニペットなどに活用される可能性があります。実装後は、Googleの構造化データテストツールなどで正しく認識されているかを確認することをお勧めします。
HTML 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>itemprop 属性の使用例</title> 7</head> 8<body> 9 10 <!-- 11 itemscopeとitemtype属性で、このdiv要素が「本 (Book)」に関する情報であることを定義します。 12 itemprop属性は、この構造化データ内の特定のプロパティをマークアップするために使用されます。 13 --> 14 <div itemscope itemtype="http://schema.org/Book"> 15 <h1> 16 <!-- itemprop="name" で本のタイトルを定義します。 --> 17 <span itemprop="name">ウェブ開発入門</span> 18 </h1> 19 <p> 20 著者: 21 <!-- itemprop="author" で本の著者を定義します。 --> 22 <span itemprop="author">サンプル 太郎</span> 23 </p> 24 <p> 25 出版年: 26 <!-- itemprop="datePublished" で本の出版年を定義します。 --> 27 <span itemprop="datePublished">2023</span> 28 </p> 29 <!-- 30 metaタグは、ウェブページに表示されない情報を提供するために使用されます。 31 ここでは、itemprop="isbn" と content 属性を組み合わせて、 32 本のISBN番号を検索エンジンなどのクローラーに伝えます。 33 --> 34 <meta itemprop="isbn" content="978-4-00000000-0"> 35 </div> 36 37</body> 38</html>
HTMLのitemprop属性は、ウェブページ上のコンテンツがどのような情報であるかを検索エンジンなどのクローラーに明確に伝えるためのグローバル属性です。これは、ページに表示されるデータや隠されたデータに対して、具体的な意味付け（構造化データ）を行う際に用いられます。itemprop属性は単独ではなく、通常はitemscope属性とitemtype属性と組み合わせて使用されます。まずitemscopeとitemtypeで情報の種類（例：本、人物、イベントなど）を定義し、その内部でitempropを用いて個々のプロパティ（例：本のタイトル、著者、出版年など）を指定します。この属性には引数も戻り値もありません。
提示されたサンプルコードでは、まずdiv要素にitemscopeとitemtype="http://schema.org/Book"が設定され、このブロックが「本」に関する情報であることを示しています。その中で、span要素にitemprop="name"で本のタイトル、itemprop="author"で著者、itemprop="datePublished"で出版年をそれぞれマークアップしています。これにより、検索エンジンはこれらの文字列がそれぞれ何を意味するのかを正確に理解し、よりリッチな検索結果表示などに活用できます。
また、itemprop属性はmetaタグと組み合わせることで、ウェブページには表示されないが機械が読み取れる形式の情報を提供することも可能です。サンプルコードの<meta itemprop="isbn" content="978-4-00000000-0">のように、本のISBN番号をユーザーには見せずに検索エンジンに伝えることができます。このように、itemprop属性はウェブコンテンツのセマンティック（意味論的）な豊かさを高め、検索エンジン最適化（SEO）において重要な役割を果たします。
itemprop属性は単独では機能せず、必ず親要素に設定されたitemscopeとitemtype属性と組み合わせて使用する点が重要です。itemtypeで指定されたschema.orgなどの語彙によって、その要素が何の情報を表すか（例: Book）を定義し、itempropはその中の具体的な項目（例: name、author）をマークアップします。
itempropに指定するプロパティ名（例: name、author、isbn）は、itemtypeで指定したスキーマに準拠した正式な名称を選んでください。自由に名前を付けると、検索エンジンなどの機械が正しく理解できません。
また、metaタグとitemprop属性を組み合わせることで、ウェブページには直接表示されないが、検索エンジンなどのクローラーに伝えたい重要な構造化データ（例: ISBN番号）を記述できます。これにより、検索エンジンの理解を助け、検索結果での表示向上に貢献します。