Modifier l'ordre des éléments en responsive

(reprise du message précédent)

bzh a écrit :
Regarde le format JSON-LD si tu ne veux pas avoir pleins de balises/attributs partout. Je ne pense pas que ton doctype est aucune incidence pour ce genre de chose.

Mince alors ! Mais je ne connaissais pas moi ! Il va falloir que je m'y colle pour mes prochains projets... Merci pour le tuyau en tout cas.

Bonjour,

Je m'étonne que les grand cerveaux de Google ou Microsoft n'y aient pas pensé, mais un produit peut exister en différentes versions avec des références et des prix différents.

Par exemple un cordon RJ45 va exister en plusieurs versions selon la longueur et la couleur.

L'idéal serait pouvoir encapsuler dans product des sous-ensemble "@type": "version" comme on peut le faire avec "@type": "review".
Il me semble que ce n'est pas du tout prévu.

Au moins pouvoir signaler que le prix n'est pas unique, qu'il existe une fourchette de prix.
Afficher :
"price": "101 versions de 1,30 à 32,29"
Cela génère une erreur dans le test Google.

Je vais essayer d'entrer minprice et maxprice dans product mais il me semble que c'est réservé a aggregateProduct.

La seule solution que j'ai trouvée jusqu'à présent est de ne pas afficher de prix quand il existe plusieurs versions d'un même produit.
Modifié par boteha_2 (04 Sep 2017 - 22:02)

@Olivier, ravi de t'avoir appris quelque chose

Chez google les versions de produits s'appellent les variantes, j'ai eu du mal à trouver des exemples mais en voilà un ici : https://webmasters.stackexchange.com/a/79060

Édit : Où ici, en plus clair, dans l'exemple sous products variants : https://support.google.com/merchants/answer/6386198?hl=en-GB
Modifié par bzh (02 Jul 2017 - 13:51)

Bonjour,

Merci, génial le lien vers les variantes de Google !

Dans le même ordre idée, sur schema.org, je n'ai pas trouvé comment caractériser le prix selon une unité.

Tu sors dans la rue, tu vois des prix au mètre, prix au kilo.

Sur schema.org je n'ai pas trouvé comment préciser :

"price": "1",
// Prix pour 1 kg

"price": "1",
// Prix pour 1 mètre
Modifié par boteha_2 (03 Jul 2017 - 11:12)

Bonjour cela se fait grâce à la propriété «unitCode»

Bonjour,

kustolovic a écrit :
Cela se fait grâce à la propriété «unitCode»

Merci de l'info.

Je m'y remets le week-end prochain, ce sont des développements que je n'ai pas le temps de faire en semaine.

D'ici là, je vais un peu fouiller dans la doc des variantes de Google.

Ce que j'espère c'est qu'il est possible de caractériser une variante par un autre paramètre que la couleur, par exemple la taille.
Et qu'il est possible d'entrer plusieurs propriétés de variante.

Par exemple, pour un cordon RJ45, la variante dépend de deux paramètres :
Couleur
Longueur

Pour un switch, il peut aussi y avoir deux paramètres :
Couleur
Nombre de ports

L'idéal serait de pouvoir disposer d'une zone de texte libre pour décrire certains paramètres.
Par exemple pour un doubleur RJ45 ce serait le plan de câblage.
Ethernet + Ethernet
Ethernet + Téléphone
Ethernet + TV

Je vous tiens informés.

Bonjour,

L'exemple que donne Google est incompréhensible :

Déjà, cela commence par cette phrase :

Certain products may contain multiple variants, such as colour or price. To show the variants, you need to add additional structured data to show that there are multiple products on one page.

multiple variants, dans la première phrase et multiple products dans la seconde.

<script type="application/ld+json">
  [
   {
        "@context": "http://schema.org/",
          "@type": "Product",
          "sku": "EXAMPLE-1337-json-silver",
          "gtin14" : "12345678901234",
         
          "image": "http://fake.example.com/test_executive.jpg",
          "name": "Example Test",
          "description": "This is just a boring example",
          "brand": {
            "@type": "Thing",
            "name": "EXAMPLE"
          },
          "color" : "Silver",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "119.99",
            "itemCondition": "http://schema.org/UsedCondition",
            "availability": "http://schema.org/InStock"
          }
     },
    {
        "@context": "http://schema.org/",
          "@type": "Product",
          "sku": "EXAMPLE-1337-json-gold",
          "gtin14" : "12345678901234",
         
          "image": "http://fake.example.com/test_executive.jpg",
         
          "description": "This is just a boring example",
          "brand": {
            "@type": "Thing",
            "name": "EXAMPLE"
          },
          "color" : "Gold",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "3119.99",
            "itemCondition": "http://schema.org/UsedCondition",
            "availability": "http://schema.org/InStock"
          }
    }
  ]
