現在、レビュー対象のアイテムのロゴ/メイン画像がSVGオブジェクトとして含まれているレビューWebサイトを作成しています。
残念ながら、Googleの構造化データテストツールでは、Article
の画像の値としてSVGを使用できません。不思議なことに、GoogleはSVGを組織のロゴとして受け入れます。
とにかく、この問題を回避する方法はありますか?
Article
タイプのイメージとしてSVGを使用しますか?更新:Google SDTTが私に与えているエラー:
Blockquote https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/clippath.svg (画像に指定する値は有効なURLである必要があります。)
Htmlの例:
<section itemscope itemtype="http://schema.org/Article">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/clippath.svg"
alt="Logo" itemprop="image"/>
<div class="title-wrapper">
<h1 class="title" itemprop="name headline">
<strong>Title</strong>
<small>Review 2019</small>
</h1>
<span class="last-modified" itemprop="dateModified" content="2019-01-02">
<strong>Laatst bijgewerkt:</strong> 2 januari 2019</span>
</section>
注:この例では不要なコードをいくつか変更して削除しました。
注2:プライバシー保護のため、SVGの例を追加しました
注3:この例では、作成者、日付公開済み、および発行元が欠落していることはわかっていますが、それはここでは重要ではありません。
Googleの記事のリッチリザルト の場合、image
には次の要件があります(非AMPおよびAMPの場合):
画像は
.jpg
、.png
、または.gif
形式である必要があります。
(パブリッシャーのロゴ、ビデオのサムネイルも同様です。)
これらの要件に準拠したいが、訪問者にSVGを表示したい場合は、link
要素にリクエストされた形式で追加の画像を提供できます。
<link itemprop="image" href="image.png" />
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="contentUrl" href="image.png" />
</div>
ブラウザはこの画像をロードしません。
他の構造化データの利用者がSVGバージョンに関心を持っている可能性がある場合は、itemprop="image
を使用することもできます。 GoogleのSDTTはエラーを報告しますが、リクエストされた形式のバージョンが提供されている限り、ページがリッチリザルトに適しているかどうかには影響しません。
これは完全に正しいです。 https://developers.google.com/search/docs/data-types/article にあるガイドラインを読みます-「ベクターを使用しないでください」と表示されるところはどこでも