マイクロマークアップ構文の複雑で矛盾した世界。 なぜそんなに多くの標準があるのですか？ Yandexの経験

今日、セマンティックマークアップに関するストーリーの続きとして、その構文についてお話したいと思います。 なぜそうであり、違いはないのかは、多くの場合、歴史的な理由によって決まります。 したがって、ここではすべてを体系化して説明しようとしました。



最初に、何かがあることを誰もが理解できるようにするためのいくつかの言葉。 全体としてのマイクロマークアップ（またはセマンティックマークアップ）とは、ページに書かれていることを検索ロボットに示すタグ内の追加のタグと属性を持つページレイアウトを意味します。



辞書は一種の「言語」であり、クラスとそのプロパティのセットであり、その助けを借りてページ上のコンテンツの本質が示されます。 以前の記事でそれらについて書いた。 構文は辞書を使用する方法です。 Webページなどで、どのタグでエンティティとそのプロパティがどのように示されるかを決定します。



辞書など、いくつかの構文標準があります。 この記事では、実用的な例を使用して最も一般的なものを分析します。

• Microdata-Microdata（Schema.org辞書はこの構文で最もよく見られます）;
• Microformats.org-Microformats（これは統一された構文と辞書の標準であることを思い出してください）;
• RDFaおよびRDFa Lite（簡易形式では、RDFaはOpen Graph辞書の作成者によって推奨されています。他の辞書、たとえばDublin Core辞書やData Vocabularyでも見られます）。
• JSON-LDはJSON拡張機能です。

1つの問題を解決するために多くの異なる標準が開発された理由を理解するために、構文開発の歴史に目を向けます。



むかしむかし 2004年、 W3C開発者は、「世界のすべてを表現する」のに適した標準を作成しました。 これが、RDFa（属性のリソース記述フレームワーク）構文の表示方法です。これにより、セマンティックデータを含むHTMLマークアップをRDFに一意に変換できます。





約1年後、数人の愛好家が既存のHTML要素を使用する「単純な」標準を考案することを決定しました。 そして、彼らはよく知られているマイクロフォーマットを思いつきました。

（以下、この絵の代わりにアスタリスクが表示されます-それはあまりにも頻繁に起こっていることの本質を反映しています）

その少し後に、Googleの従業員でありW3CのメンバーであったIan“ Hixie” Hicksonは、HTML5の代替バージョンを作成し、独自の構文を作成することにしました。 Microdataが登場しました-シンプルですが、RDF標準と互換性がありません。 W3Cコミュニティはこのイニシアチブにあいまいに反応し、その結果、HixieはW3Cを去り、代替WHATWGコミュニティも設立しました。 *



Microdataは、Schema.org辞書の使用を推奨する最初の構文でした。 W3Cで、RDFaではなくMicrodataの問題について疑問が生じたとき、Schema.org Ramanathan V. Guhaの創設者の1人、またはGuha（Googleの従業員、さらにはGoogleフェローでもある）が次のような手紙を返信しました。その使用の90％のケースでミスが行われています。」 この手紙に応えて、RDFa開発者はすぐにRDFa liteをリリースしました-構文はMicrodataほど複雑ではなく、RDFと互換性があり、RDFaに拡張可能です。



そして後に、RDFaの作成者の1人であるManu Spornyは 、JSONに大量のデータがあるプロジェクトに取り組んでいたときに、JSONからRDFに構造化情報を転送する必要に直面しました。 彼と彼の同僚は、RDFa for JSONのようなものを考え出す必要があることに気付きました。



そして、 長い苦労の結果、JSON-LD（リンクデータのJavaScriptオブジェクト表記）構文がリリースされました。これは、初期タスクを解決するだけでなく、リンクデータの配布のアイデアも実現しました。 構文はセマンティクスの世界に登場しました。これは、他の人とは異なり、タグで実装するために開発されました

      API. 
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      ,           .          (  ).       ,       . 
      

        
        
        
      

     
      

        
        
        
      

     1. Microdata () 
      

        
        
        
      

        —   itemscope, itemtype  itemprop,      . 
      

        
        
        
      

     ,        Schema.org: 
      

        
        
        
      

     
      

        
        
        
      

     <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      API. 
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      ,           .          (  ).       ,       . 
      

        
        
        
      

     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     1. Microdata () 
      

        
        
        
      

        —   itemscope, itemtype  itemprop,      . 
      

        
        
        
      

     ,        Schema.org: 
      

        
        
        
      

     
      

        
        
        
      

     <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      API. 
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

      ,           .          (  ).       ,       . 
      

        
        
        
      

     
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     1. Microdata () 
      

        
        
        
      

        —   itemscope, itemtype  itemprop,      . 
      

        
        
        
      

     ,        Schema.org: 
      

        
        
        
      

     
      

        
        
        
      

     <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• itemscopeは、パーサーにHTMLブロック...
  
  
  
  にオブジェクトに関するデータが含まれていることを伝えます。 多くの場合、itemscope artibootの値を指定する必要があるかどうかを指定します。HTML5仕様に従って、論理属性の値を指定する必要はなく、属性名を指定するだけです。
