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 属性を使うと、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> 要素を使えば表示せずに値だけ提供できる。

効果

リッチリザルト
検索結果に評価★や価格が表示されやすくなる。
アクセシビリティ向上
スクリーンリーダーや AI が文脈を理解しやすい。
データ再利用
他のサービスがページをクロールして情報を集めやすくなる。

よくある間違い

itemprop だけ書いて itemscope/itemtype を書かない
どのアイテムのプロパティか特定できず意味が薄れる。
プロパティ名を独自に作る
可能だが、なるべく schema.org など共通語彙を使うと効果大。

まとめ

itempropは「この要素は〇〇という属性ですよ」と機械に伝える名札。

itemscope/itemtype とセットで使い、検索や音声アシスタントに優しいページを作りましょう。