Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm adding schema.org semantic markups, and would like to link several of which are in quite different parts of webpage together.

This works when I specify them as parent/child:

<div itemscope itemtype="http://schema.org/ExerciseAction">
  <span itemprop="distance">11 km</span>
  <div itemprop="event" itemscope itemtype="http://schema.org/Event">
      <span itemprop="name">first event</span>
      <span itemprop="startDate">2001-01-01</span>
  </div>
</div>

However, I don't know how to link them when they're separated by mountain of HTML:

<div itemscope itemtype="http://schema.org/Event">
      <span itemprop="name">some event</span>
      <span itemprop="startDate">2002-02-02</span>
</div>

<!-- 
   ....
   zillion other HTML stuff
   ...
 -->

<div itemscope itemtype="http://schema.org/ExerciseAction">
      <span itemprop="distance">22 km</span>
</div>

I guess I should use "itemref" or something to link related scopes, but I can't get it to work. Looking at similar questions did't help in this case.

UPDATE: note that I'm specifically looking for solution that works via some kind of referencing and DOES NOT not work via nesting of any type. Also, ordering of second (non-working) example must stay the same (Event first, ExerciseAction second). (There are several reasons for that outside of my control).

Specifically, "it works" is defined as at least google rich snippets tool showing that the items ARE linked together (as it does for that first working example)

share|improve this question
add comment

4 Answers

up vote 6 down vote accepted

You could use the itemref attribute.

From the Microdata specification (Working Draft):

4.2 The basic syntax:

Properties that are not descendants of the element with the itemscope attribute can be associated with the item using the itemref attribute. This attribute takes a list of IDs of elements to crawl in addition to crawling the children of the element with the itemscope attribute.

5.2 Items: itemref:

Elements with an itemscope attribute may have an itemref attribute specified, to give a list of additional elements to crawl to find the name-value pairs of the item.


EDIT: This should work according to the requirements that are mentioned in the question:

<div itemprop="event" itemscope itemtype="http://schema.org/Event" id="event001">
    <span itemprop="name">first event</span>
    <span itemprop="startDate">2001-01-01</span>
</div>

<p>Foo bar.</p>

<div itemscope itemtype="http://schema.org/ExerciseAction" itemref="event001">
    <span itemprop="distance" id="entfernung">11 km</span>
</div>

EDIT2: This is a (unsatisfying) try for the additional requirement mentionend in the comments (conflict with itemprop when there is an unrelated item type as parent, e.g. WebPage):

<div id="event001">
    <span itemprop="name">first event</span>
    <span itemprop="startDate">2001-01-01</span>
</div>

<p>Foo bar.</p>

<div itemscope itemtype="http://schema.org/ExerciseAction">
    <span itemprop="distance" id="entfernung">11 km</span>
    <meta itemref="event001" itemprop="event" itemscope itemtype="http://schema.org/Event" />
</div>

Here itemprop="event" itemscope itemtype="http://schema.org/Event" is removed from the Event snippet. But this doesn’t help much as now the inner itemprop values will be a problem. I didn’t manage to keep the itemscope on the Event snippet and still get the link to the ExerciseAction snippet. I‘m not 100% sure, but I guess that this is not possible.

share|improve this answer
    
Could you give an example that would work given above ? I've tried for hours and didn't manage to get it to work (validating it on for example google rich snippets tool). All I could do is make it include several other name=value pairs which were duplicated in another itemscope and had a same name - as mentioned in similar question; but I didn't manage to include another itemscope -- which is the question) –  Matija Nalis Sep 3 '13 at 17:05
    
@MatijaNalis: I’ve added the snippet to my answer. –  unor Sep 3 '13 at 17:43
    
Thanks, that was almost exactly what I was looking for! It does link them together as wanted in that simplified standalone HTML example. Unfortunately, google rich snippets tool throws an error at more complex example with "Error: Page contains property "event" which is not part of the schema." (whole page has more parent divs, the problematic one being for example schema.org/Webpage) –  Matija Nalis Sep 3 '13 at 19:42
    
