Warum ist mein itemprop = 'image'-Markup falsch?

Ich habe mit Mikrodaten experimentiert und dachte, ich würde es in meinem Blog versuchen. Es stellt sich heraus, dass die Vorlage, die ich verwendet habe, bereits ein Markup hinzugefügt hat. Es war nicht großartig und so habe ich repariert, was ich konnte.

Um mein Glück zu versuchen, habe ich meinem letzten Beitrag mehr Markup hinzugefügt, aber das Structured Data Testing Tool (SDTT) von Google ist mit den itemprop='image'Attributen nicht zufrieden und ich bin mir nicht sicher, warum.

Ergebnisseite .

Nach meinem Verständnis habe ich die Daten so strukturiert, dass ich den gesamten Code dazwischen ignoriere:

<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>
    <a href="2.png" itemprop="url"><img itemprop="image sharedContent" src="2.png" /></a>
    <a href="3.png" itemprop="url"><img itemprop="image sharedContent" src="3.png" /></a>
  </div>
</div>

Und das sieht für mich richtig aus. BlogPostingkann die Eigenschaften haben articleBodyund imagelaut https://schema.org/BlogPosting , aber gemäß SDTT:

Das Attribut itemtype hat einen ungültigen Wert.

In der Tat habe ich gerade das SDTT mit dem obigen Beispielcode ausprobiert und es kann nicht validiert werden.

Mir fehlt also offensichtlich etwas. Was mache ich falsch?

schema.org/BlogPosting image erlaubt ImageObject und URL, Google erlaubt jedoch nur ImageObject , daher der Fehler. Das beabsichtigte Markup lautet:

<!-- my code -->
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  <img src="image.jpg" itemprop="url">
</div>

Eine weitere Diskrepanz ist schema.org/ImageObject empfiehlt contentUrl, aber Google empfiehlt url, daher meine Verwendung oben.

In Reaktion auf den Code Ihres Kommentars ist Ihre Struktur immer noch falsch. Ich werde es Zeile für Zeile nehmen:

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Ein kleiner Punkt, aber es sei denn, Sie entscheiden sich für XHTML, itemscope='itemscope'ist falsch. Verwenden Sie itemscope(wie Sie später getan haben).

<!-- your code -->
  <div itemprop='articleBody'>
    <div itemscope itemtype="http://schema.org/ImageObject"/>

Ihr ImageObject ist ein untergeordnetes Element der articleBody-Eigenschaft, Sie haben es jedoch nicht auf diese Weise verknüpft. Auf diese Weise haben Sie einen articleBody ohne zugeordnete Eigenschaften und ein nicht zugeordnetes ImageObject. Du solltest benutzen

<!-- my code -->
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">

Auch />ist falsch, auch wenn Sie für XHTML versuchen , wie dieses Element haben Kinder und eine Schließung </div>. Verwenden Sie es einfach so, >wie ich es im obigen Snippet angegeben habe.

<!-- your code -->
      <a href="1.png" itemprop="url"><img itemprop="image sharedContent" src="1.png" /></a>

Was macht sharedContent hier? sharedContent erwartet ein CreativeWork, wenn es als Eigenschaft von SocialMediaPosting verwendet wird - niemals als Eigenschaft von ImageObject und niemals in einem Bild.

Ihr anderes Code-Snippet, das die Eigenschaft sharedContent wie folgt platziert, ist ebenfalls falsch.

<!-- your code -->
<div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <div itemprop='articleBody'>
    <div itemprop='sharedContent'>
      <div itemscope itemtype="http://schema.org/ImageObject"/>
        …

Während sharedContent jetzt am richtigen Ort ist, muss es immer noch ein CreativeWork sein. Ihre ImageObjects sind immer noch nicht mit BlogPosting verknüpft, wie vom Structured Data Testing Tool angezeigt.

Das Folgende ist der richtige Code.

<!-- my code -->
<div itemscope itemtype="http://schema.org/BlogPosting">
  <div itemprop="articleBody">
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="1.png" itemprop="url"><img itemprop="image" src="1.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="2.png" itemprop="url"><img itemprop="image" src="2.png"></a>
    </div>
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
      <a href="3.png" itemprop="url"><img itemprop="image" src="3.png"></a>
    </div>
  </div>
</div>

Ich hatte ein ähnliches Problem mit dem Google Structured Data Tester, bei dem meine Bilder als ungültig markiert wurden. Anscheinend werden keine Bilder akzeptiert, bei denen die Quelle eine Localhost-Domain ist. Sobald ich auf dem Staging-Server bereitgestellt habe, hat das strukturierte Markup die Validierung bestanden.