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

Asked 19/6, 2013 at 8:9 Answered 1/2, 2018 at 22:35

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.

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

Frederiksberg answered 19/6, 2013 at 8:9 Comment(0)

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>

Vitiate answered 21/6, 2013 at 7:40 Comment(1)

I think your answer may become very useful for a lot of people because a lack of documentation out there on this. You are talking about a "parent-child" relationship. Could you please expand your answer to include "parent-children" (a one-to-many relationship)? I am trying to link many related products to their parent product using schema.org/Product property isRelatedTo but I'm sure organization->employees would work fine too. – Solidstate 5/12, 2013 at 3:11

Your last example is correct.
(Google’s testing tool no longer gives the mentioned error. Back then they were probably not up to date with new additions to the Schema.org vocabulary.)

Specification

Links to the itemref specifications:

tl;dr:

You specify itemref on the element (with itemscope) to which you want to add properties.
You specify id on the element (with itemprop) which you want to add.

Examples

A minimal example:

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

This is equivalent to:

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

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

</div>

Other examples:

To keep in mind

The itemref attribute can only be used for elements in the same document.
You can reference multiple elements from one itemref attribute (separate the ID tokens with space characters).
The referenced element may be a container for multiple properties.
You have to make sure that the referenced elements are not children of an element with itemscope, otherwise their properties will also be added to this item (but you can circumvent this by adding a dummy itemscope).

Duckpin answered 29/11, 2015 at 15:24 Comment(0)

There are 2 ways to links schema data together.

itemid: Link 2 complete objects (ie Organisation & Person)
itemref: Link 1 complete object to 1 incomplete object (ie Article & Comments)

1st one is easy. All you do is add the itemid property onto item you wish to link and add a link on other item:

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

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

Second one is not so easy. What if the comments for your blog post are somewhere far away. How do you connect them to your blog post? You can create an empty item with an id and then connect it to your blog post like so:

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

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

We don't need to give comments an itemType. All we need is to add itemscope. This way we get no validation errors. Now we can link the comments back to blog post like so:

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

Tada! We even managed to import wordCount as well.

Frontward answered 1/2, 2018 at 22:35 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++