Relier plusieurs <div> s de microdonnées séparées?

11

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

Cela fonctionne lorsque 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 lier lorsqu'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 des étendues connexes, mais je ne peux pas le faire fonctionner. Regarder des questions similaires n'a pas aidé dans ce cas.

MISE À JOUR: notez que je recherche spécifiquement une solution qui fonctionne via une sorte de référencement et ne fonctionne PAS via l'imbrication de tout type. De plus, l'ordre du deuxième exemple (non fonctionnel) doit rester le même (événement en premier, exercice en second). (Il y a plusieurs raisons à cela hors de mon contrôle).

Plus précisément, "cela fonctionne" est défini comme au moins un outil d'extraits enrichis de Google montrant que les éléments SONT liés entre eux (comme c'est le cas pour ce premier exemple de travail)

html5 microdata Matija Nalis
la source

Réponses:

9

Vous pouvez utiliser l' itemrefattribut.

D'après les microdonnées ( 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' itemscopeattribut peuvent être associées à l'élément à l'aide de l' itemrefattribut. Cet attribut prend une liste d'ID d'éléments à analyser en plus d'analyser les enfants de l'élément avec l' itemscopeattribut.

  • 5.2 Élémentsitemref ::

    Les éléments avec un itemscopeattribut peuvent avoir un itemrefattribut spécifié, pour donner une liste d'éléments supplémentaires à explorer pour trouver les paires nom-valeur de l'élément.

EDIT : Cela devrait fonctionner selon les exigences 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 WebPagesur le body), la solution ci-dessus ne fonctionne pas car la eventpropriété s'appliquerait également au WebPage, ce qui ne serait pas correct.

Il n'y a pas de solution intéressante pour cela.

Une mauvaise solution serait d'ajouter un autre élément (avec itemscope) mais sans aucun type (sans itemtype) en tant que parent du Event. De cette façon, la eventpropriété s'appliquera à cet élément non typé, pas au 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>
unor
la source
Pourriez-vous donner un exemple qui fonctionnerait donné ci-dessus? J'ai essayé pendant des heures et je n'ai pas réussi à le faire fonctionner (en le validant par exemple sur l' outil google rich snippets ). Tout ce que je pouvais faire était de le faire inclure plusieurs autres paires nom = valeur qui étaient dupliquées dans un autre itemscope et avaient le même nom - comme mentionné dans une question similaire ; mais je n'ai pas réussi à inclure un autre itemscope - c'est la question)
Matija Nalis
@MatijaNalis: J'ai ajouté l'extrait de code à ma réponse.
unor
Merci, c'était presque exactement ce que je cherchais! Il les relie ensemble comme souhaité dans cet exemple HTML autonome simplifié. Malheureusement, l' outil d'extraits enrichis de Google renvoie une erreur dans un exemple plus complexe avec "Erreur: la page contient la propriété" événement "qui ne fait pas partie du schéma." (toute la page a plus de divisions parentales, la problématique étant par exemple schema.org/Webpage )
Matija Nalis
Des idées pour réparer celà? Supprimer itemprop = "event" de schema.org/Event n'aide pas, car il ne relie pas les itemscopes ensemble alors ...
Matija Nalis
@MatijaNalis: J'ai ajouté un autre extrait, mais cela ne résout probablement pas ce problème. Je suppose que vous devrez démonter le WebPagebalisage parent et l'utiliser itemreflà aussi, afin qu'il n'inclue pas les types d'éléments (non liés) en tant qu'enfants. Cela devrait probablement être une autre question.
unor
1

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 se trouve à l'intérieur de cette division initiale sera toujours considéré comme faisant partie de cette division initiale, dans ce cas, un événement.

S'élever contre
la source
Malheureusement, je ne peux pas utiliser d'imbrication d'aucune sorte (dans un projet original, beaucoup plus complexe, ils sont dans des sous-modèles assez différents dont chacun doit être une structure HTML fermée), ni changer l'ordre (afficher les raisons, entre autres). J'ai mis à jour la question pour clarifier cela. Notez également que votre réponse ne sera pas validée, car ExerciseAction ne peut pas être un événement enfant (seul l'inverse est possible), et il n'est donc pas nécessaire de disposer de l'élément prop pour les lier ensemble.
Matija Nalis
@MatijaNalis La seule raison pour laquelle il n'a pas été validé est que j'ai copié le texte que vous avez fourni dans votre question. L'erreur se produit car l'événement est configuré pour démarrer dans le passé, 2002-02-02. Lorsqu'il est mis à jour à une date future, cela fonctionne. De plus, je sais que vous avez maintenant mis à jour votre question en indiquant que vous ne voulez pas d'imbrication d'aucune sorte, mais juste pour vous le faire savoir, tant que la deuxième partie des données que vous entrez pour l '"événement" d'origine ne se trouve pas dans le " ExerciseAction "div, cela fonctionnera toujours. Par exemple, déplacez le "startDate" de ma réponse après le div de fermeture "ExerciseAction", et cela fonctionnera toujours.
contre le
1

@Guisasso est correct, vous ne fermez tout simplement pas l'élément. Mais sur une autre note, vous n'êtes pas limité à utiliser le schéma uniquement dans les éléments DIV et à utiliser les étendues comme il le suggère (de simples exemples). Si la page entière concerne des éléments liés aux événements et que cela se trouve sur le site, il peut être plus judicieux d'utiliser l'élément body, ce qui signifie que votre modèle, si vous en avez un, traite automatiquement de l'ouverture et de la fermeture du schéma. De cette façon, vos articles remplissent simplement 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>

Ou vous pouvez l'utiliser dans l' élément MAINor ARTICLEsi vous utilisez HTML5.

Simon Hayter
la source
voir le commentaire à Guisasso, votre réponse ne fonctionne pas pour les mêmes raisons. J'ai mis à jour la question pour clarifier mes besoins.
Matija Nalis
1

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 ExerciseAction / Event), cela n'aide pas avec un autre problème (ne pas pouvoir imbriquer ces divs), et c'est une sorte de kludgy (ne produit pas le même sémantique que l'exemple de travail d'origine). Cependant, il est utile car il permet de lier des types d'élément schema.org qui n'ont pas d'éléments destinés à la liaison, vous pouvez donc lier par exemple Book à SportsEvent ou autre.

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

Matija Nalis
la source