web-dev-qa-db-fra.com

Utilisation du balisage du logo Schema.org avec des images SVG

J'ai créé un logo génial et je l'ai enregistré au format AI et SVG. Je souhaite utiliser le fichier SVG sur un site, car le logo apparaît plusieurs fois sur le site. Ce serait mieux que de sauvegarder le logo au format PNG et d’avoir des requêtes inutiles côté serveur. Maintenant, cela fonctionne très bien en utilisant:

<svg id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

Maintenant, le problème se pose lorsque vous utilisez le balisage Schema.org logo. En utilisant:

<svg itemscope itemtype="http://schema.org/Organization" id="my-logo" height="60" width="60" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g transform="scale(0.1)">
    <image itemprop="logo" x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
  </g>
</svg>

Comme je m'y attendais, la validation du W3C échoue et les messages d'erreur suivants s'affichent:

  • L'attribut itemscope n'est pas autorisé sur l'élément svg à ce stade.
  • L'attribut itemtype n'est pas autorisé sur l'élément svg à ce stade.
  • L'attribut itemprop n'est pas autorisé sur l'image de l'élément à ce stade.

Maintenant, je sais que la validation du W3C n’est pas une chose essentielle, mais je préférerais une solution qui satisfasse à la fois Google et le W3C.

Je suis sûr que certains gourous du W3C seront en mesure de me diriger dans la bonne direction, je préférerais ne pas utiliser Data URI si possible car je sais que cela pourrait être une solution, mais corrigez-moi si je me trompe ou si je ne me trompe pas. ne sont pas cachables.

html5microdataschema.orgsvgw3c-validation
7
Simon Hayter

Les microdonnées ne peuvent être utilisées que sur éléments HTML tel que défini par HTML5. Selon HTML5, l'élément svgNAME_ n'est pas dans l'espace de noms HTML. La spécification HTML du WHATWG mentionne explicitement que les microdonnées ne fonctionnent pas pour svg(cité le 2014-01-02):

Actuellement, itemscopename__, itempropet d'autres attributs de microdonnées ne sont définis que pour les éléments HTML. Cela signifie que les attributs portant les noms littéraux "itemscopename__", "itempropname__", etc. n'entraînent pas le traitement de microdonnées sur des éléments d'autres espaces-noms, tels que SVG.

(a) Vous pouvez ajouter un élément sans signification divname__:

<div itemscope itemtype="http://schema.org/Organization">
  <div itemprop="logo">
    <svg>…</svg>
  </div>
</div>

Les analyseurs de microdonnées comprendraient que le contenu de l’élément divavec la propriété logocontient le logo de l’organisation. Mais étant donné que l'élément svgne fait pas partie de HTML, il existe pas de règles défini pour obtenir la valeur correcte (= l'image URL) hors de celui-ci. Il est donc très peu probable que des analyseurs syntaxiques de microdonnées puissent faire quelque chose avec cette information (par exemple, afficher le logo dans un contexte différent).
Notez que l'utilisation de itempropsur un divdonne une valeur de chaîne , ce qui n'est pas ce que Schema.org attend de la propriété logoNAME _ .

(b) Vous pouvez dupliquer les informations avec "hidden" linkname__:

<div itemscope itemtype="http://schema.org/Organization">
  <svg>…</svg>
  <link itemprop="logo" href="logo.svg" />
</div>

(c) Vous pouvez utiliser l'élément img(selon caniuse.com en utilisant des fichiers SVG dans imgname __ a plus de soutien que en utilisant SVG inline en HTML5 ):

<div itemscope itemtype="http://schema.org/Organization">
  <img itemprop="logo" src="logo.svg" alt="ACME Inc." />
</div>

(d) Peut-être que pourrait utiliser RDFa Lite à la place , mais je ne suis pas sûr que cela fonctionne pour les espaces de noms "mixtes". Mais pour SVG 1.2 Tiny, RDFa peut être utilisé dans l’élément metadataname__ .

6
unor

Vous pouvez simplement faire référence à votre logo via la balise meta/link comme suggéré dans la documentation officielle: http://schema.org/docs/gs.html#advanced_missing

<!-- schema.org item wrapper -->
<div itemscope itemtype="http://schema.org/Organization">
  <!-- This is Your original SVG markup -->
  <svg id="my-logo" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g transform="scale(0.1)">
     <image x="0" y="0" height="600" width="600" xlink:href="my-logo.svg" />
   </g>
  </svg>
  <!-- schema.org itemprop markup -->
  <link itemprop="logo" content="my-logo.svg" />
</div>

Edit : changé de <meta> en <link /> comme suggéré par unor.

2
Peta Sittek

Une autre alternative serait d’enregistrer votre image dans un fichier .svg. Vous pouvez utiliser n'importe quel éditeur de texte pour créer ce fichier et le coller dans votre balisage SVG. Ensuite, mettez le balisage comme vous le feriez pour un .png ou .jpg:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.svg" />
</div>
2
Stephen Ostermiller