Microdataについて少し

良い一日! この記事では、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.orgdata-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などを使用している場合は、さらに使用できます(ただし、検索エンジンでサポートされているという事実ではありません)。 プロジェクトにセマンティックマークアップがまだない場合は、追加することをお勧めします。



ありがとう、この記事がお役に立てば幸いです!



使用した材料:





All Articles