Webセマンティックのマイクロデータ

よりセマンティックな情報でページを強化する方法

Microdata-小さくて大きな影響

Webアプリは、ドキュメントのにある古き良きメタ要素だけでなく、それ自体に関するより多くの情報を提供できることをご存知ですか?今日、Webアプリケーションはこれまで以上に相互接続されているため、各ページの目的を明確に定義することがますます重要になっています。

実際の例

これが少し奇妙に聞こえる場合は、簡単な例を簡単に見てみましょう。あなたがブログを持っていて、当然、検索エンジンがあなたがすべての記事で公開するコンテンツをよりよく理解することを望んでいると考えてください。明確で意味的に正しいHTML構造は基本的な要件ですが、ほんの始まりにすぎません。

JSON-LDなどの標準の開発のおかげで、構造化データを均一な方法で提供できます。ここでのキーワードは、検索エンジンとそのボットがこのメタデータを正確に理解するようにプログラムされているため、この追加のメタデータが定義される標準化された形式です。

例に戻ると、ブログ記事の場合、記事の主要なプロパティを説明するJSON-LD要素「article」が使用可能です。

JSON-LDの代替

さて、これはすべて非常にいいように聞こえますが、それはマイクロデータと何の関係がありますか? Microdataには、基本的に上記のJSON-LDと同じ目的があります。つまり、使用するページにより多くのメタデータを提供します。主な違いは、JSON-LDをWebアプリの要素で定義する必要があることです。ただし、microdata要素は、データをとの間で分割する必要なしに、ページのコンテンツ内で直接使用できます。

<!-- 
The following eample is taken from Mozilla's site,
linked in the addendum. 
-->

<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

ユースケースやフレーバーによっては、これはJSON-LDよりも保守しやすいソリューションになる可能性があります。 microdataの良いところは、実際にはDOM内の個別の要素ではなく、既存のHTMLを拡張できる一連のプロパティであるということです。

たとえば場所、人、製品など、マイクロデータから選択できるバリエーションは多数あります。それらは検索エンジンのボットによってよく認識されているため、JSON-LDの実行可能な代替手段を提供します。