</script>

Donc il y a la variante Silver à 119.99 et la variante Gold à 3119.99.
Mais les deux variantes ont le même code EAN ("gtin14" : "12345678901234",) ce qui a ma connaissance est impossible.
Et les informations sur le produit sont dupliquées.
Cela revient à dire qu'il y a plusieurs produits sur la page alors que le cas qui nous intéresse est un seul produit avec plusieurs variantes.

L'autre exemple issu d'un forum est plus intéressant

{
  "@context": "http://schema.org",
  "@type": "Product",
  "description": "This Fancy Product is all you will ever need.",
  "name": "My Fancy Product",
  "model" :"https://www.freebase.com/m/02116f",
  "offers": [
        {
    "@type": "Offer",
    "category": "base",
    "availability": "http://schema.org/InStock",
      "priceSpecification":{
        "minPrice": "10.00",
        "priceCurrency": "EUR"
      },
      "price": "10.00"
    },
    {
    "@type": "Offer",
    "category": "high-end",
    "availability": "http://schema.org/InStock",
    "priceSpecification":{
        "minPrice": "50.00",
        "priceCurrency": "EUR"
      },
      "price": "50.00"
  }
    ]
    }

Cette fois il y a un seul produit et des offres multiples.
Je ne comprends pas le truc de minprice et maxprice, pourquoi pas simplement price.
A noter la propriété "Category" qui semble intéressante pour distinguer les variantes.
J'irai voir si ce code est valide pour Google.

Bonjour,

Ce code est validé par Google :

{
  "@context": "http://schema.org",
  "@type": "Product",
  "description": "This Fancy Product is all you will ever need.",
  "name": "My Fancy Product",
  "image" :"https://www.freebase.com/m/02116f",
  "offers": [
        {
    "@type": "Offer",
    "category": "2 m, vert",
    "mpn": "11111",
    "gtin13": "3548388090710",
    "availability": "http://schema.org/InStock",
    "price": "10.00",
     "priceCurrency": "EUR",
 "seller":
{
"@type": "Organization",
"name": "monsite.com"
}
    },
    {
    "@type": "Offer",
    "category": "10 m, bleu",
    "mpn": "22222",
    "gtin13": "3548388090711",
    "availability": "http://schema.org/InStock",
    "price": "50.00",
    "priceCurrency": "EUR",
 "seller":
{
"@type": "Organization",
"name": "monsite.com"
}
    }
    ]
    }

A noter que Color n'est pas une propriété acceptée dans Offer.
Du coup j'ai mis la couleur dans category.

A noter aussi que Seller étant une propriété de Offer, je suis obligé de le répéter pour chaque offre.
J'ai essayé de l'intégrer en premier niveau de Offers mais c'est refusé par Google.

Quelle usine à gaz s'il y a 100 versions d'un même produit...
Pas encore mis en production, cela mérite réflexion.
Modifié par boteha_2 (09 Jul 2017 - 21:36)

Il faut pas faire ça à la main et avoir 100 versions d'un même produit c'est déjà avoir une usine à gaz

Bonjour,

bzh a écrit :
Il faut pas faire ça à la main et avoir 100 versions d'un même produit c'est déjà avoir une usine à gaz

Ce n'est pas fait à la main.

Tu as un câble qui existe en 10 longueurs et 10 couleurs cela te fait 100 versions.
Je t'assure qu'une page avec 100 versions c'est beaucoup mieux que 100 pages avec une version mais là n'est pas le sujet.

a écrit :

A noter que Color n'est pas une propriété acceptée dans Offer.
Du coup j'ai mis la couleur dans category.

A noter aussi que Seller étant une propriété de Offer, je suis obligé de le répéter pour chaque offre.
J'ai essayé de l'intégrer en premier niveau de Offers mais c'est refusé par Google.

Tout cela est assez logique, Offers concerne des offres de vente, un prix, un point de vente, etc, sans qu'il y ait de modification du produit. (pense à un comparateur de prix, ou les points de vente sur le site d'un fabricant).

Si la couleur, le prix et le code sont différents, c'est différents produits…

D'ailleurs google est assez clair, les métadonnées servent à représenter un simple produit, ou un simple produit avec différentes offres (vendeurs).

En fait, pour tes cables RJ-45, il faudrait faire un seul produit, puis présenter le prix avec minPrice/maxPrice, ce serait plus pertinent, plutôt que de vouloir absolument présenter toutes les variantes.