• itemtypeは、 schema.org / Personリンクを使用して、特定のタイプのオブジェクトを指します。
• itempropは、このオブジェクトのプロパティを指します。

この例では、link itempropを使用して、オブジェクトは非表示のリンクを使用して記述されています。



このページでは、複数のエンティティを同じタイプ（itemtype）でマークアップでき、同じエンティティ内に複数の同一フィールド（itemprop）を含めることができます。 特定の消費者（たとえば、特定のYandexアフィリエイトプログラム ）のマークアップを作成すると、追加の条件が発生する場合があります。 そのため、創造的な仕事のためのアフィリエイトプログラムでは、私たちに合った複数の種類のトップレベルがあるページの特別なスニペットは作成しません。



作業中に遭遇したmicrodataの別の機能があります。これは、頻繁に突然変更される仕様です。 このドキュメントの歴史によれば、少なくとも年に一度、または年に数回更新されたことが追跡できます。



通常、すべてのイニシアチブグループは、ユーザーに表示されるコンテンツをマークアップすることを推奨しています。 ただし、場合によっては、サイトが人間が読めるテキストを表示し、パーサーが機械が読める形式でデータを受け取るように、データを記述する必要があります。 この場合、データを非表示にする必要があります。そのためには、メタタグを使用できます。

 <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">  Iphone</span> <span itemprop="price">700 </span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" />   <span itemprop="ratingCount">25</span>   </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

microdata構文でネストされたエンティティを記述できます

 <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span>, <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality"></span>, <span itemprop="addressCountry"></span>, </span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、「address」プロパティもエンティティであり、独自のプロパティ「addressLocality」と「addressCountry」を持っています。



Microdataは、実装の可用性、提供された機能、Schema.org標準の一部により、ますます人気が高まっています。 また、 YandexやGoogleなどの検索エンジンによってSchema.org辞書とともに推奨されます 。



便利なリンク：

W3Cのmicrodataの説明 。

HTML5に関するMicrodataブログ記事 。

WHATWGのドキュメント 。

2. Microformats.org（Microformats）

私たちが書いたように、マイクロフォーマットは、セマンティックマークアップの簡単な標準を作りたいと考え、これに基本的なHTML要素を使用したW3Cファンのイニシアチブです。 最も古いものの1つであるMicroformats.org標準は、2005年に開始されました。



microformatsの特性は、 ) c class, rel, rev title . .



, class="adr" , :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".













タグ（通常 ) c class, rel, rev title . .



, class="adr" , :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".













使用 ) c class, rel, rev title . .



, class="adr" , :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".













) c class, rel, rev title . .



, class="adr"



, :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".







  ) c  class, rel, rev  title    .               . 
      

        
        
        
      

     
      

        
        
        
      

     ,  class="adr"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      ,      : 
      

        
        
        
      

     
      

        
        
        
      

     <div class="adr"> , .  , 16 </div> 
      

        
        
        
      

        HTML-    class,      ,  . 
      

        
        
        
      

     
      

        
        
        
      

       HTML-,   hCard (       ,    — ). 
      

        
        
        
      

     
      

        
        
        
      

     <div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">-  </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9  1934</span> </div> <span class="note">   </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        class="vcard"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,  HTML-    ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

         ,  , , ,  ,    ;   ,   ,   class    ,  ; 
      

        
        
        
      

      ""   : "", "", "", " ". 
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

) c class, rel, rev title . .



, class="adr"



, :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".







  ) c  class, rel, rev  title    .               . 
      

        
        
        
      

     
      

        
        
        
      

     ,  class="adr"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      ,      : 
      

        
        
        
      

     
      

        
        
        
      

     <div class="adr"> , .  , 16 </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        HTML-    class,      ,  . 
      

        
        
        
      

     
      

        
        
        
      

       HTML-,   hCard (       ,    — ). 
      

        
        
        
      

     
      

        
        
        
      

     <div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">-  </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9  1934</span> </div> <span class="note">   </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        class="vcard"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,  HTML-    ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

         ,  , , ,  ,    ;   ,   ,   class    ,  ; 
      

        
        
        
      

      ""   : "", "", "", " ". 
      

        
        
        
      

    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

) c class, rel, rev title . .



, class="adr"



, :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".







• ) c class, rel, rev title . .



, class="adr"



, :



<div class="adr"> , . , 16 </div>





HTML- class, , .



HTML-, hCard ( , — ).



<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>





class="vcard"



, HTML- ;





, , , , , ; , , class , ;

"" : "", "", "", " ".