Pourquoi mon balisage itemprop = 'image' est-il incorrect?

J'ai expérimenté avec des microdonnées et j'ai pensé que je pourrais l'essayer sur mon blog. Il s'avère que le modèle que j'utilisais a déjà ajouté un balisage. Ce n'était pas génial et j'ai donc arrangé ce que je pouvais.

Pour essayer de pousser ma chance, j'ai ajouté plus de balisage à mon dernier article, mais l'outil de test de données structurées (SDTT) de Google n'est pas satisfait des itemprop='image'attributs et je ne sais pas pourquoi.

Page de résultats .

C'est ma compréhension, en ignorant tout le code entre les deux, que j'ai structuré les données ainsi:

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

Et cela me semble correct. BlogPostingpeut avoir les propriétés articleBodyet imageselon https://schema.org/BlogPosting , mais selon le SDTT:

L'attribut itemtype a une valeur non valide.

En effet, je viens d'essayer le SDTT avec l'exemple de code ci-dessus et il ne parvient pas à valider.

Il me manque donc manifestement quelque chose. Qu'est-ce que je fais mal?

schema.org/BlogPosting image autorise ImageObject et URL, mais Google autorise uniquement ImageObject , d'où l'erreur. Le balisage prévu est:

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

Une autre différence est schema.org/ImageObject recommande contentUrl, mais Google recommande url, d'où mon utilisation ci-dessus.

En réponse au code de votre commentaire , votre structure est toujours incorrecte. Je vais le prendre ligne par ligne:

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

Point mineur, mais à moins que vous ne choisissiez XHTML, itemscope='itemscope'c'est faux. Utilisez itemscope(comme vous l'avez fait plus tard).

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

Votre ImageObject est un enfant de la propriété articleBody, mais vous ne l'avez pas associé de cette manière. Comme cela, vous avez un articleBody sans propriétés associées et un ImageObject non associé. Tu devrais utiliser

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

En outre, />est incorrect, même si vous essayez pour XHTML car cet élément a des enfants et une fermeture </div>. Utilisez simplement ce >que j'ai inclus dans l'extrait ci-dessus.

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

Que fait SharedContent ici? sharedContent attend un CreativeWork lorsqu'il est utilisé en tant que propriété de SocialMediaPosting - jamais en tant que propriété d'ImageObject et jamais sur un img.

Votre autre extrait de code qui place la propriété sharedContent comme ci-dessous est également incorrect.

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

Alors que sharedContent est maintenant au bon endroit, il doit toujours être un CreativeWork. Vos ImageObjects ne sont toujours pas associés à BlogPosting, comme le montre l'outil de test de données structurées.

Voici le code correct.

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

J'ai rencontré un problème similaire avec Google Structured Data Tester marquant mes images comme non valides. Apparemment, il n'accepte pas les images dont la source est un domaine localhost. Dès que j'ai déployé sur le serveur de transfert, le balisage structuré a réussi la validation.