web-dev-qa-db-fra.com

Lier plusieurs <div> microdonnées séparées?

J'ajoute des balises sémantiques schema.org et j'aimerais relier plusieurs d'entre elles, qui se trouvent dans des parties différentes de la page Web.

Cela fonctionne quand je les spécifie en tant que parent/enfant:

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

Cependant, je ne sais pas comment les relier quand ils sont séparés par une montagne de 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>

Je suppose que je devrais utiliser "itemref" ou quelque chose pour lier les portées associées, mais je ne peux pas le faire fonctionner. En regardant questions similaires n'a pas aidé dans ce cas.

UPDATE: notez que je recherche spécifiquement une solution qui fonctionne via un type de référencement et ne fonctionne PAS avec un type quelconque d'imbrication. De même, la commande du deuxième exemple (non opérationnel) doit rester la même (Event first, ExerciseAction second). (Il y a plusieurs raisons à cela hors de mon contrôle).

Plus précisément, "ça marche" est défini comme étant au moins outil google rich snippets montrant que les éléments sont liés entre eux (comme pour le premier exemple de travail)

html5microdata
9
Matija Nalis

Vous pouvez utiliser l'attribut itemref.

Dans la spécification Microdata ( Note du groupe de travail du W3C ):

  • 4.2 La syntaxe de base :

    Les propriétés qui ne sont pas des descendants de l'élément avec l'attribut itemscope peuvent être associées à l'élément à l'aide de l'attribut itemref. Cet attribut prend une liste d'identifiants d'éléments à analyser, en plus d'analyser les enfants de l'élément avec l'attribut itemscope.

  • 5.2 Items: itemref :

    Les éléments avec un attribut itemscope peuvent avoir un attribut itemref, afin de fournir une liste d'éléments supplémentaires à explorer pour rechercher les paires nom-valeur de l'élément.

EDIT: Cela devrait fonctionner selon les conditions requises mentionnées dans la 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 (par exigence supplémentaire ): Si un élément parent spécifie un autre élément (par exemple, un WebPage sur la body), la solution ci-dessus ne fonctionne pas car la propriété event s'appliquerait également à la WebPage, qui ne serait pas correcte.

Il n'y a pas de solution soignée pour cela.

Un correctif laid ajouterait un autre élément (avec itemscope) mais sans aucun type (sans itemtype) en tant que parent du Event. De cette manière, la propriété event s'appliquera à cet élément non typé, pas à 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>
7
unor

Si je comprends bien votre question, ne fermez pas cette 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>

Tant que la balise correspondante n'est pas trouvée, tout ce qui est à l'intérieur de cette div initiale sera toujours considéré comme faisant partie de cette div initiale, dans ce cas, un événement.

1
riseagainst

@Guisasso a raison de ne pas fermer l'élément. Mais sur une autre note, vous n'êtes pas obligé d'utiliser un schéma uniquement dans les éléments DIV et d'utiliser les étendues comme il le suggère (exemples). Si la page entière concerne des éléments liés à l'événement et que cela se trouve sur le site, il serait peut-être plus judicieux d'utiliser l'élément body, qui signifie votre modèle si vous en avez un qui traite automatiquement l'ouverture et la fermeture du schéma. De cette façon, vos articles ne font que remplir ce contenu pendant que le modèle le définit.

Par exemple:

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

Vous pouvez également l'utiliser dans l'élément MAIN ou ARTICLE si vous utilisez HTML5.

1
Simon Hayter

J'ai également exécuté la propriété additionalType , qui pourrait être utilisée comme suit

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

bien que cela aide avec mon problème principal (ne pas pouvoir réorganiser la relation enfant-parent dans ExerciseAction/Event), cela n’aide en rien un autre problème (ne pas pouvoir imbriquer ces divs), et c’est une sorte de kludgy (ne produit pas la même sémantique que l'exemple de travail d'origine). Cependant, il est utile car il permet de lier des types d’item schema.org qui n’ont pas d’éléments destinés à être liés, vous pouvez donc lier par exemple Book à SportsEvent ou autre.

Je réponds ici au cas où cela aiderait quelqu'un d'autre avec un problème similaire, car cela ne m'aiderait pas vraiment (bien que cela puisse être une solution de dernier recours si rien de mieux ne se présente)

1
Matija Nalis