Bonjour,

Merci de ta réponse.

Voir cet exemple de produit à versions multiples.

Pour moi c'est un produit, pas une famille, mais ne jouons pas sur les mots.
Ce qui est sûr c'est que la présentation dans un catalogue papier serait un tableau, pas 120 pages avec une page par couleur et longueur.
On ne fait pas sur le web quelque chose de moins pratique que le papier.

Autrement je ne tiens pas à présenter toutes les versions, juste à faire passer ce message à Google : 126 versions de 0,3 à 20 m, de 3,06 à 30,78 € TTC

Aucune propriété de Schema.org n'est adaptée.
Pour l'instant je mets ces informations dans Description.
Avec dans Offer prix mini, maxi et moyen.
Aucun mpn ou EAN.

Bonjour,

Un produit, une version, le cas classique

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"offers":
{
"@type": "Offer",
"priceCurrency": "EUR",
"availability": "http://schema.org/InStock",
"itemCondition": "http://schema.org/NewCondition",
"seller":
{
"@type": "Organization",
"name": "monsite.com"
},
"price": "8.4",
"priceValidUntil": "2017-07-23"
},
"aggregateRating":
{
"@type": "AggregateRating",
"reviewCount": "1",
"ratingValue": "5"
},
"brand":
{
"@type": "Thing",
"name": "Cherry"
},
"name": "Souris optique filaire, USB, 3 boutons, GENTIX",
"image": "https://www.monsite.com/im/pr/864G.jpg",
"description": "Souris filaire pour PC ou Mac d&#039;une qualit&eacute; sans &eacute;quivalent &agrave; ce prix&nbsp;: pr&eacute;cision, glisse, ergonomie, toucher, r&eacute;sistance aux chocs, un plaisir &agrave; utiliser.  | Une version &agrave; 8,40 &euro; TTC.",
"gtin13": "4025112074295",
"mpn": "18.97.3245"
}
</script>

Un produit, avec plusieurs versions au même prix.
1) J'utilise additionalProperty pour dire qu'il y a plusieurs versions
"name": "Number of Versions",
"name": "Discriminating Criterion(s)",
2) Je ne peux plus publier mpn ni gtin13 qui sont devenus multiples.

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"offers":
{
"@type": "Offer",
"priceCurrency": "EUR",
"availability": "http://schema.org/InStock",
"itemCondition": "http://schema.org/NewCondition",
"seller":
{
"@type": "Organization",
"name": "monsite.com"
},
"price": "21.25",
"priceValidUntil": "2017-07-23"
},
"aggregateRating":
{
"@type": "AggregateRating",
"reviewCount": "22",
"ratingValue": "4,5"
},
"brand":
{
"@type": "Thing",
"name": "Casanova"
},
"name": "Doubleur RJ45, toutes versions pour Ethernet, t&eacute;l&eacute;phone, TV, audio",
"image": "https://www.monsite.com/im/pr/2099G.jpg",
"description": "Ce doubleur existe en de nombreuses versions selon les applications &agrave; partager&nbsp;: t&eacute;l&eacute;phone, t&eacute;l&eacute;vision, ethernet et bien d&#039;autres possibilit&eacute;s. | 11 versions selon configurations diverses &agrave; 21,25 &euro; TTC.",
"additionalProperty":
[
{
"@type": "PropertyValue",
"name": "Number of Versions",
"value": "11"
},
{
"@type": "PropertyValue",
"name": "Discriminating Criterion(s)",
"value": "selon configurations diverses | Colors"
}
]
}
</script>

Un produit, avec plusieurs versions à différents prix.
Les deux changements déjà indiqués pour un produit à version multiples, plus :

