JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のマイクロデータ属性とは？5つのグローバル属性を徹底解説

HTML5マイクロデータ属性の概要

マイクロデータ（Microdata）は、HTML5で導入された仕組みの一つで、ページ上のデータに「機械が理解できる文脈」を与えるためのものです。具体的には、5つのグローバル属性が定義されており、これらはどのHTML要素にも適用できます。検索エンジンのクローラーなどがページの内容をより正確に解析できるようになるため、SEOの観点からも重要な属性です。

マイクロデータを構成する5つの属性

属性名説明
itemscopeアイテム（項目）を作成するための属性です。ブール型（真偽値）の属性であり、「このページにはマイクロデータが存在し、ここがその開始点である」ことを示します。
itemtypeアイテムの種類を定義する有効なURLを指定します。このURLによってアイテムの性質が決まり、配下のプロパティに意味的な文脈を与えます。例えば「https://schema.org/Person」のように指定します。
itemidアイテムに対して一意のグローバル識別子（ID）を割り当てる属性です。同じアイテムを他のページやサイトと関連付ける際に使用されます。
itempropアイテムの個々のプロパティ（特性）を定義する属性です。名前や住所、URLなど、アイテムを構成する具体的な情報を指定します。
itemrefitemscopeで示した範囲外にある要素も含めてクロール対象としたい場合に使用します。追加で参照すべき要素のIDリストを指定することで、アイテムの名前と値のペアを取得できます。

まとめ

これら5つの属性を組み合わせることで、人間向けのコンテンツはそのままに、機械にとって意味のある構造化データをHTML内に埋め込むことが可能になります。特にschema.orgのボキャブラリーと併用することで、検索エンジンによるリッチスニペット表示などへの効果も期待できます。

  1. HTMLのdata-*属性とは？カスタムデータ属性の基本と使い方を実例付きで解説

    HTMLのdata-*属性は、あらゆるHTML要素に独自のカスタムデータを埋め込むために使用されるグローバル属性です。グローバル属性であるため、どの要素に対しても自由に利用できます。 JavaScriptと連携して要素に関連付ける情報を持たせたい場合などに非常に便利で、モダンなWeb開発では広く活用されています。 data-*属性の書き方（構文） 基本的な構文は以下の通りです。 <element data-属性名=値> ここで注意すべきポイントは次の2つです。 属性名には小文字のみを使用する（大文字は使用不可） 接頭辞「data-」の後に、少なくとも1文字以上の文字が必要 da

  2. HTML属性とは？基本構文からol・textareaの実用例までわかりやすく解説

    HTML属性（attribute）は、画像やキャンバスの幅・高さのように、要素に対してプロパティを設定するために使用されます。すべての要素は属性を持つことができ、要素に関する追加情報をブラウザに伝える役割を果たします。属性は「名前」と「値」のペアで構成されます。以下はその基本的な例です。<canvas id="newCanvas" width="400" height="300">その他の属性の例も見てみましょう。<img alt="代替テキスト">HTML5の標準仕様では、属性値を引用符で