Any ideas how to fix that? Removing itemprop="event" from schema.org/Event does not help, as it doesn't link itemscopes together then... –  Matija Nalis Sep 3 '13 at 19:50
    
@MatijaNalis: I added another snippet, but this probably doesn’t fix this problem. I guess you would have to take apart the parent WebPage markup and use itemref there, too, so that it doesn’t include the (unrelated) item types as childs. Should probably be another question. –  unor Sep 4 '13 at 7:48
show 3 more comments

If I understand your question correctly, just don't close that div.

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">some event</span>
  <span itemprop="startDate">2002-02-02</span>


<!-- ....zillion other HTML stuff... -->

    <div itemscope itemtype="http://schema.org/ExerciseAction">
      <span itemprop="distance">22 km</span>
    </div>
</div>

As long as the matching tag is not found, whatever is inside that initial div will still be considered part of that initial div, in that case, an Event.

share|improve this answer
    
Unfortunately, I cannot use nesting of any kind (in original, much more complex project, they're in quite different sub-templates of which each one must be closed HTML structure), nor change the ordering (display reasons among other things). I've updated the question to clarify that. Also, note that your answer won't validate since ExerciseAction cannot be child od Event (only reverse is possible), and so it doesn't have itemprop required to link them together. –  Matija Nalis Sep 3 '13 at 17:27
    
@MatijaNalis The only reason it didn't validate was because I copied the text you supplied in your question. The error happens because the event is set to start in the past, 2002-02-02. When updated to a future date, it works. Also, I know you have now updated your question displaying that you don't want nesting of any kind, but just to let you know, as long as the second part of data you enter for the original "Event" is not inside the "ExerciseAction" div, it will still work. For example, move the "startDate" from my answer to after the "ExerciseAction" closing div, and it will still work. –  guisasso Sep 24 '13 at 11:14
add comment

@Guisasso is correct you just don't close the element. But on another note your not restricted to using schema just within the DIV elements and using the spans as it suggests (mere examples). If the whole page is about event related stuff and this is across the site then it might make more sense to use the body element which means your template if you have one automatically deals with opening the schema and closing. This way your articles just fill that content while the template sets it.

For example:

<body itemscope itemtype="http://schema.org/Event">
   <article>
       <h1 itemprop="name">Some Event</h1>
       <span itemprop="startDate">2002-02-02</span>
       <p itemprop="description">I am the super awesome event infromation</p>
       <div itemscope itemtype="http://schema.org/ExerciseAction">
           <span itemprop="distance">22 km</span>
       </div>
   </article>
</body>

Or you could use it in the MAIN or ARTICLE element if you are using HTML5.

share|improve this answer
    
see the comment to Guisasso, your answer doesn't work for much the same reasons. I've updated the question to clarify my needs. –  Matija Nalis Sep 3 '13 at 17:29
add comment

I've also run to additionalType property, which could be used as follows

<div itemscope itemtype="http://schema.org/Event">
      <span itemprop="name">some event</span>
      <span itemprop="startDate">2002-02-02</span>


<!-- 
   ....
   zillion other HTML stuff
   ...
 -->

  <div itemprop="additionalType" itemscope itemtype="http://schema.org/ExerciseAction">
      <span itemprop="distance">22 km</span>
  </div>
</div>

while that helps with my primary issue (not being able to reorder ExerciseAction/Event child-parent relationship), it does not help with other issue (not being able to nest those divs), and it is kind of kludgy (does not produce the same semantic as original working example). However, it is useful as it allows linking of schema.org itemtypes which do not have intended elements for linking, so you could link for example Book to SportsEvent or whatever.

I'm answering myself here just in case it helps someone else with similar problem, as it doesn't really help me (although it might be last-ditch resort if nothing better comes up)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.