web-dev-qa-db-ja.com

HTML5 Microdata-別のitemscopeへのitemref（個人は組織で働いています）

「SunIndustries」などの組織のWebサイトで、従業員のリストを追加したいと考えています。組織の住所と連絡先情報はすでにWebページにありますが、従業員のリストは別の場所にあります。

だから私たちは持っています

<div id="organization" itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Sun Industries</span>,
  <span itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">Technologies Street 42</span>,
      <span itemprop="addressLocality">Venustown</span>
      <span itemprop="postalCode">98765</span>
    </span>
  </span>
</div>

後でHTML5コードで

<div id="employee-1" itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">John Doe</span>,
  <span itemprop="jobTitle">Sales Manager</span>
</div>

2つのオブジェクト「organization」と「employee-1」をどのようにリンクしますか？

次の子を「employee-1」オブジェクトに追加しようとしました

<meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" itemref="organization">

しかし、それは機能しませんでした（少なくともGoogleの構造化データテストツールでは機能しませんでした）。

この場合、microdataプロパティitemrefを正しく使用するにはどうすればよいですか？

明確にするために、私は次のことも試しました。

  • 「組織」オブジェクトにitemprop="worksFor"を追加します。
  • 「employee」オブジェクトにitemref="organization"を追加します。

そう

<div id="organization" itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Sun Industries</span>,
  ...
</div>
...
<div id="employee-1" itemscope itemtype="http://schema.org/Person" itemref="organization">
  <span itemprop="name">John Doe</span>,
  <span itemprop="jobTitle">Sales Manager</span>
</div>

しかし、それは私に「組織」オブジェクトのWarning: Page contains property "worksfor" which is not part of the schema.を与えました。

htmlreferencemicrodata
20
Meteor

実際、最後のコードスニペットは問題ないように見えます。たぶん Yandex Validator 出力はより明確になります

person
  itemType = http://schema.org/Person
  worksfor
    organization
      itemType = http://schema.org/Organization
      name = Sun Industries
  name = John Doe
  jobtitle = Sales Manager

他のいくつかの実用的な例。

<body>
  <div id="organization" itemscope itemtype="http://schema.org/Organization" itemref="employee-1">
    <span itemprop="name">Sun Industries</span>,
    <span itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Technologies Street 42</span>,
        <span itemprop="addressLocality">Venustown</span>
        <span itemprop="postalCode">98765</span>
      </span>
    </span>
  </div>
  <div id="employee-1" itemprop="employee" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>,
    <span itemprop="jobTitle">Sales Manager</span>
  </div>
</body>

次のようになります。

organization
  itemType = http://schema.org/Organization
  employee
    person
      itemType = http://schema.org/Person
      name = John Doe
      jobtitle = Sales Manager
  name = Sun Industries
  location
    place
      itemType = http://schema.org/Place
      address
        postaladdress
          itemType = http://schema.org/PostalAddress
          streetaddress = Technologies Street 42
          addresslocality = Venustown
          postalcode = 98765

またはこれ

<body>
  <div id="employee-1" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>,
    <span itemprop="jobTitle">Sales Manager</span>
    <meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization"  itemref="organization">
  </div>
  <div id="organization">
    <span itemprop="name">Sun Industries</span>,
    <span itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">Technologies Street 42</span>,
        <span itemprop="addressLocality">Venustown</span>
        <span itemprop="postalCode">98765</span>
      </span>
    </span>
  </div>
</body>

その結果、

person
  itemType = http://schema.org/Person
  name = John Doe
  jobtitle = Sales Manager
  worksfor
    organization
    itemType = http://schema.org/Organization
    name = Sun Industries
    location
      place      
        itemType = http://schema.org/Place
        address
          postaladdress
            itemType = http://schema.org/PostalAddress
            streetaddress = Technologies Street 42
            addresslocality = Venustown
            postalcode = 98765

仕様はitemrefの使用についてあまり明確ではありませんが、例は役に立ちます

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
 <p>Band: <span itemprop="name">Jazz Band</span></p>
 <p>Size: <span itemprop="size">12</span> players</p>
</div>
27
ajax

あなたの最後の例は正しいです。
（Googleのテストツールで上記のエラーが発生しなくなりました。当時は、Schema.orgの語彙に新たに追加された最新のものではなかった可能性があります。）

仕様

itemref仕様へのリンク：

tl; dr：

  1. プロパティを追加する要素（itemrefを使用）にitemscopeを指定します。
  2. 追加する要素に（idを使用して）itempropを指定します。

例

最小限の例：

<div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" id="org">
  <!-- this property (worksFor) gets added to the Person item below -->
</div>

<div itemscope itemtype="http://schema.org/Person" itemref="org">
  <!-- looks for the element with the ID "org" -->
</div>

これは次と同等です。

<div itemscope itemtype="http://schema.org/Person">

  <div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
  </div>

</div>

その他の例：

心に留めておくべき

  • itemref属性は、同じドキュメント内の要素にのみ使用できます。

  • 1つのitemref属性から複数の要素を参照できます（IDトークンをスペース文字で区切ります）。

  • 参照される要素は、複数のプロパティのコンテナである可能性があります。

  • 参照される要素がitemscopeを持つ要素の子ではないことを確認する必要があります。そうでない場合、それらのプロパティはalsoこのアイテムに追加されます（ただし、これを回避するには ダミーのitemscope を追加します）。

6
unor

スキーマデータをリンクする方法は2つあります。

  1. itemid：2つの完全なオブジェクト（つまり、組織と個人）をリンクします
  2. itemref：1つの完全なオブジェクトを1つの不完全なオブジェクトにリンクします（つまり、記事とコメント）

1つ目は簡単です。リンクするアイテムにitemidプロパティを追加し、他のアイテムにlinkを追加するだけです。

<div itemid='#org' itemscope itemType='http://schema.org/Organization'>
    <!-- ..... -->
</div>

<article itemscope itemType='http://schema.org/Article'>
    <link itemprop='publisher' href='#org'>
</article>

2つ目はそれほど簡単ではありません。あなたのブログ投稿へのコメントがどこか遠くにあるとしたらどうでしょう。それらをブログ投稿にどのように接続しますか？ IDを使用して空のアイテムを作成し、次のようにブログ投稿に接続できます。

<div id="comments" itemscope>
    <span itemprop="commentCount">0</span>
</div>

<div id="words" itemscope>
    <span itemprop="wordCount">0</span>
</div>

コメントにitemTypeを付ける必要はありません。必要なのはitemscopeを追加することだけです。このようにして、検証エラーは発生しません。これで、コメントを次のようにブログ投稿にリンクできます。

<div itemscope itemtype="http://schema.org/BlogPosting" itemref="comments words">
    <!-- .... -->
</div>

多田！ wordCountもインポートできました。

0
Walter