素晴らしいロゴを作成し、AIおよびSVG形式で保存しました。ロゴがサイト全体に何度も表示され、ロゴをPNG形式で保存して不要なサーバー側のリクエストを行うよりも優れているため、サイトでSVGファイルを使用したいと思います。現在、これは以下を使用してうまく機能します:
<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 logo
マークアップを使用すると問題が発生します。を使用して:
<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>
予想どおり、W3C検証に失敗し、次のエラーメッセージが表示されます。
- この時点では、要素svgで属性itemscopeは許可されていません。
- この時点では、要素svgで属性itemtypeは許可されていません。
- 属性itempropは、この時点では要素画像で許可されていません。
これで、W3Cの検証は必須ではないことがわかりましたが、GoogleとW3Cの両方を満足させるソリューションが必要です。
私はいくつかのW3Cの第一人者が正しい方向に私を指すことができると確信しています、私はそれが1つの解決策になる可能性があることを知っているので、可能であればDATA URIを使用しないことを好みますが、間違っているかDATA URIのない場合は私を修正しますキャッシュできません。
Microdataは、HTML5で定義されている HTML elements でのみ使用できます。 HTML5によると、 svg
element はHTML名前空間にありません。 WHATWGのHTML仕様 明示的に言及 Microdataはsvg
に対して機能しません(2014-01-02に引用):
現在、
itemscope
、itemprop
、およびその他のmicrodata属性は、HTML要素に対してのみ定義されています。これは、「itemscope
」、「itemprop
」などのリテラル名を持つ属性によって、SVGなどの他のネームスペースの要素でマイクロデータ処理が発生しないことを意味します。
(a)意味のないdiv
要素を追加できます:
<div itemscope itemtype="http://schema.org/Organization">
<div itemprop="logo">
<svg>…</svg>
</div>
</div>
Microdataパーサーは、div
プロパティを持つlogo
要素のコンテンツに組織のロゴが含まれていることを理解します。 しかし、svg
要素はHTMLの一部ではないため、正しい値(=画像のURL)を取得するために ルールなし が定義されています。そのため、Microdataパーサーがこの情報を使用してやること(たとえば、ロゴを別のコンテキストで表示する)を行うことはほとんどありません。itemprop
要素でdiv
を使用すると、 文字列値になります になります。これは、Schema.orgが logo
プロパティに期待するものではありません。
(b)「隠された」link
を使用して情報を複製できます。
<div itemscope itemtype="http://schema.org/Organization">
<svg>…</svg>
<link itemprop="logo" href="logo.svg" />
</div>
(c)img
要素を使用できます(caniuse.comによると img
_でSVGファイルを使用 は HTML5でSVGインラインを使用 よりも多くのサポートがあります):
<div itemscope itemtype="http://schema.org/Organization">
<img itemprop="logo" src="logo.svg" alt="ACME Inc." />
</div>
(d)たぶんRDFa Liteを使用できます 代わりに ですが、「混合」名前空間で機能するかどうかはわかりません。ただし、SVG 1.2 Tinyの場合、 RDFaはmetadata
要素で使用できます 。
公式ドキュメントで提案されているように、meta/linkタグでロゴを参照するだけです。 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:unorの提案に従って、<meta>
から<link />
に変更されました。
もう1つの方法は、画像を.svg
ファイルとして保存することです。任意のテキストエディターを使用してこのファイルを作成し、SVGマークアップに貼り付けることができます。次に、.png
または.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>