構造化データで指定する画像にWebPフォーマットは使えるのか? JPG/PNG/GIFが推奨

[レベル: 上級]

Google 検索向けの構造化データで指定する画像フォーマットに、webp を使わないほうがよさそうです。
認識されないかもしれません。
ドキュメントで指示されている、.jpg.png.gif のいずれかの形式の画像を指定することが推奨されます。

高速化には WebP が有効だけれど

ページの読み込み時間を高速化するために WebP フォーマットは有効な策の 1 つです。
サポートするブラウザも増えてきました。
高速化に焦点を当てると WebP 画像の利用が推奨されます。

ところが、構造化データに目を向けてると事情が変わってきます。
Google 検索においては、構造化データで指定する画像は次の 3 種類のうちのいずれかのフォーマットが指示されています。

  • .jpg
  • .png
  • .gif

たとえば、記事構造化データの技術ドキュメントの image プロパティの説明には次のように書かれています。

画像の形式は、.jpg.png.gif のいずれかである必要があります。

ロゴの構造化データの技術ドキュメントには次のように書かれています。

.jpg.png.gif のいずれかの形式の画像を指定する必要があります。

.webp が含まれていません。

構造化データの画像はガイドラインに従うことを推奨

構造化データで指定する画像フォーマットに WebP は使えないのでしょうか?

Google の John Mueller(ジョン・ミューラー)氏は、リッチリザルト用の構造化データにはガイドラインで指示された画像フォーマット、つまり .jpg.png.gif を使うことを推奨しています。

Google 検索の、特にリッチリザルト向けに追加する構造化データには WebP 画像は今のところ使用しないほうが安心です。
ガイドラインに従って .jpg.png.gif を使いましょう(Google 検索に限っての話。構造化データ内の画像で .webp を指定することは何ら問題ない)。

WebP 非対応ブラウザ向けに JPG や PNG を提供しているはず

WebP が幅広くサポートされるようになってきたとは言え、すべてのブラウザがサポートしているわけではありません。
したがって、WebP 画像を使う場合でも、通常は非サポートブラウザへの対応として、JPG 画像や PNG 画像も準備しているはずです。
なので、構造化データに JPG や PNG を設定するのは困らないはずです。

picture タグを使えば、WebP 形式をサポートしているかしていないかによって、読み込ませる画像を切り替えることができますね(ミューラー氏も言及している)。

<picture>
    <source type="image/webp" srcset="flowwer.webp"> ⬅ WebP
    <source type="image/jpeg" srcset="flowwer.jpg"> ⬅ JPG
    <img src="flower.jpg">
</picture>