12

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)

Improve this question

4 Answers 4

Reset to default
9

You could use the itemref attribute.

From the Microdata (W3C Working Group Note) spec:

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

<!-- zillion other HTML stuff -->

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

EDIT 2 (per additional requirement): If a parent element specifies another item (e.g., a WebPage on the body), the above solution does not work because then the event property would also apply to the WebPage, which would not be correct.

There is no neat solution for this.

An ugly fix would be adding another item (with itemscope) but without any type (without itemtype) as parent of the Event. That way, the event property will apply to this untyped item, not the WebPage.

<body itemscope itemtype="http://schema.org/WebPage">

  <div itemscope> <!-- dummy item -->
    <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>
  </div>

  <!-- zillion other HTML stuff -->

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

</body>
Improve this answer
8
  • 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, 2013 at 17:05
  • @MatijaNalis: I’ve added the snippet to my answer.
    – unor
    Sep 3, 2013 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, 2013 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, 2013 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, 2013 at 7:48
1

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.

Improve this answer
2
  • 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, 2013 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.
    – riseagainst
    Sep 24, 2013 at 11:14
1

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

Improve this answer
1
  • 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, 2013 at 17:29
1

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)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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