HTML/マイクロマークアップ

マイクロマークアップは、HTML に意味を追加するための方法です。HTML の既存要素を使用して、人、場所、イベント、製品などのエンティティを記述します。これにより、検索エンジンやその他の Web アプリケーションがページの内容をよりよく理解し、ユーザーに関連性の高い結果を提供することができます。

フレーム

HTML
マイクロマークアップ

セマンティックHTML

マイクロフォーマットとマイクロデータ

マイクロマークアップには、主に 2 種類の形式があります。

マイクロフォーマット: HTML のクラス属性を使用してエンティティを記述します。hCard、hCalendar、および XFN などのよく知られたマイクロフォーマットがあります。
マイクロデータ: itemscope 属性と itemprop 属性を使用してエンティティを記述します。マイクロデータは、より汎用的で強力なマイクロマークアップ形式です。

マイクロフォーマットの使用例

以下に、マイクロフォーマットを使用して連絡先情報をマークアップする例を示します。

<div class="hcard">
   <p class="fn">山田 太郎</p>
   <p class="org">株式会社 山田</p>
   <p class="tel">03-1234-5678</p>
   <a href="mailto:taro.yamada@example.com" class="email">taro.yamada@example.com</a>
 </div>

このコードは、次のエンティティを記述します。

名前: 山田太郎
所属: 株式会社山田
電話番号: 03-1234-5678
メールアドレス: taro.yamada@example.com

マイクロデータの使用例

以下に、マイクロデータを使用してイベント情報をマークアップする例を示します。

<div itemscope itemtype="http://schema.org/Event">
   <h1 itemprop="name">株式会社 山田 創立記念パーティー</h1>
   <p itemprop="description">株式会社 山田 の創立を記念したパーティーです。</p>
   <p itemprop="startDate" content="2024-06-22">開催日時: 2024年6月22日</p>
   <p itemprop="location" itemscope itemtype="http://schema.org/Place">
     <p itemprop="address">〒100-0001 東京都千代田区千代田 1-1-1</p>
   </p>
 </div>

このコードは、次のエンティティを記述します。

イベント名: 株式会社山田創立記念パーティー
説明: 株式会社山田の創立を記念したパーティー
開始日時: 2024年6月22日
場所: 〒100-0001 東京都千代田区千代田 1-1-1

マイクロマークアップの利点

マイクロマークアップを使用する利点は次のとおりです。

検索エンジン最適化 (SEO): 検索エンジンは、マイクロマークアップを使用してページの内容をよりよく理解し、より関連性の高い検索結果を提供することができます。
リッチスニペット: マイクロマークアップを使用して、検索結果に表示されるリッチスニペットを強化することができます。リッチスニペットは、イベント、製品、レビューなどの追加情報を表示するのに役立ちます。
アクセシビリティ: マイクロマークアップを使用して、スクリーンリーダーなどの補助技術で使用される情報を提供することができます。
メンテナンス性: マイクロマークアップを使用して、HTML コードをより構造化し、メンテナンスしやすくなります。

マイクロマークアップの開始方法

マイクロマークアップの開始方法は次のとおりです。

マイクロフォーマットまたはマイクロデータを選択する: マイクロフォーマットは、シンプルで使いやすいですが、マイクロデータほど汎用的ではありません。マイクロデータは、より複雑ですが、より多くの機能を提供します。
適切な語彙を選択する: マイクロフォーマットまたはマイクロデータを使用する場合は、エンティティを記述するために使用する語彙を選択する必要があります。 schema.org は、よく使用される語彙のコレクションを提供しています。
HTML コードにマークアップを追加する: 選択した語彙を使用して、HTML コードにマークアップを追加します。