HTML

In HTML, itemprop is a label that tells search engines what each piece of information means (like a name, price, author, or publish date), so your page is less likely to be misunderstood.

itemprop 属性

HTMLの itemprop は、ページの中の「名前・価格・著者・公開日」みたいな情報にラベルを貼って、検索エンジンが内容を取り違えにくくするための目印です。

はじめに

検索エンジンもページ内容から“それっぽい意味”は推測しますが、機械にとっては曖昧になりがちです。itemprop で「これは価格」「これは著者名」みたいにラベルを付けると、答え合わせができて解釈が安定します。

結果として SEO で有利になり、リッチリザルト（レビュー星・パンくず・イベント日時など）が表示されるチャンスが生まれます。

ちなみに itemprop は Microdata（マイクロデータ）の仕組みで、よく schema.org の語彙（プロパティ名）とセットで使われます。

マイクロデータと 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 検索は型を厳格に評価。

複数値の指定

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 を JavaScript から読むための専用 API（document.getItems など）は、対応ブラウザが限られます。学習として知っておくのはOKですが、実務では「使える前提」にしない方が安全です。

JavaScript

// 注意：このAPIは主要ブラウザで広くは使えません（学習用の例）
// ページ内の 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 はほぼ“読み取り専用”用途。

SEO とリッチリザルト

Google の評価ポイント
  • 語彙が 構造化データのガイドライン に合致していること
  • ページに表示される UI とデータが一致していること（クローク禁止）
  • 不完全な itemprop を置くより 必要最小限＋正確 の方が好印象
Bing・Yandex もほぼ同じ実装。
テストツール

アクセシビリティとの相性

itemprop 自体は支援技術が無視するため、スクリーンリーダーの読み上げフローに影響しない。

よくある落とし穴とベストプラクティス

itemprop の綴りミス
検索エンジンは無視。早期に validator を通す。
複数 itemtype の混在
itemscope を分けてネストし、itemref は避ける（複雑でデバッグ困難）。
SSR ＋ CSR で DOM を再構築する SPA
CSR 完了後に Microdata が消えるケースがある。DOM を上書きしないよう設計。
JSON-LD 併用
コンテンツが大規模・多言語なら Microdata を捨てて JSON-LD 一本に統一するほうが保守しやすい。
itemprop だけ書いて itemscope/itemtype を書かない
どのアイテムのプロパティか特定できず意味が薄れる。
プロパティ名を独自に作る
可能だが、なるべく schema.org など共通語彙を使うと効果大。

よくある質問（FAQ）

itemprop だけ書けば検索エンジンに伝わりますか？
単体でも“ヒント”にはなりますが、基本は itemscope と itemtype がセットです。「何の情報のまとまりで、その中のどの項目か」が分かれて初めて強く伝わります。
itemprop の値（例: name や price）は自由に決めていい？
自由に作ることもできますが、SEO目的なら schema.org のプロパティ名に合わせるのが基本です。検索エンジンが理解しやすくなります。
Microdata と JSON-LD、どっちを選べばいい？
既存HTMLをそのまま活かしたいなら Microdata、運用・保守をラクにしたいなら JSON-LD が選ばれやすいです。Googleは JSON-LD を推奨しつつ、Microdata もサポートしています。
<meta> で値だけ入れるのはアリ？
アリです。ただし「ページ上に表示される内容」と矛盾しないようにします。見えない値だけ盛るのはNGです。
FAQの構造化データを入れたら検索結果にFAQが必ず出る？
出るとは限りません。GoogleはFAQリッチリザルトの見せ方を縮小していて、条件によっては表示されません。ただ、ページの分かりやすさ自体は上がります。

よくあるエラー早見表

Rich Results Test で「必須プロパティが不足」
その構造化データ種別（例: Product）に必要な項目が足りていません。まずは必須だけ揃えます。
itemprop を書いたのに認識されない
itemscope/itemtype が無い、または itemprop の付け先がアイテムの外になっている可能性が高いです。
表示していない情報だけ <meta> に入れている
ページ表示と食い違うと品質的にマイナスになりやすいです。ユーザーに見える情報と一致させます。
数値が文字列扱いでズレる（価格・評価など）
content には “生の数値” を入れて、表示は別で整形すると安定します。
FAQが検索結果に出ない
実装が正しくても、Google側の表示条件で出ないことがあります（特にFAQは表示が限定されています）。

将来動向

WHATWG 仕様では Microdata が “非推奨”ではないものの、開発は停滞。

Google 検索は構造化データの形式として JSON-LD（推奨）/ Microdata / RDFa をサポートしています。とはいえ、保守のしやすさ的に JSON-LD を選ぶケースが多いです。

ただし レガシー CMS やメールテンプレート など、純 HTML しか触れない環境では今後も需要が残る。

まとめ

itemprop は「ページ内の要素に“意味”を付けて検索エンジンとデータベースに語りかけるラベル」。