web-dev-qa-db-fra.com

Erreurs de validation HTML5 + des microdonnées: l'attribut 'contenu' n'est pas autorisé sur l'élément 'p'

Selon la documentation de Google concernant le Product Rich Snippet , lorsque je souhaite marquer la disponibilité du produit dans ma boutique, je devrais procéder comme suit (à l'aide de microdonnées):

<span itemprop="availability" content="in_stock">In stock! Order now!</span>

Et je fais pareil:

<p class="centered" itemprop="availability" content="in_stock">Produkt dostępny</p>

Malheureusement, le validateur du W3C a signalé une erreur à ce sujet:

Ligne 569, colonne 73: L'attribut content n'est pas autorisé sur l'élément p à ce stade.

Alors, qu'est-ce qui ne va pas avec mon code ou avec Google?

EDIT: J'ai aussi des avertissements:

L'attribut RDFa Core content n'est pas autorisé sur l'élément p dans les documents HTML5 + RDFa 1.1 Lite. Pensez plutôt à vérifier par rapport au schéma HTML5 + RDFa 1.1.

Mais si je comprends bien les spécifications, HTML5 implique RDFa 1.1, pas 1.1 Lite? Mon DOCTYPE est <!DOCTYPE HTML>.

EDIT2: J'ai la solution maintenant

Bien que mon code en question ne soit pas un code HTML5 correct, il a été correctement reconnu par outil de Google permettant de tester les Rich Snippets . Cela ne me satisfaisait pas, alors j’ai décidé que si l’attribut content n’était autorisé que sur les balises <meta>, allons-y avec <meta>:

<p class="centered">Produkt dostępny</p>
<meta itemprop="availability" content="in_stock"/>

De cette façon, le code est:

  • sans ambiguïté - l'élément meta est un enfant de l'élément itemscope,
  • accepté par outil de validation HTML5 ,
  • toujours bien reconnu par l'outil de Google.
html5microdatavalidationgoogle-rich-snippets-toolw3c-validation
5
Al W

En HTML5 + Microdata, seul l'élément meta peut avoir l'attribut content .

(En HTML5 + RDFa, chaque élément peut avoir l'attribut content.)

Donc, si vous voulez ajouter la valeur de chaîne "in_stock" et qu'elle ne doit pas être visible sur la page, utilisez l'élément meta:

<meta itemprop="availability" content="in_stock" />

Vous utilisiez probablement le vocabulaire Data-Vocabulary.org, mais pour ceux qui utilisent Schema.org: Notez que la propriété availability de Schema.org attend un URI comme valeur, donc le link element doit être utilisé à la place :

<link itemprop="availability" href="http://schema.org/InStock" />
2
unor

Les données micro ont des règles strictes concernant les balises que vous pouvez utiliser, vous pouvez ouvrir un item en utilisant la balise p et spécifier le vocabulaire de données, mais les éléments imbriqués ne doivent pas être dans une balise p.

Par exemple, vous pouvez utiliser:

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>

Et si vous voulez ajouter un autre élément, tel qu'un téléphone dans une balise p, vous devez avoir une autre plage imbriquée dans le <p> comme ceci:

  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

Donc, cela ressemblerait à:

 <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">123 Road Name</span><br>
    <span itemprop="locality">Bournemouth</span>,
    <span itemprop="region">Dorset</span>
    <span itemprop="postal-code">BH1 3DD</span><br>
    <span itemprop="country-name">UK</span>
  </p>
  <p>
    US customers: <span itemprop="tel">01202 666999</span><br>
    UK customers: <span itemprop="tel">01202 666888</span>
  </p>

Donc, dans votre cas, vous voulez utiliser quelque chose comme:

<div itemscope itemtype="http://data-vocabulary.org/Product">
    <span itemprop="brand">Brand Name</span> <span itemprop="name">Item Name</span>
    <span itemprop="availability" content="in_stock">In stock! Order now!</span>
</div>
<p class="centered">
    <span itemprop="availability" content="in_stock">Produkt dostępny</p>
</p>

Vous pouvez donc utiliser DIV et P mais la plupart du temps, vous devrez utiliser des plages, car celles-ci sont imbriquées et la première est fermée. C'est assez compliqué à comprendre, peu importe l'explication. Je vous recommande fortement de jeter un oeil à ' plonger dans les microdonnées html5 '

0
Simon Hayter