3) PriceSpecification dans Offer de façon à publier minPrice et maxPrice.
Obligé de donner un Price. C'est le prix ùoyen qui est donné, que peut-on faire d'autre.
4) Pour dire que c'est prix moyen j'ajoute un additionalProperty
"@type": "PropertyValue",
"name": "Comment",
"value": "In offer, Price is average price"

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"offers":
{
"@type": "Offer",
"availability": "http://schema.org/InStock",
"itemCondition": "http://schema.org/NewCondition",
"seller":
{
"@type": "Organization",
"name": "monsite.com"
},
"PriceSpecification":
{
"@type": "PriceSpecification",
"priceCurrency": "EUR",
"minprice": "6.85",
"maxprice": "88.21",
"price": "47.53"
}
},
"aggregateRating":
{
"@type": "AggregateRating",
"reviewCount": "6",
"ratingValue": "4,8"
},
"brand":
{
"@type": "Thing",
"name": "FCS"
},
"name": "Cordon RJ45 Cat7-prises 6Ea, SFTP, sans halog&egrave;ne, garanti 600 Mhz",
"image": "https://www.monsite.com/im/pr/878G.jpg",
"description": "Le point fort de ce cordon est d&#039;&ecirc;tre garanti jusqu&#039;&agrave; 600 Mhz. Il emploie un conducteur de Cat7 avec double blindage, des prises Cat6Ea (plus performantes que Cat6a) mont&eacute;es avec une agrafe anti-arrachement sous le manchon. | 119 versions de 0,2 &agrave; 55&nbsp;m de 6,85 &agrave; 88,21 &euro; TTC.",
"additionalProperty":
[
{
"@type": "PropertyValue",
"name": "Number of Versions",
"value": "119"
},
{
"@type": "PropertyValue",
"name": "Discriminating Criterion(s)",
"value": "de 0,2 &agrave; 55&nbsp;m | Colors"
},
{
"@type": "PropertyValue",
"name": "Comment",
"value": "In offer, Price is average price"
}
]
}
</script>

Tous ces codes sont testés sans erreur par l'outil Google.

Le but d'arrêter les microformats qui alourdissent la structure html tout en espérant que Google continue à publier les étoiles aggregateRating.

je vous tiendrai au courant des rélultats.

Bonjour,

10 jours après la mise en service, d'après la console Google, Apparence dans les résultats de recherche > Données structurèes.

Google m'indique qu'il a trouvé 250 éléments en balisage Product schema.org, c'est peu car il y plus de 2 000 pages différentes.
Aucune erreur.

Si produit à une version il publie bien le rating, le prix et la disponibilité.
Il ne trouve pas brand alors que cela me semble bien codé :

"brand":
{
"@type": "Thing",
"name": "Cherry"
},

Si produit à plusieurs versions et plusieurs prix il publie simplement le rating, ce qui pour moi est le plus important.
Donc si price est encapsulé dans PriceSpecification Google ne publie pas de prix.

"PriceSpecification":
{
"@type": "PriceSpecification",
"priceCurrency": "EUR",
"minprice": "6.85",
"maxprice": "88.21",
"price": "47.53"
}

Mais principale question est de savoir comment aider Google à trouver plus de pages avec JSON.
En microformat il en trouvait plus de 1000, donc la moitié du total disponible.

Bonjour,

Passer de microformat à json m'a permis de régler le problème de structure html.

Je vais donc attaquer le véritable objet de cette discussion, la modification de l'ordre des éléments par passage en flecbox.

En fait pour la version PC qui marche bien je ne vais pas employer de flexbox.
Juste pour la partie mobile.

Je vous tiens informés de la suite.

Bonjour,

J'ai beau avoir lu le livre de Raphaël je bute sur le problème suivant : retrouver un effet float dans un flexbox.

<div id=flex">
<div id="un">Un</div>
<div id="deux">Deux</div>
<div id="trois">Trois</div>
<div id="quatre">Quatre</div>
</div>

Si pas flex, j'ai le css :

div#deux {float: left}
div#quatre {clear: left}

Vous voyez le rendu :
un
deux trois
quatre

Comment obtenir le même rendu avec une flexbox ?

div#flex {display: flex; flex-direction: column}

Là je bute.
Je suppose que c'est facile en changeant la structure html.
Mais sans la changer ?
Modifié par boteha_2 (20 Aug 2017 - 16:41)

Bonjour,

J'ai trouvé une solution très simple, mais en changeant la structure html :

<p>moins un</p>
<p>zéro</p>
<div id=flex">
<div id="un">Un</div>
<div>
<div id="deux">Deux</div>
<div id="trois">Trois</div>
</div>
<div id="quatre">Quatre</div>
</div>
<p>cinq</p>
<p>six</p>

Ce css arrive au rendu souhaité :

div#deux {float: left}
div#quatre {clear: left}

@media screen and (max-width: 768px)
{
div#flex {display: flex; flex-direction: column}
div#un {order: 1}
}

Rendu sur petit écran :

moins un
zéro
deux trois
quatre
un
cinq
six

Néanmoins, il y a deux changements dans la structure html.
<div id=flex"> : je pense ne pas pouvoir l'éviter car on va dire que la page comprend un nombre élevé et variable de blocs et il plus simple d'isoler la partie à ré-ordonner.

Par contre, si je pouvais me passer du div qui isole deux et trois pour le float, ce serait mieux.
Mais j'ai l'impression que flexbox ne gère pas ce problème.
Modifié par boteha_2 (04 Sep 2017 - 22:01)