良い一日！ この記事では、microdataとschema.org辞書についてお話したいと思います。 この注目すべき技術
については、すでにハブで2回
話されましたが、いくつかの重要なポイントが取り上げられていませんでした。
マイクロデータ
HTML5には、とりわけ、インターネットに少しのセマンティクスをもたらすように設計された標準があります。 もちろん、RDFやmicroformatsなどの標準はすでに存在しますが、microdataはそれらの間違いを考慮して開発され、ウェブマスターに多くの利点を提供します。 したがって、RDFは既存のデータの複製を意味し、データ量を考えるとコストがかかる可能性があります。 次に、マイクロフォーマットを使用すると、既存のドキュメントをマークアップできますが、
classなどの便利な属性を選択できます。
構文
html要素を
itemscopeノードにするには、
itemscope属性を追加する
itemscopeです。 名前を付けると便利です。これには、属性
itemtype="name_of_class" 、正確な特性評価には、属性
itemprop="name_of_property"ネストされた要素
itemprop="name_of_property"ます。 ただし、場合によっては、キー->値のペアでは不十分で、ネストされたノードが有効になります。 itemprop属性の後にそれらを示すには、itemscope属性と
itemtype属性を追加する必要があります。
マークアップの例を次に示します（この記事）：
<article itemscope itemtype="http://schema.org/Article"> <h1 itemprop="name"> Microdata</h1> <meta itemprop="inLanguage" content="ru" /> <section itemprop="articleBody"> «»! </section> <section itemprop="author" itemscope itmetype="http://schema.org/Person"> <span itemprop="additionalName">VlAleVas</span> </section> </article>
一部のプロパティにはいくつかのプロパティがあり、たとえばロシア語の使用が問題になる場合があります。 しかし、そのようなプロパティは
linkタグで識別できます：
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name"></span> <span itemprop="price">$100500</span> <link itemprop="availability" href="http://schema.org/InStock"/> ! </div>
場合によっては、コンテンツはユーザーには表示されますが、写真などの検索エンジンにはアクセスできません。 次に、
metaが入ります。
<div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name"> 4GSTW</span> <span itemprop="price">$100500</span> <link itemprop="availability" href="http://schema.org/InStock"/> ! <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating"> <img src="five-stars.jpg" /> <meta itemprop="ratingValue" content="5" /> <meta itemprop="bestRating" content="5" /> <span itemprop="ratingCount">9000</span> <s></s> . </div> </div>
辞書
例では、クラス名としてURIを使用していることに気づきました。 他の誰かがあなたのクラスを知っていれば良いので、これはそれらを標準化します。 現時点では、
microformats.org 、
data-vocabulary.org 、および
shema.orgの 3つの辞書を知っています。 後者は、最大の検索エンジン（Google、Yahoo！Yandex、Bing）でサポートされており、たとえば同じdata-vocabulary.orgから他の多くの標準を収集するため、好ましい方法です。 各クラスは相続人を持つことができ、親のすべてのプロパティが相続人に渡されます。 すべてのクラスのリストは
ここにあります 。
Microdata DOM API
このAPIは、microdataノードでの作業を簡素化します;現在、
document.getItems([])メソッドがあります。 パラメーターなしで呼び出されると、
ネストされたマイクロデータノードでは
ないすべての要素が返されます。パラメーターとして指定することで、特定のタイプのノードを取得できます。
domElement.propertiesはPropertyNodeList型のオブジェクトを返し、
domElement.propertiesはitemprop属性を持つ要素の値を取得または変更できるようにします。 ただし、残念ながら、Microdata DOM APIはOperaでのみサポートされていますが、これも旧バージョンです。
UPD： termiは、Microdata DOM API
を実装するJS
ライブラリについて話しました。 ただし、たとえばDOMSettableTokenListを実装する別のライブラリが必要です。
必要ですか？
この質問があるかもしれません。 プロジェクトで既にmicroformatsなどを使用している場合は、さらに使用できます（ただし、検索エンジンでサポートされているという事実ではありません）。 プロジェクトにセマンティックマークアップがまだない場合は、追加することをお勧めします。
ありがとう、この記事がお役に立てば幸いです！
使用した材料：