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

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

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

編集

マイクロマークアップには、主に 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 コードをより構造化し、メンテナンスしやすくなります。

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

編集

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

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

マイクロマークアップの種類

編集

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

  • hCard: 人の連絡先情報を記述するために使用されます。
  • hCalendar: イベント情報を記述するために使用されます。
  • hReview: レビュー情報を記述するために使用されます。
  • hProduct: 製品情報を記述するために使用されます。
  • XFN: ソーシャルネットワーク上の関係を記述するために使用されます。
  • Geo: 地理的な場所情報を記述するために使用されます。
  • Microdata: 上記のマイクロフォーマットに加えて、独自のカスタムエンティティを記述するために使用できます。

マイクロマークアップのツール

編集

マイクロマークアップを作成するのに役立つツールがいくつかあります。

マイクロマークアップのベストプラクティス

編集

マイクロマークアップを使用する場合は、次のベストプラクティスに従ってください。

  • 適切な語彙を使用する: エンティティを記述するために、適切な語彙を使用してください。
  • 構造化されたデータを使用する: マイクロマークアップを使用して、構造化されたデータを提供してください。
  • テストと検証を行う: マイクロマークアップが正しく実装されていることを確認するために、テストと検証を行ってください。

マイクロマークアップの将来

編集

マイクロマークアップは、Web ページに意味を追加するための強力な方法です。 schema.org のような標準の出現により、マイクロマークアップは今後ますます重要になると予想されます。

まとめ

編集

マイクロマークアップは、HTML に意味を追加し、Web ページをより構造化し、検索エンジンやその他の Web アプリケーションにとってより理解しやすくする強力な方法です。 マイクロマークアップを学ぶことで、より良い Web サイトを作成することができます。

その他の情報

編集
 
Wikipedia
ウィキペディアマイクロフォーマットの記事があります。