web-dev-qa-db-ja.com

Google SDTTは「記事」の画像としてSVGを受け入れません

現在、レビュー対象のアイテムのロゴ/メイン画像がSVGオブジェクトとして含まれているレビューWebサイトを作成しています。

残念ながら、Googleの構造化データテストツールでは、Articleの画像の値としてSVGを使用できません。不思議なことに、GoogleはSVGを組織のロゴとして受け入れます

とにかく、この問題を回避する方法はありますか?

  1. ArticleタイプのイメージとしてSVGを使用しますか?
  2. このエラーは本当にSEOまたはスニペットの問題を引き起こしますか?
  3. SVGファイルのJPG/PNGバージョンを定義できますが、ロードはできませんか? (まず、その画像を再度読み込むのに適した場所がないと思います。次に、読み込み時間とデータ使用が増加します(そのため、ユーザーが実際に使用しなくても、seoに悪影響を及ぼします)

更新: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:この例では、作成者、日付公開済み、および発行元が欠落していることはわかっていますが、それはここでは重要ではありません。

2
Justin

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はエラーを報告しますが、リクエストされた形式のバージョンが提供されている限り、ページがリッチリザルトに適しているかどうかには影響しません。

2
unor

これは完全に正しいです。 https://developers.google.com/search/docs/data-types/article にあるガイドラインを読みます-「ベクターを使用しないでください」と表示されるところはどこでも

1
Evgeniy