ホームページの各ページに設置された画像にSEOを施すことで、ホームページの表示速度改善といったSEO、画像の意味付けによるページ品質の向上、画像検索からの検索流入といったSEO効果を期待することができます。
画像ファイルは、ファイルサイズが大きいためページ内に高解像度の画像や無駄な画像が多いと、ページの読み込み時間が遅れます。Core Web Vitalsでは、LCP(Largest Contentful Paint)=「もっとも大きなコンテンツ要素が表示されるまでの時間」が重要指標の一つとされており、LCPが遅いとSEO上のユーザー体験の評価が下がり検索順位にも悪影響を与える可能性があります。HTMLやCSSでの縮小指定ではなく画像自体の解像度を適切に下げる、表示領域に対して適切なピクセルサイズで画像を用意する等の基本的な対策から、次世代フォーマットの利用まで画像の軽量化、SEOにはたくさんの方法があります。
表示速度向上のためにファイルサイズを軽量化
画面上ほとんど同じように見える画像も実はファイルサイズが大きく異なる場合がよくあります。ホームページにファイルサイズが大きい画像が複数設置されているとその分だけ通信に負荷がかかり、ページの表示速度に影響を及ぼしSEOに悪影響を与えます。画像に対する軽量化などのSEOを手がけることで、SEO対策としての効果だけでなくページの離脱率低下などにも良い影響を与えます。
- 画像の圧縮:ツールでJPEG/PNGを非劣化圧縮
- 次世代フォーマットへの変換:WebP、AVIFなどは従来の形式より軽量
- サイズ調整:表示サイズ以上の高解像度画像を読み込まない
- Lazy Load(遅延読み込み):ファーストビューに関係ない画像は後で読み込む設定
ファイル形式の最適化と次世代フォーマットへの変換
Web画像の従来形式としては、JPEG(写真に適している/圧縮可)、PNG(背景透過やロゴなどに使用/高画質)などがありますが、これを次世代フォーマットWebP(ウェッピー JPEGより最大30〜40%軽量。ほぼすべての主要ブラウザで対応)やAVIF(さらに圧縮率が高く、今後の主流候補。対応ブラウザの範囲には要注意)に変換することで画像のファイルサイズを軽量化することができます。
画像の非同期デコードや遅延読み込み
画像の非同期デコードや遅延読み込みもSEOには有効的です。ページを表示した瞬間にすべての画像を読み込むのではなく、表示領域(ビューポート)に入ったタイミングで画像を読み込むことで初期表示速度を大幅に改善できます。
画像のdecoding属性「async」、loading属性「lazy」
画像SEO 意味付けとページ品質の向上
画像に対する適切な代替テキストのSEO設定によって、ホームページ内の設置画像がどういった内容の画像かを検索エンジンに示し、設置画像や、画像が設置されたページの品質を向上させることができます。
さらに画像にキャプション設定を施すとより良く検索エンジンに画像の意味を伝えることができます。
画像検索用のSEO
また、ページ内に適切に設置された画像は、しっかりとSEOを施すことによって検索エンジンの画像検索においても表示される可能性が高まるため、画像検索経由でのホームページへのアクセスが向上します。
表示速度だけでなく、画像そのものを検索対象とするSEO対策も重要です。画像が何を意味するかを検索エンジンに伝えるための代替テキスト指定alt属性は必須項目となっていますので、必ず設定するようにしましょう。