web-dev-qa-db-de.com

Verwenden des Schema.org-Logo-Markups mit SVG-Bildern

Ich habe ein tolles Logo erstellt und es im AI- und SVG-Format gespeichert. Ich möchte die SVG-Datei auf einer Site verwenden, da das Logo mehrmals auf der Site erscheint und besser ist, als das Logo im PNG-Format zu speichern und unnötige serverseitige Anforderungen zu haben. Das funktioniert großartig mit:

<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>

Jetzt tritt das Problem auf, wenn Schema.org logo Markup verwendet wird. Verwenden von:

<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>

Wie erwartet schlägt die W3C-Validierung fehl und ich erhalte die folgenden Fehlermeldungen:

  • Das Attribut itemscope ist an diesem Punkt für das Element svg nicht zulässig.
  • Das Attribut itemtype ist derzeit für das Element svg nicht zulässig.
  • Das Attribut itemprop ist an diesem Punkt für das Elementbild nicht zulässig.

Jetzt weiß ich, dass die W3C-Validierung keine wesentliche Sache ist, aber ich würde es vorziehen, eine Lösung zu haben, die sowohl Google als auch W3C zufriedenstellt.

Ich bin mir sicher, dass ein W3C-Guru mich in die richtige Richtung lenken kann. Ich würde lieber keine DATA-URI verwenden, da ich weiß, dass dies eine Lösung sein könnte, aber korrigiere mich, wenn ich mich irre oder keine DATA-URIs habe sind nicht zwischenspeicherbar.

html5microdataschema.orgsvgw3c-validation
7
Simon Hayter

Mikrodaten können nur für HTML-Elemente verwendet werden, wie in HTML5 definiert. Gemäß HTML5 befindet sich das svg -Element nicht im HTML-Namespace. WHATWGs HTML-Spezifikation ausdrücklich erwähnt dass Mikrodaten für svg nicht funktionieren (zitiert am 02.01.2014):

Derzeit sind die Attribute itemscope, itemprop und andere Mikrodaten nur für HTML-Elemente definiert. Dies bedeutet, dass Attribute mit den Literalnamen "itemscope", "itemprop" usw. keine Mikrodatenverarbeitung für Elemente in anderen Namespaces wie SVG verursachen.

(a) Sie können ein bedeutungsloses div-Element hinzufügen:

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

Mikrodaten-Parser würden verstehen, dass der Inhalt des Elements div mit der Eigenschaft logo das Logo der Organisation enthält. Aber Da das svg -Element nicht Teil von HTML ist, sind keine Regeln definiert, um den richtigen Wert (= die URL des Bildes) daraus zu erhalten. Es ist daher sehr unwahrscheinlich, dass Microdata-Parser mit diesen Informationen etwas anfangen können (z. B. das Logo in einem anderen Kontext anzeigen).
Beachten Sie, dass die Verwendung von itemprop für ein div -Element führt zu einem Zeichenfolgenwert , was Schema.org für die Eigenschaft logo nicht erwartet.

(b) Sie könnten die Informationen mit dem "versteckten" link duplizieren:

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

(c) Sie können das Element img verwenden (laut caniuse.com Verwendung von SVG-Dateien in img hat mehr Unterstützung als Verwendung von SVG-Inline in HTML5 ):

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

(d) Vielleicht könnten Sie RDFa Lite stattdessen verwenden, aber ich bin nicht sicher, ob es für "gemischte" Namespaces funktioniert. Aber für SVG 1.2 Tiny RDFa kann im Element metadata verwendet werden .

6
unor

Sie können einfach auf Ihr Logo via Meta/Link-Tag verweisen, wie in der offiziellen Dokumentation vorgeschlagen: 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 : Geändert von <meta> zu <link />, wie von unor vorgeschlagen.

2
Peta Sittek

Eine andere Alternative wäre, Ihr Bild als .svg -Datei zu speichern. Sie können einen beliebigen Texteditor verwenden, um diese Datei zu erstellen und in Ihr SVG-Markup einzufügen. Setzen Sie dann das Markup so ein, wie Sie es für einen .png oder .jpg tun würden:

<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