HTML

It is a mechanism for tagging each element of a web page with “what it is” and conveying that information to search engines as structured data.

itemprop 属性

はじめに
マイクロデータと itemprop の全体像
基本的な書き方
itemprop の挙動を深掘り
DOM API からのアクセス（上級）
SEO とリッチリザルト
アクセシビリティとの相性
よくある落と穴とベストプラクティス
将来動向
まとめ

はじめに

検索エンジンやソーシャルプラットフォームは、ページに書かれた“意味”を理解できるほど賢くはありません。itemprop 属性を使うと、HTML 要素に「これは商品価格だ」「これは著者名だ」とラベルを貼り付け、機械が正確に解釈できる“構造化データ”をページ内に直接埋め込めます。結果として SEO で有利になり、リッチリザルト（レビュー星・パンくず・イベント日時など）が表示されるチャンスが生まれます。

マイクロデータと itemprop の全体像

Microdata 仕様: HTML5 で導入された仕組み。itemscope で“アイテム”を宣言し、itemtype でその種類（schema.org などの語彙）を示し、itemprop で各要素の役割を指定していく。
主役は語彙 (Vocabulary): もっとも一般的なのが schema.org。Google など主要検索エンジンが共同で管理し、数千種類のプロパティを定義。; 属性値は URL（例: https://schema.org/Person ）で書くのが基本だが、itemprop の値は語彙で規定された「短い名前」（name, price, image …）を使う。
JSON-LD との関係: Google は JSON-LD を“推奨”と公言。ただし Microdata も完全サポート。; ハイブリッド手法 : 既存 HTML を壊さず JSON-LD を SSR で生成する、あるいは SPA で動的に注入するなど、両者を補完的に使うケースが増えている。

基本的な書き方

HTML

<!-- 商品カード（アイテム全体） -->
<article itemscope itemtype="https://schema.org/Product">
	<h2 itemprop="name">Noise-Cancelling Headphones X100</h2>
	<img src="x100.jpg" alt="" itemprop="image">
	<p>
		<span itemprop="priceCurrency" content="JPY">¥</span>
		<span itemprop="price" content="19800">19,800</span>
	</p>
	<meta itemprop="availability" content="https://schema.org/InStock">
</article>

コード解説

itemscope: ここから先が 1 つの“アイテム”。
itemtype: Product という型を指定。
itemprop: 子要素それぞれに意味をタグ付け。

非可視データ（通貨コードや在庫状態など）は <meta> 要素を使えば表示せずに値だけ提供できる。

itemprop の挙動を深掘り

適用できる要素

ほぼすべての要素で利用可。<meta> を使えばテキストを表示せず値だけ埋め込める。

データ型と既定値

schema.org では Text / URL / Date / Number / Boolean など多数の型が定義され、Google 検索は型を厳格に評価。

例 : datePublished は ISO-8601 (YYYY-MM-DD) を期待。
数値なら content 属性で小数点や通貨を省いた“生の数値”を指定すると評価が安定。

複数値の指定

HTML

<ul>
	<li itemprop="genre">Rock</li>
	<li itemprop="genre">Blues</li>
</ul>

同じ itemprop が複数あれば配列として扱われる。検索エンジンはすべてを取得し、最も関連性が高いものをリッチリザルトに採用する。

ネストされたアイテム

アイテムの中に別の itemscope を作れば、階層構造も表現可能。

HTML

<div itemscope itemtype="https://schema.org/Recipe">
	<span itemprop="name">抹茶ケーキ</span>
	<div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
		<meta itemprop="calories" content="340">
		1切れ 340 kcal
	</div>
</div>

DOM API からのアクセス（上級）

ブラウザには Microdata 用 API が実装済み（ただし一部非推奨）。

JavaScript

// ページ内の Product アイテムを取得
const products = document.getItems('https://schema.org/Product');
for (const item of products) {
	console.log(item.properties.name[0].value);
}

SSR でレンダリングした後にインタラクティブ機能を付与するときに便利。

ただし新規案件では JSON-LD 生成＋querySelector を組み合わせることが多く、この API はほぼ“読み取り専用”用途。