web-dev-qa-db-fra.com

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

J'ai expérimenté des microdonnées et je pensais pouvoir l'essayer sur mon blog. Il se trouve que le modèle que j'utilisais avait déjà ajouté des balises. 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 message, mais l'outil de test de données structurées (SDTT) de Google n'est pas satisfait des attributs itemprop='image' et je ne sais pas pourquoi.

Structured Testing Tool errors

page de résultats .

C'est ma compréhension, ignorant tout le code entre les deux, que j'ai structuré les données de la manière suivante:

<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. BlogPosting peut avoir les propriétés articleBody et image selon https://schema.org/BlogPosting , mais selon le SDTT:

L'attribut type d'élément a une valeur non valide.

En effet, je viens d’essayer la SDTT avec l’exemple de code ci-dessus et elle n’a pas été validée.

Example code in the SDTT

Donc, je manque évidemment quelque chose. Qu'est-ce que je fais mal?

microdataschema.orggoogle-rich-snippets-tool
8
Ken Sharp

schema.org/BlogPosting image autorise ImageObject et l'URL, cependant Google n'autorise 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 à votre code de commentaire , votre structure est toujours incorrecte. Je vais le prendre ligne par ligne:

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

Un point mineur, mais à moins d’utiliser XHTML, itemscope='itemscope' 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 façon. 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">

De plus, /> est incorrect, même si vous essayez pour XHTML car cet élément a des enfants et un </div> de fermeture. Utilisez simplement > comme je l'ai inclus dans l'extrait de code ci-dessus.

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

Que fait ContentContent ici? sharedContent attend un CreativeWork lorsqu'il est utilisé en tant que propriété de SocialMediaPosting - jamais en tant que propriété de 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"/>
        …

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

Ce qui suit est le bon 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