【HTML Living Standard】itemtype属性の使い方
itemtype属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
itemtypeプロパティは、HTML要素が表すデータの種類（タイプ）を定義する情報を保持するプロパティです。これは「マイクロデータ」と呼ばれるHTMLの機能の一部であり、Webページに記述されたコンテンツがどのような意味を持つ情報であるかを、検索エンジンやその他のソフトウェアが理解できるようにするために使用されます。
具体的には、itemscope属性が指定された要素（これを「アイテム」と呼びます）が、人物、イベント、商品などのうち、どの種類のデータであるかをURI（Uniform Resource Identifier）形式で指定します。例えば、https://schema.org/PersonというURIは、そのアイテムが「人物」に関する情報であることを示します。
itemscope属性と組み合わせることで、HTMLの構造だけでなく、その内容の意味も機械が理解できるようになり、より高度なデータ処理や表示が可能になります。これによって、検索エンジンがWebサイトの情報をより正確に解釈し、検索結果にリッチスニペットとして表示するなど、ユーザーにとって有益な情報提供に貢献します。
itemtypeはitemscope属性を持つ要素にのみ適用され、指定するURIは、Schema.orgのような標準化された語彙の定義に従うことが推奨されます。これにより、情報の互換性と正確性が保たれます。
構文(syntax)
1<div itemscope itemtype="http://schema.org/Person"></div>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
itemtype属性によるアイテムタイプ定義
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>製品情報サンプル</title> 7</head> 8<body> 9 <!-- 10 itemscope属性はこの要素が特定のアイテム（ここでは製品）に関する情報を保持することを示します。 11 itemtype属性は、そのアイテムのタイプを定義する語彙（ここではschema.orgのProduct）を指定します。 12 これにより、検索エンジンなどがページの情報をより正確に理解できるようになります。 13 --> 14 <div itemscope itemtype="https://schema.org/Product"> 15 <h1 itemprop="name">HTML/CSS 入門ガイド</h1> 16 <img itemprop="image" src="book_cover.jpg" alt="HTML/CSS 入門ガイドの表紙"> 17 <p itemprop="description">ウェブサイト制作の基本であるHTMLとCSSを初心者向けに解説した書籍です。</p> 18 <p>価格: <span itemprop="priceCurrency" content="JPY"></span><span itemprop="price">2500</span>円</p> 19 <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> 20 <p>評価: <span itemprop="ratingValue">4.7</span>/5段階 (<span itemprop="reviewCount">58</span>件のレビュー)</p> 21 </div> 22 <p>著者: <span itemprop="author">ウェブ太郎</span></p> 23 <p>出版社: <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span itemprop="name">TECH出版</span></span></p> 24 </div> 25</body> 26</html>
HTMLのitemtype属性は、ウェブページのコンテンツが何に関する情報であるかを機械（特に検索エンジンなど）が理解しやすくするために使用されるグローバル属性です。これは、必ずitemscope属性と組み合わせて使用されます。itemscope属性が「この要素内に特定のアイテムの情報があります」と宣言するのに対し、itemtype属性はそのアイテムが「どのような種類のものか」を定義する役割を担います。
具体的には、itemtype属性の値には、ウェブ上に公開されている語彙のURLを指定します。例えば、https://schema.org/Productを指定することで、その要素内の情報が「製品」に関するものであることを明確に示します。これにより、検索エンジンはページのコンテンツをより正確に解釈し、検索結果にリッチスニペットとして表示するなど、ユーザーにとって有益な情報提供が可能になります。
この属性自体は、値として特定の語彙のURLを受け取りますが、それ自体にプログラミング的な「引数」や処理結果としての「戻り値」は持ちません。HTMLの構造に意味付けを行うためのマークアップの一部です。
サンプルコードでは、div要素にitemscopeとitemtype="https://schema.org/Product"が指定されており、このdivが製品情報（書籍）を表していることを示しています。さらに、製品名（itemprop="name"）、画像（itemprop="image"）、説明（itemprop="description"）、価格（itemprop="price"）などがitemprop属性を使って詳細にマークアップされています。また、入れ子になったdiv要素で評価（itemtype="https://schema.org/AggregateRating"）も構造化されており、これらの情報が検索エンジンに提供されることで、よりリッチな検索結果表示が期待できます。
itemtype属性は、単独では機能せず、必ずitemscope属性と組み合わせて使用します。itemscopeが特定のHTML要素が「アイテム」の情報を表すことを示し、itemtypeはそのアイテムがどのような種類の情報であるかを、https://schema.org/Productのような標準化された語彙のURLで指定します。これは、検索エンジンなどの機械がウェブページのコンテンツをより正確に理解するための大切な情報となります。
指定するitemtypeの値は、マークアップしている内容と正確に一致させる必要があります。誤ったタイプを指定すると、意図した構造化データとして認識されず、検索結果での表示改善など、期待される効果が得られない可能性があります。また、アイテムの具体的な属性（名前、価格など）はitemprop属性を用いて記述します。これらの属性は、ウェブサイトのSEO（検索エンジン最適化）に貢献し、情報の視認性を高めるために利用されます。