webentwicklung-frage-antwort-db.com.de

Warum ist mein itemprop = 'image' Markup falsch?

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

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

Structured Testing Tool errors

Ergebnisseite .

Nach meinem Verständnis habe ich den gesamten Code dazwischen ignoriert und die Daten folgendermaßen strukturiert:

<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. BlogPosting kann die Eigenschaften articleBody und image gemäß https://schema.org/BlogPosting , aber gemäß SDTT haben:

Das Attribut itemtype hat einen ungültigen Wert.

In der Tat habe ich gerade versucht, die SDTT mit dem obigen Beispielcode und es ist nicht zu validieren.

Example code in the SDTT

Mir fehlt also offensichtlich etwas. Was mache ich falsch?

8
Ken Sharp

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

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

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


Als Antwort auf Ihr Kommentarcode ist Ihre Struktur immer noch falsch. Ich werde es Zeile für Zeile nehmen:

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

Kleiner Punkt, aber wenn Sie sich nicht für XHTML entscheiden, ist itemscope='itemscope' falsch. Verwenden Sie itemscope (wie Sie es 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, das Sie jedoch nicht auf diese Weise zugeordnet haben. 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">

Außerdem ist /> falsch, auch wenn Sie XHTML verwenden, da dieses Element untergeordnete Elemente und einen abschließenden </div> enthält. Verwenden Sie einfach >, 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 bei Verwendung als Eigenschaft von SocialMediaPosting - 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 sich dennoch um ein CreativeWork handeln. Ihre ImageObjects sind immer noch nicht mit dem BlogPosting verknüpft, wie das Structured Data Testing Tool zeigt.

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