Mehrere getrennte Mikrodaten <div> miteinander verbinden?

11

Ich füge semantische Markups von schema.org hinzu und möchte einige davon in ganz unterschiedlichen Teilen der Webseite miteinander verknüpfen.

Dies funktioniert, wenn ich sie als Eltern / Kind spezifiziere:

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

Ich weiß jedoch nicht, wie ich sie verknüpfen soll, wenn sie durch einen Berg von HTML getrennt sind:

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

Ich denke, ich sollte "itemref" oder etwas anderes verwenden, um verwandte Bereiche zu verknüpfen, aber ich kann es nicht zum Laufen bringen. Das Betrachten ähnlicher Fragen hat in diesem Fall nicht geholfen.

UPDATE: Beachten Sie, dass ich speziell nach einer Lösung suche, die über eine Art Referenzierung funktioniert und NICHT über Verschachtelungen jeglicher Art funktioniert. Außerdem muss die Reihenfolge des zweiten (nicht funktionierenden) Beispiels gleich bleiben (Ereignis zuerst, ExerciseAction zweitens). (Es gibt mehrere Gründe dafür, die außerhalb meiner Kontrolle liegen).

Insbesondere wird "es funktioniert" als mindestens Google Rich Snippets-Tool definiert , das anzeigt , dass die Elemente miteinander verknüpft sind (wie in diesem ersten Arbeitsbeispiel).

html5 microdata

— Matija Nalis
quelle

9

Sie könnten das itemrefAttribut verwenden.

Aus der Spezifikation für Mikrodaten ( W3C Working Group Note ):

4.2 Die grundlegende Syntax :

Eigenschaften, die keine Nachkommen des Elements mit dem itemscopeAttribut sind, können dem Element mithilfe des itemrefAttributs zugeordnet werden. Dieses Attribut enthält eine Liste der IDs der zu durchsuchenden Elemente sowie das Crawlen der untergeordneten Elemente des Elements mit dem itemscopeAttribut.
5.2 Artikel:itemref :

Für Elemente mit einem itemscopeAttribut kann ein itemrefAttribut angegeben werden, um eine Liste zusätzlicher Elemente zu erstellen, die gecrawlt werden müssen, um die Name-Wert-Paare des Elements zu finden.

EDIT : Dies sollte gemäß den Anforderungen funktionieren, die in der Frage erwähnt werden:

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

BEARBEITEN 2 (pro zusätzliche Anforderung ): Wenn ein übergeordnetes Element ein anderes Element angibt (z. B. ein WebPageauf dem body), funktioniert die obige Lösung nicht, da die eventEigenschaft dann auch für das gilt WebPage, was nicht korrekt wäre.

Dafür gibt es keine saubere Lösung.

Eine hässliche Lösung wäre das Hinzufügen eines weiteren Elements (mit itemscope), jedoch ohne einen Typ (ohne itemtype) als übergeordnetes Element des Event. Auf diese Weise gilt die eventEigenschaft für dieses untypisierte Element, nicht für das 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
quelle

Könnten Sie ein Beispiel geben, das oben funktionieren würde? Ich habe es stundenlang versucht und es nicht geschafft, es zum Laufen zu bringen (Validierung zum Beispiel mit dem Google Rich Snippets Tool ). Alles, was ich tun konnte, war, mehrere andere Name-Wert-Paare einzuschließen, die in einem anderen Objektbereich dupliziert wurden und denselben Namen hatten - wie in einer ähnlichen Frage erwähnt . aber ich habe es nicht geschafft, ein anderes Itemscope aufzunehmen - was die Frage ist)

— Matija Nalis

@MatijaNalis: Ich habe das Snippet zu meiner Antwort hinzugefügt.

— Unor

Danke, das war fast genau das, wonach ich gesucht habe! In diesem vereinfachten eigenständigen HTML-Beispiel werden sie wie gewünscht miteinander verknüpft. Leider löst das Google Rich Snippets-Tool einen Fehler bei einem komplexeren Beispiel mit "Fehler: Seite enthält die Eigenschaft" Ereignis "aus, das nicht Teil des Schemas ist." (ganze Seite hat mehr übergeordnete Divs, das problematische ist zum Beispiel schema.org/Webpage )

— Matija Nalis

Irgendwelche Ideen, wie man das behebt? Das Entfernen von itemprop = "event" von schema.org/Event hilft nicht, da es dann keine Itemcopes miteinander verknüpft ...

— Matija Nalis

