Googleのジョン・ミューラーが画像SEOのTIPSを共有

投稿日：2021年5月6日 by 

[レベル: 中級]

検索ユーザーのユーザー体験を向上させるための画像の最適化をコツを Google の John Mueller（ジョン・ミューラー）が Twitter の一連の投稿で共有しました。

この記事では、それらのコツの要点を僕からの補足を交えながら紹介します。

画像が重要かどうか調べる

まず、画像検索からのトラフィックが重要かどうかを調べます。

Search Console の検索パフォーマンスで「検索タイプ」を「画像」に指定すると画像検索のトラフィックに絞り込めます。

画像検索の検索パフォーマンス

画像検索から意味のあるトラフィックがたくさんあるのなら画像を最適化する価値があるでしょう。
逆に言えば、画像検索からのトラフィックがさほど重要ではなさそうなら、手間ひまをかけて改善する価値が本当にあるのかどうかを検討したほうがいいかもしれません。

PSI で検証

検索トラフィックが多いページを PageSpeed Insights で検証します。
画像に関する改善が提案されることがあります。

たとえば、次のような提案です。

  • 適切なサイズの画像を使う
  • 次世代フォーマットでの画像を配信する
  • オフスクリーン画像の遅延読み込み (Lazy-loading) する
  • 画像要素で width と height を明示的に指定する

画像の軽量化やサイズ変更、フォーマット変換（たとえば、WebP）にはさまざまなツールを利用できますが、Google が提供している Squoosh が便利です。

img タグでは、width 属性と height 属性を必ず指定します。
CLS の発生を防げます。

CMS のプラグインには、Lazy-loading や width/height を自動で設定してくれるものもあります。
WordPress 5.5 以降は ネイティブ Lazy-loading がデフォルトで有効になっています。

Webp 画像は Safari もサポートするようになりましたが、未サポートのブラウザもまだ使われています。
フォールバックとして <picture> タグを利用するといいでしょう。

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

上から順番に、サポートしているフォーマットの画像を 1 つだけ読み込みます。
ブラウザが WebP をサポートしていれば WebP を読み込むし、サポートしていなければ JPG を読み込みます。
img タグは、picture/srcset をサポートしていない古いブラウザ向けです。

さらに高度な技術として、レスポンシブ画像を使うこともできます。
レスポンシブ画像では、デバイスのスクリーンサイズに応じて適切なサイズの画像を出し分けます（スマホに、ファイルサイズが大きい高解像度の画像を配信する必要はないですよね）。

リダイレクト

JPG を Webp に置き換えたときのように、画像の URL が変わった場合は必ずリダイレクトします。

画像の処理にはウェブ検索に比べると時間がかかります。
新しい画像が画像検索にインデックスされるまで、画像検索からのトラフィックがなくなるかもしれません。
リダイレクトしておけば、途切れる間隔を防げます。

異なるホスト名（ドメイン名）の CDN サーバーに画像を移動する場合にも必ずリダイレクトを設定します。

画像最適化に役立つリソース

画像の最適化には次のリソースも参考になります。

Google の John Mueller 氏による画像最適化の TIPS は以上です。
参考にしましょう。