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

8

J'ai créé un logo qui est 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îtra plusieurs fois sur tout le site et serait mieux que d'enregistrer le logo au format PNG et d'avoir des demandes 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 lors de l'utilisation du logobalisage Schema.org . 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, il échoue à la validation W3C et je suis accueilli avec les messages d'erreur suivants:

Attribut itemscope non autorisé sur l'élément svg à ce stade.

Le type d'élément d'attribut 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 W3C n'est pas une chose essentielle mais je préférerais avoir une solution qui satisfasse Google et 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 non DATA URI ne sont pas cachable.

— Simon Hayter
source

7

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

À l' heure actuelle, les itemscope, 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 " itemscope", " itemprop", etc., n'entraînent pas de traitement de microdonnées sur les éléments dans d'autres espaces de noms, tels que SVG.

(a) Vous pouvez ajouter un divélément dénué de sens :

<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' divélément avec la logopropriété contient le logo de l'organisation. Mais comme l' svgélément ne fait pas partie du HTML, aucune règle n'est définie pour en extraire la valeur correcte (= l'URL de l'image). Il est donc très peu probable que les analyseurs de microdonnées puissent faire quelque chose avec ces informations (par exemple, montrer le logo dans un contexte différent).
Notez que l'utilisation itempropd'un divélément entraîne une valeur de chaîne , ce qui n'est pas ce que Schema.org attend pour la logopropriété.

(b) Vous pouvez dupliquer les informations avec le mot "caché" link:

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

(c) Vous pouvez utiliser l' imgélément (selon caniuse.com, l' utilisation de fichiers SVG enimg a plus de support que l' utilisation de SVG en ligne en HTML5 ):

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

(d) Peut - être que vous pouvez utiliser RDFa Lite à la place , mais je ne suis pas sûr si cela fonctionne pour les espaces de noms « mixtes ». Mais pour SVG 1.2 Tiny, RDFa peut être utilisé dans l' metadataélément .

— unor
source

très bonne réponse. Le problème avec l'utilisation de la balise img est qu'elle n'évolue pas si bien, ou du moins dans mes tests, le redimensionnement de l'utilisation width: height:dans la balise img a eu des effets indésirables. Je vais lui donner un autre coup .... sera pénible d'avoir à utiliser des sprites png car cela ajoutera 100 Ko contre 2 Ko.

— Simon Hayter

2

Vous pouvez simplement vous référer à 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>

Modifier : changé de <meta>à <link />comme suggéré par unor.

— Peta Sittek
source

Vous devez utiliserlink au lieu de metasi la valeur est un URI (ce que j'ai suggéré dans la partie (b) de ma réponse ).

— unor

2

Une autre alternative serait d'enregistrer votre image en tant que .svgfichier. 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 .pngou .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>

— Stephen Ostermiller
source