Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
358 views
in Technique[技术] by (71.8m points)

html - HTML5 Microdata - itemref to another itemscope (Person works for Organization)

The website of an organization, say "Sun Industries", would like to add a list of employees. The address and contact information of the organization is already present at the webpage, but the list of employees would be somewhere else.

So we have

<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>

and later on in the HTML5 code we will have

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

How do we link the two objects "organization" and "employee-1" together?

I tried to add the following child to the "employee-1" object

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

but that did not work (at least not in Google's Structured Data Testing Tool).

How can I use the microdata property itemref correctly in this case?

Just to be clear, I also tried the following:

  • Add itemprop="worksFor" to the "organization" object.
  • Add itemref="organization" to the "employee" object.

So

<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>

but that gave me a Warning: Page contains property "worksfor" which is not part of the schema. for the "organization" object.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Well, actually your last code snippet looks fine. Maybe with Yandex Validator the output will be more clear

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

Couple of other working examples.

<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>

Gives the following:

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

Or this

<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>

That results in

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

Spec is not very clear about using itemref but example helps

<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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...