@MatijaNalis: Ich habe ein weiteres Snippet hinzugefügt, aber dies behebt dieses Problem wahrscheinlich nicht. Ich denke, Sie müssten das übergeordnete WebPageMarkup zerlegen und auch itemrefdort verwenden, damit es die (nicht verwandten) Elementtypen nicht als untergeordnete Elemente enthält. Sollte wohl eine andere Frage sein.

— Unor

1

Wenn ich Ihre Frage richtig verstehe, schließen Sie diese Div einfach nicht.

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

Solange das passende Tag nicht gefunden wird, wird alles, was sich in diesem anfänglichen Div befindet, immer noch als Teil dieses anfänglichen Div betrachtet, in diesem Fall als Ereignis.

— erheben gegen
quelle

Leider kann ich keine Verschachtelung jeglicher Art verwenden (in ursprünglichen, viel komplexeren Projekten befinden sie sich in ganz unterschiedlichen Untervorlagen, von denen jede eine geschlossene HTML-Struktur haben muss) oder die Reihenfolge ändern (unter anderem Gründe für die Anzeige). Ich habe die Frage aktualisiert, um dies zu klären. Beachten Sie außerdem, dass Ihre Antwort nicht validiert wird, da ExerciseAction kein untergeordnetes Ereignis sein kann (nur eine Umkehrung ist möglich) und daher kein Itemprop erforderlich ist, um sie miteinander zu verknüpfen.

— Matija Nalis

@MatijaNalis Der einzige Grund, warum es nicht validiert wurde, war, dass ich den Text kopiert habe, den Sie in Ihrer Frage angegeben haben. Der Fehler tritt auf, weil das Ereignis in der Vergangenheit, 2002-02-02, gestartet wurde. Wenn es auf ein zukünftiges Datum aktualisiert wird, funktioniert es. Ich weiß auch, dass Sie jetzt Ihre Frage aktualisiert haben, um anzuzeigen, dass Sie keinerlei Verschachtelung wünschen, sondern nur, um Sie zu informieren, solange sich der zweite Teil der Daten, die Sie für das ursprüngliche "Ereignis" eingeben, nicht im " ExerciseAction "div, es wird immer noch funktionieren. Verschieben Sie beispielsweise das "startDate" von meiner Antwort nach "ClerciseAction", und es funktioniert weiterhin.

— Riseagainst

1

@ Guisasso ist richtig, Sie schließen das Element einfach nicht. Aber in einem anderen Punkt sind Sie nicht darauf beschränkt, das Schema nur innerhalb der DIV-Elemente zu verwenden und die Bereiche zu verwenden, wie es vorschlägt (bloße Beispiele). Wenn es auf der gesamten Seite um ereignisbezogene Dinge geht und dies auf der gesamten Website geschieht, ist es möglicherweise sinnvoller, das Body-Element zu verwenden. Dies bedeutet, dass Ihre Vorlage, wenn Sie eine haben, sich automatisch mit dem Öffnen und Schließen des Schemas befasst. Auf diese Weise füllen Ihre Artikel nur diesen Inhalt, während die Vorlage ihn festlegt.

Zum Beispiel:

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

Oder Sie können es im Element MAINoder ARTICLEverwenden, wenn Sie HTML5 verwenden.

— Simon Hayter
quelle

Siehe den Kommentar zu Guisasso, Ihre Antwort funktioniert aus den gleichen Gründen nicht. Ich habe die Frage aktualisiert, um meine Bedürfnisse zu klären.

— Matija Nalis

1

Ich habe auch die Eigenschaft AdditionalType ausgeführt , die wie folgt verwendet werden kann

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

Während dies bei meinem Hauptproblem hilft (nicht in der Lage zu sein, die Beziehung zwischen ExerciseAction und Ereignis zwischen Kind und Eltern neu zu ordnen), hilft es nicht bei anderen Problemen (nicht in der Lage zu sein, diese Divs zu verschachteln), und es ist irgendwie klobig (erzeugt nicht das gleiche Semantik wie das ursprüngliche Arbeitsbeispiel). Es ist jedoch nützlich, da es das Verknüpfen von schema.org-Elementtypen ermöglicht, für die keine Elemente zum Verknüpfen vorgesehen sind, sodass Sie beispielsweise mit SportsEvent oder was auch immer verknüpfen können.

Ich antworte mir hier nur für den Fall, dass es jemand anderem mit ähnlichen Problemen hilft, da es mir nicht wirklich hilft (obwohl es vielleicht das letzte Mittel ist, wenn nichts Besseres auftaucht).

— Matija Nalis
quelle