HTML microdata attributes are a mechanism that assigns semantic meaning to information by adding item types and properties to HTML tags, thereby enabling search engines and similar services to structurally understand webpage content.
Webページには、人間が読むためのテキストや画像などの情報が含まれています。しかし、検索エンジンなどの機械がそのページの内容を正確に理解しようとすると、テキストや画像だけでは内容の構造や意味を明確に把握しづらい場合があります。
このとき、ページのコンテンツに対して機械が理解しやすい形で「意味付け（構造化）」を与えるのが、HTMLのマイクロデータをはじめとした「構造化データ」と呼ばれる仕組みです。
構造化データの主な記述方法には、以下の3種類が代表的です。
その中でもマイクロデータは、HTML5の仕様の一部として提案され、HTMLタグに組み込む形で追加するのが特徴です。古くから存在しているため対応例も多く、また Schema.org のボキャブラリーを用いることで検索エンジンなどが理解できる共通の意味付けを行うことができます。
マイクロデータを使う際によく利用されるのが Schema.org です。これはGoogle、Microsoft、Yahoo!、Yandexといった大手検索エンジンが共同で策定しているスキーマ(語彙)の集合です。
Schema.org に定義されているボキャブラリー（たとえば「Person」や「Product」「Review」など）を使ってマイクロデータを付与することで、検索エンジンがWebページの意味・内容をより正確に理解し、検索結果の「リッチリザルト（拡張スニペット）」に反映してくれる可能性が高まります。
マイクロデータをHTMLのコードに埋め込む際には、いくつかの専用属性を使用します。代表的なものを以下に示します。
itemscope属性を指定した要素がどの種類（タイプ）のアイテムなのかをURLで示します。通常、Schema.orgのURLを指定します。https://schema.org/Person、https://schema.org/Product などitemscopeが付いた要素の中で使用されます。itemscopeを指定している要素の外にも関連するプロパティがあるときに、その要素のidをitemrefで指定します。例：
HTML
<div itemscope itemtype="https://schema.org/Person">
<!-- ここに人物情報を記述 -->
</div>上記のようにitemscopeとitemtypeを組み合わせることで、この<div>要素がSchema.orgにおけるPersonというタイプのアイテムであることを明示します。
例：
HTML
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">山田 太郎</span>
<img itemprop="image" src="taro.jpg" alt="山田 太郎の写真">
<span itemprop="jobTitle">Webエンジニア</span>
</div>nameというプロパティに「山田 太郎」という文字列を割り当てimageというプロパティに写真へのURLを割り当てjobTitleというプロパティに職種を割り当てこれにより、検索エンジンなどは「このページにはPerson（人物）に関する情報があり、その人の名前は「山田 太郎」である」というように、文脈や意味を把握できます。
マイクロデータは通常、1つのタグ階層の中でitempropを定義します。しかし、場合によってはページの別の場所にある要素を同じスコープ内のプロパティとして定義したいケースがあります。そのときに使えるのがitemref属性です。
例：
HTML
<div itemscope itemtype="https://schema.org/Product" itemref="extendedInfo">
<span itemprop="name">サンプル商品</span>
<span itemprop="brand">サンプルブランド</span>
</div>
<div id="extendedInfo">
<span itemprop="description">これはサンプル商品の説明文です。</span>
<span itemprop="sku">ABC-12345</span>
</div><div itemscope ... itemref="extendedInfo"> とすることで、id="extendedInfo"要素内のプロパティも同じProductアイテムの一部として扱われます。
itemid属性は、アイテムを固有の識別子として一意に示したい場合に使用します。たとえば、公式ページや商品ページなど、絶対URLで指定します。
HTML
<div itemscope itemtype="https://schema.org/Product" itemid="https://example.com/products/abc-12345">
<span itemprop="name">サンプル商品</span>
...
</div>これにより、itemscopeで指定したこのアイテムは「https://example.com/products/abc-12345」という一意のIDを持つオブジェクトだと認識されます。
先ほどの例をもう少し発展させ、複数のプロパティを使って記述します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マイクロデータの例 - 人物情報</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/Person">
<h1>メンバー紹介</h1>
<h2 itemprop="name">山田 太郎</h2>
<img itemprop="image" src="taro.jpg" alt="山田 太郎の写真">
<p itemprop="jobTitle">Webエンジニア</p>
<p>経歴: <span itemprop="description">フロントエンドからバックエンドまで幅広い開発を担当。</span></p>
</div>
</body>
</html>PersonOrganizationProductOfferReviewArticleBreadcrumbList（パンくずリスト）FAQPage（FAQページ）EventLocalBusiness検索エンジンがリッチリザルトとして扱う代表的なものは、Google検索ギャラリー などで公開されています。検索結果にマイクロデータを反映したい場合は、Googleのガイドラインに沿ったタイプやプロパティを設定することが重要です。
最近の推奨として、GoogleはJSON-LDを用いた構造化データの記述を好む傾向があります。JSON-LDはHTML本文から分離してJavaScriptオブジェクトノーテーションでデータを定義するため、HTMLの可読性が保ちやすいというメリットがあります。
しかし、マイクロデータはHTML5の要素に直接組み込むため、コンテンツとデータが一体となっているというメリットもあります。プロジェクトやチームの方針に応じて、マイクロデータを採用するか、JSON-LDを採用するか判断するとよいでしょう。
マイクロデータとJSON-LDを同時に使うことも可能ですが、重複した意味付けが行われないように注意する必要があります。たとえば、同じ要素をPersonとしてマイクロデータで定義しながら、別途JSON-LDでも同じタイプを定義してしまうと、検索エンジンがデータを重複とみなして混乱を起こす場合があります。
構造化データを正しく実装できているかどうかを確認するには、以下のツールを利用するのが一般的です。
これらのツールを用いて、エラーや警告が出ていないか、求められる必須項目が欠けていないかを確認します。
構造化データを入れれば何でも検索で上位に表示されるわけではありません。検索結果の評価では、コンテンツの品質やサイトのユーザビリティ、モバイル対応など様々な要素が考慮されます。マイクロデータはあくまでも検索エンジンに正確な情報を伝えるための補助として位置づけましょう。
たとえばショッピングサイトでは、同じ商品でもサイズや色ごとにSKUが異なる場合があります。マイクロデータで一つのProductスキーマ内に複数のOfferを記述する方法もあれば、バリエーションごとに別々のProductスキーマを用意する方法も考えられます。
どの方法が適切かは検索エンジンのガイドラインや自社の在庫管理システムとの連携状況を踏まえて検討します。
実際のECサイトなどでよく使われる例として、商品とレビューを同じページに記述することが多いです。ここではサンプルコードを示します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マイクロデータ例 - 商品とレビュー</title>
</head>
<body>
<!-- Product スキーマ -->
<div itemscope itemtype="https://schema.org/Product" itemid="https://example.com/products/abc-12345">
<h1 itemprop="name">サンプル商品</h1>
<img itemprop="image" src="sample.jpg" alt="サンプル商品の画像">
<p itemprop="description">
このサンプル商品は高品質な素材を使用し、快適な使用感を実現しています。
</p>
<p>
メーカー: <span itemprop="brand">サンプルブランド</span>
<br>
SKU: <span itemprop="sku">ABC-12345</span>
</p>
<p>参考価格: <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="priceCurrency" content="JPY">
<span itemprop="price">3980</span>円
</span></p>
<!-- AggregateRating（平均評価）の例 -->
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
平均評価: <span itemprop="ratingValue">4.2</span> /
<span itemprop="bestRating">5</span>
( <span itemprop="reviewCount">120</span> 件のレビュー )
</div>
<!-- 個別のレビューを記述する -->
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<h2>レビュー1</h2>
<span itemprop="author">ユーザーA</span> さんのレビュー:
<div itemprop="reviewBody">
とても使いやすく、値段以上の価値があります。
</div>
<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
評価: <span itemprop="ratingValue">5</span> / 5
</div>
<p>投稿日: <meta itemprop="datePublished" content="2025-02-11">2025年2月11日</p>
</div>
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<h2>レビュー2</h2>
<span itemprop="author">ユーザーB</span> さんのレビュー:
<div itemprop="reviewBody">
機能は満足ですが、色のバリエーションがもっと欲しいです。
</div>
<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
評価: <span itemprop="ratingValue">4</span> / 5
</div>
<p>投稿日: <meta itemprop="datePublished" content="2025-02-10">2025年2月10日</p>
</div>
</div>
</body>
</html>このように、商品(Product)の情報とレビュー(Review)を関連づけてページ内に埋め込むことにより、検索エンジンが商品データとレビューを一貫して理解し、リッチリザルトへの反映が期待できるようになります。
基本的には、メインとなる要素にitemscopeとitemtypeを指定し、プロパティを示す要素にitempropを加えればOKです。その他itemrefやitemidはオプションですが、必要に応じて使うことができます。
Schema.orgのサイトで詳細なドキュメントを調べる、またはGoogleのドキュメントのなかで推奨されるプロパティを確認するのが近道です。たとえばFAQページの構造化データであれば、FAQPageを使い、それぞれの質問をQuestion、回答をAnswerとして定義します。
マイクロデータはHTML属性であり、通常の表示には影響しません。古いブラウザでも問題なく表示されますが、構造化データを読み取る側（検索エンジンなど）によっては対応が異なることもあります。いずれにせよ、ユーザーにとってのページ閲覧に支障は基本的にありません。
既にマイクロデータで実装済みの場合は、それを維持することも可能ですが、新規実装や大幅リニューアルのタイミングでJSON-LDへ移行するのも選択肢の一つです。
マイクロデータは、HTMLと密接に結びついているがゆえに、HTMLを学ぶ人にとってはより直感的に意味付けが理解しやすい面があります。
ぜひ一度、小規模なページでもいいので実際にマイクロデータを使ってみて、GoogleのリッチリザルトテストやSchema.org Validatorで検証しながら学習を進めてみてください。実践を通じて得られる経験値は大きく、構造化データ全般への理解が深まるでしょう。