Mobile app version of vmapp.org
Login or Join
Sent6035632

: Linking several separated Microdata s together? 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

@Sent6035632

Posted in: #Html5 #Microdata

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)

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Sent6035632

4 Comments

Sorted by latest first Latest Oldest Best

 

@Deb1703797

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)

10% popularity Vote Up Vote Down


 

@Ogunnowo487

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>

10% popularity Vote Up Vote Down


 

@Nimeshi995

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

10% popularity Vote Up Vote Down


 

@Looi9037786

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme