multiple microdata "additionalProperty"

danielsandanielsan Member
dans Entraide
salut à vous

je cherche des avis sur le balisage de microdata.

Actuellement sur un site de pizza,
je cherche à détailler la fiche du produit avec plusieurs types de propriétés "critères", "ingrédients", "allergies".
Chaque propriété affiche une liste de valeurs.

Je ne sais pas s'il faut séparer "physiquement" les propriétés ou si on peut les faire à la suite ?

j'hésite entre 4 structures :

via des blocs (les groupes "additionalProperty" sont séparés) :
[== PHP ==]
<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name"><?php $plxShow->lang('TAGS') ?></h3>
	<?php $plxShow->artTags('<a href="#tag_url" title="Voir #tag_name"><span itemprop="value">#tag_name</span></a>',"\n"); ?>
</div>

<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name"><?php $plxShow->lang('CLASSIFIED_IN') ?></h3>
	<?php $plxShow->artCat('<a href="#cat_url" title="Voir toutes les #cat_name"><span itemprop="value">#cat_name</span></a>',"\n"); ?>
</div>

via plusieurs listes standards (les groupes "additionalProperty" sont séparés) :
[== PHP ==]
<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name"><?php $plxShow->lang('TAGS') ?></h3>
	<ul>
		<?php $plxShow->artTags('<li><a href="#tag_url" title="Voir #tag_name"><span itemprop="value">#tag_name</span></a></li>',"\n"); ?>
	</ul>
</div>

<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name"><?php $plxShow->lang('CLASSIFIED_IN') ?></h3>
	<ul>
		<?php $plxShow->artCat('<li><a href="#cat_url" title="Voir toutes les #cat_name"><span itemprop="value">#cat_name</span></a></li>',"\n"); ?>
	</ul>
</div>

via des listes imbriquées ( les groupes "additionalProperty" sont séparés) : 
[== PHP ==]
<ul>
	<li itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
		<h3 itemprop="name"><?php $plxShow->lang('TAGS') ?></h3>
		<ul>
			<?php $plxShow->artTags('<li><a href="#tag_url" title="Voir #tag_name"><span itemprop="value">#tag_name</span></a></li>',"\n"); ?>
		</ul>
	</li>

	<li itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
		<h3 itemprop="name"><?php $plxShow->lang('CLASSIFIED_IN') ?></h3>
		<ul>
			<?php $plxShow->artCat('<a href="#cat_url" title="Voir toutes les #cat_name"><span itemprop="value">#cat_name</span></a>',"\n"); ?>
		</ul>
	</li>
</ul>

ou via les listes de définitions ( un groupe "additionalProperty" mais "divisé" par le DT ... ) :
[== PHP ==]
<dl itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<dt itemprop="name"><?php $plxShow->lang('TAGS') ?></dt>
	<?php $plxShow->artTags('<dd><a href="#tag_url" title="Voir #tag_name"><span itemprop="value">#tag_name</span></a></dd>',"\n"); ?>
	<dt itemprop="name"><?php $plxShow->lang('CLASSIFIED_IN') ?></dt>
	<?php $plxShow->artCat('<dd><a href="#cat_url" title="Voir toutes les #cat_name"><span itemprop="value">#cat_name</span></a></dd>',"\n"); ?>
</dl>

Je trouve que la liste de définition convient bien à ce cas de figure, hors j'ai un doute pour le microdata.
L'analyse via google developer ne m'affiche pas d'erreur pour ces 4 cas

Quel serait votre avis ?
Merci.

Réponses

  • GzygGzyg Member
    janvier 2016 modifié
    J'ai lu ça en diagonale : http://vanseodesign.com/web-design/html5-microdata/

    Ça semble expliciter les différents cas. Mais en anglais. ]:D

    À priori, il ne peut pas y avoir d'erreur tant que tes listes sont correctement formatées et "itemscopées" et ce, quelques soient ces listes. (ul, dl voire une suite de span comme j'en ai vu traîner).

    à plus,

    Gzyg
  • danielsandanielsan Member
    ok je te remercie pour le lien.

    J'ai finalement fait mon choix, via des listes imbriquées
    si tu copies/colles dans https://developers.google.com/structured-data/testing-tool/ 
    [== HTML ==]
<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name">Ingrédients</h3>
	<span itemprop="value">tomate</span>, <span itemprop="value">fromage</span>
</div>
<div itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<h3 itemprop="name">Critères</h3>
	<span itemprop="value">Fromagère</span>, <span itemprop="value">végétarienne</span>
</div>
<dl itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
	<dt itemprop="name">Ingrédients</dt>
	<dd itemprop="value">tomate</dd>
	<dd itemprop="value">Fromage</dd>
	<dt itemprop="name">Critères</dt>
	<dd itemprop="value">fromagere</dd>
	<dd itemprop="value">végétarienne</dd>
</dl>
<ul>
	<li itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
		<h3 itemprop="name">Ingrédients</h3>
		<ul>
			<li itemprop="value">tomate</li>
			<li itemprop="value">fromage</li>
		</ul>
	</li>
	<li itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
		<h3 itemprop="name">Critères</h3>
		<ul>
			<li itemprop="value">fromagères</li>
			<li itemprop="value">végétariennes</li>
		</ul>
	</li>
</ul>

    tu peux voir que seules les solutions 1 et 3 sont valables, la 2ème ne montre qu'un seul groupe de propriété
  • GzygGzyg Member
    Je vois bien les groupes dans les trois cas... ?

    http://eriicj.xyz/dev/pluxml/test.html


    à plus,

    Gzyg
  • danielsandanielsan Member
    oui, visuellement.

    Moi je parle de structure pour les moteurs de recherche, via les microdata ...
    Il faut qu'elles soient imbriquées d'une certaine manière pour qu'elles soient bien analysées.
    [list=*]
    [*]additionalProperty
    [list=*]
    [*]name[/*]
    [*]value[/*]
    [*]value[/*]
    [/list][/*]
    [/list]
    [list=*]
    [*]additionalProperty
    [list=*]
    [*]name[/*]
    [*]value[/*]
    [*]value[/*]
    [/list][/*]
    [/list]

    et non
    [list=*]
    [*]additionalProperty
    [list=*]
    [*]name[/*]
    [*]value[/*]
    [*]value[/*]
    [*]name[/*]
    [*]value[/*]
    [*]value[/*]
    [/list][/*]
    [/list]
    Les DL/DT/DD ne s'imbriquent pas, elles sont à la suite avec des séparateurs.
    C'est une nuance qui dans ce cas change la donne.
  • GzygGzyg Member
    janvier 2016 modifié 
    [== HTML ==]
<dl itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
  <dt itemprop="name">Ingrédients</dt>
  <dd itemprop="value">tomate</dd>
  <dd itemprop="value">Fromage</dd>
</dl>
<dl itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
  <dt itemprop="name">Critères</dt>
  <dd itemprop="value">fromagere</dd>
  <dd itemprop="value">végétarienne</dd>
</dl>

    Rien n'oblige à avoir plusieurs dt par dl.
    Ton exemple 3 est construit de la sorte : tu réitemizes à chaque li.


    à plus,

    Gzyg
  • danielsandanielsan Member
    ah oui tiens c'est pas bête ça, j'avais pas pensé à couper la liste ... ]:D
    j'crois que ça m'plait mieux en plus :D
  • danielsandanielsan Member
    dernier point,
    vaut-il mieux que je place les en-tête de liste entre des balises de titre ?
    voici les 2 cas de figure après validation au W3C
    mini_168838structure.png

    je sèche un peu sur le balise de la page là ... je suis certain qu'il y a mieux.
    la page est là : daniel-rolland.com/pluxml/pizza_ce_soir/index.php?article13/pizza-norvegienne

    merci
  • GzygGzyg Member
    Des balises titre ici ne sont pas nécessaires : sémantiquement, tes listes correspondent bien au titre de ta page (Pizza norvégienne).
    Visuellement, je les ferais ressortir en les mettant en gras ou en uppercase avec un padding-bottom sur le dt.
    Ou alors chaque dl en float left...


    à plus,

    Gzyg
  • danielsandanielsan Member
    ok je vais voir, merci !
  • bg62bg62 Member
    juste en passant :
    si tu peux éviter de mettre quoi que ce soit vers les ' commentaires ' cela serait très bien :)
    vue la vague de spammSSS qui coure en ce moment, repérés surtout par les termes ' ajouter un commentaire ' cela évitera des soucis supplémentaires
    @+

    mes sites principaux : fonds d'écran gratuits - longue traîne - référencer votre site - brocante en ligne -

  • danielsandanielsan Member
    c'est à dire ?
    je comprends pas ... pas de contenu vers le formulaire "ajouter un commentaire ?"
Connectez-vous ou Inscrivez-vous pour répondre.