Menu
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>
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).
itemref correctly in this case?Just to be clear, I also tried the following:
itemprop="worksFor" to the "organization" object.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.
835
Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users.
Microdata lets you define your own customized elements and start embedding custom properties in your web pages. At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.
Microdata is a type of specification language that is embedded within HTML content to improve machine readability, annotate elements and analyze web pages. This type of markup language assigns labels to identify individual pieces of content, allowing search engines to highlight or emphasize more relevant information.
Microdata is a specification to embed machine-readable data in HTML documents. Microdata consists of name-value pairs (known as items ) defined according to a vocabulary. A collection of commonly used markup vocabularies are provided by schema.org.
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> 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.)
Links to the itemref specifications:
itemrefitemreftl;dr:
itemref on the element (with itemscope) to which you want to add properties.id on the element (with itemprop) which you want to add.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:
meta elements from the headbody element to elements that are children of that bodyEvent to an Actionname property from a child item to the parent itemOffer item to the parent Product item instead of the Offerbreadcrumb to WebPageHotel as a branchOf an OrganizationProductProduct to an OfferEvent items: either via superEvent or via subEventThe 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).
40
There are 2 ways to links schema data together.
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
