SEOと聞くと、この様に思い浮かべる人が多いかもしれません。
- 検索エンジンに認識されやすいHTML構造
- キーワードを意識した記事やタイトル
しかし画像のSEOも意外と重要であるという事はご存知でしょうか？
正しく対策すれば、サイトのSEOにいい影響を与えるだけでなく画像検索の際、上位表示を狙う事も可能です。
そこでこの記事では画像SEOで最低限やっておくべき5つの基本対策について解説していきます。
暗記する必要はありません。
サイト制作のこのサイトを参考にしながら制作すれば大丈夫です。
いつでも見返せるようブックマーク推奨です！
画像SEOとは？
画像SEOとは検索エンジンに画像の内容を正しく伝え、検索結果で有利にするための施作です。
SEOと聞くとテキスト情報にばかり意識が向きがちです。
しかし画像はコンテンツの一部なので、画像も検索エンジンに情報として与える必要があります。
ところが検索エンジンは画像だけではその画像が具体的に何なのかまで判断することが出来ません。
そこで必要になってくるのが、
- alt属性
- ファイル名
- 構造化データ
です。
これらを活用して検索エンジンに画像の情報を伝えます。
画像SEOの重要性
画像SEOを最適化すればサイト全体のSEOにいい影響を与えるだけではありません。
ユーザーが画像検索をする際に画像検索内で上位表示させることが出来ます。
画像検索からの流入は意外と多いです。
例えば美容系であれば、
『二重整形 ビフォーアフター』
など施術の変化を画像検索で確認したい人は多くいます。
画像SEOを最適化させれば、こういったユーザーを画像検索経由で獲得する事も可能になります。
今すぐできる画像SEO対策5選
ここからは画像SEO対策で今すぐ出来ることを5選紹介していきます。
具体的には、こちらになります。
- alt属性の適切な設定
- 画像ファイル名の最適化
- ファイルサイズの圧縮と軽量化
- 画像のレスポンシブ対応
- LazyLoad（遅延読み込み）の実装
１つ１つ詳しく解説していきます。
alt属性の適切な設定
alt属性の適切な設定について解説する前に、alt属性を簡単におさらいします。
alt属性（alt="～"）は、画像が表示出来ない時に代わりに表示されるテキストです。
<img>タグに付与する属性です。
Web制作にまだ慣れていない方だと、このalt属性を何も記入しないまま放置する人が多いです。
alt属性は必ず、その画像を説明するテキストを埋め込む必要があります。
alt属性は、とりあえず文字を埋め込めばいいというわけではなく、文脈に対して自然なテキストを記述することが重要です。
例えば、美容クリニックのWebサイトで二重整形のビフォーアフター画像を掲載している場合、
<img src="before-after.jpg" alt="二重, 整形, ビフォーアフター, 美容, 効果">このように、キーワードだけを埋め込むのはNGです。
理由として、これを読んだだけでは画像の内容がイメージしにくいからです。
理想としては、
<img src="before-after.jpg" alt="二重埋没法の施術前と施術後の比較写真">この様に自然な文脈でキーワードを埋め込む事が大事です。
意識するポイントとして、画像が表示されなかった時に文章だけで画像の内容が伝わるかを意識することが重要です。
画像ファイル名の最適化
alt属性に画像の説明を加えるだけでは不十分です。
画像ファイル名を意識して意味のあるものにする必要があります。
画像ファイル名を決める際は、
- 名前だけでその画像が何か分かる
- 日本語は使わず英語
- 単語と単語を「ハイフン（-）」で繋ぐ
を意識することが重要です。
何度も二重整形を例に出して恐縮ですが、二重整形のビフォーアフターの画像のファイル名であれば、以下の様なファイル名が理想です。
<img src="eyelid-surgery-before-after.jpg">
このファイル名でいうと、
- eyelid＝瞼
- surgery＝手術
- before-after＝ビフォーアフター
といった具合に、単語を二重整形のビフォーアフターにちなんだファイル名で設定しています。
ファイルサイズの圧縮と軽量化
ファイルサイズが大きい画像をそのまま使うと、ページの読み込み速度が遅くなってSEOに悪影響を出します。
こちらのSEOに強いWebサイトの作り方でも解説してますが、ページの表示速度はSEOに影響を与える指標の１つです。
画像は2.5秒以内に表示されるのが理想で、それ以上掛かるとユーザーの離脱率が上がり、SEOの評価もマイナスになる可能性があります。
その対策としては、以下のような方法があります。
- 画像をWebP形式に変換してファイルサイズを軽くする
- 不要に高解像度すぎる画像を避ける
- 画像を圧縮する
その中でもWebPへ変換する事は特におすすめの手段です。
WebPとは
WebPは、Googleが開発した画像フォーマットです。
JPEGやPNGよりもファイルサイズが小さくて、画質も維持できます。
基本的に画像を使用する際はこのWebPに変換する事がベターです。
WebPへの変換方法
WebPへの変換や画像圧縮のツールとしてオススメできるのが、Squooshです。
Squooshとは、Googleが出している無料の画像圧縮ツールです。
画像を使用する際は基本的にSquoosh内で画像をWebPに変換すればOKです。
もし毎回WebPに変換するのが面倒で、WordPressを利用しているのであれば、「EWWW Image Optimize」というプラグインもオススメです。
EWWW Image Optimizeを使用すれば、自動で画像をWebPに変換してくれます。
基本的にはSquooshかEWWW Image Optimizeのどちらかを使用すればOKです。
画像のレスポンシブ対応
今の時代は、スマホ・タブレット・パソコンなど様々な画面サイズでサイトが見られます。
1枚の画像をすべてのデバイスに共通で使うと、スマホでもPC用の大きな画像を読み込むことになり、表示速度の低下につながる場合があります。
こうなると表示速度が低下するとSEOに悪い影響を与えます。
対策としてpictureタグを使ってサイズ別の画像を出し分ける必要があります。
pictureタグを使ったサイズ別の画像の分け方は、以下になります。
<picture>
<!-- スマホなど画面幅が600px以下のときは軽い画像（image-400.webp）を表示 -->
<source srcset="image-400.webp" media="(max-width: 600px)" type="image/webp">
<!-- その他の画面（600px超え）は大きい画像（image-800.webp）を表示 -->
<source srcset="image-800.webp" type="image/webp">
<!-- WebPに対応していないブラウザ用のフォールバック（JPEG画像） -->
<img src="image-800.jpg" width="800" height="600">
</picture>ポイントとして挙げられるのが以下になります。
type属性でWebP画像であることを指定imgタグの中で高さと横幅を指定
一つずつ解説します。
type属性でWebP画像であることを指定する意味
type属性でWebP画像であることを指定する意味は、WebP非対応ブラウザで画像が表示されないなどのエラーを防ぐためです。
WebPは、モダンブラウザではサポートされてますが、IEなど一部のブラウザではサポートされていません。
もしtype属性でWebP画像である事を指定しなければ、コードの意味が理解されず、imgタグの画像が表示されないという可能性があります。
これを防ぐため、Pictureタグを使うときは必ずsourceタグの中でtype="image/webp"を指定する様にしましょう。
imgタグの中で高さと横幅を指定
imgタグの中でwidthとheightを指定してるかと思いますが、これは高さと横幅をブラウザに予め伝えるためです。
ここに指定してるwidthとheightは元の画像サイズで大丈夫です。
元の画像サイズを記述する理由は、スペースをどのくらい使うか事前にブラウザに伝えるためです。
これを記述しないと、何もないスペースから画像が急に現れたとブラウザが判断します。
ブラウザは画像のサイズが分からないため、表示スペースを確保できず、後から画像が読み込まれた時にレイアウトがズレることがあります。
こうなるとユーザー体験が悪化したと判断され、SEOにも悪い影響を与えます。
必ずimgタグの中でwidthとheightで画像の元のサイズを記述する様にしましょう。
LazyLoad（遅延読み込み）の実装
LazyLoadとは必要な画像だけ読み込んで、見えてない画像は後から読み込む機能です。
ページの下の方にある画像は、最初の画面で読み込む必要はないです。
無理に読み込もうとするとページ全体の表示速度が遅れてしまうからです。
こうなるとSEOに悪い影響が出ます。
これを防ぐために、まだ表示されていない画像に関しては、 LazyLoadを適用します。
具体的には、imgタグに loading="lazy" を付けるだけです。
こんな感じです。
<img
src="image.jpg"
width="800"
height="600"
//ここで指定
loading="lazy"
>これで画面上に指定した画像が入るまでは読み込みがされません。
しかしこれはファーストビューで表示されない画像に限ります。
ファーストビューで表示される画像にはloading="eager"を記述します。
<img
src="image.jpg"
width="800"
height="600"
//ファーストビューの画像の場合はこれ
loading="eager"
>loading="eager"はloading="lazy"の逆で、すぐに画像を表示する様に指定する機能です。
この様に、
- ファーストビューの画像：
loading="eager" - ファーストビューの以外の画像：
loading="lazy"
と言うふうに使い分けをすればOKです。
まとめ
画像SEOは、テキストSEOに比べて軽視されがちです。
しかし、正しく対策すれば検索流入や表示速度の改善に直結する“隠れた重要施策”です。
特に近年は、WebP形式やLazyLoad、レスポンシブ画像対応など、技術的にも対応すべき点が増えてきています。
本記事で紹介した5つの基本対策は、どれもすぐに実践できるものばかりです。
- alt属性を自然に書く
- ファイル名は英語で意味が伝わるように
- WebP変換や画像圧縮で高速化
- デバイスごとの画像切り替え
- 表示タイミングに応じたLazyLoadの使い分け
これらを意識して画像を扱うだけで、あなたのWebサイトの品質は一段階レベルアップします。
また、SEOをさらに理解したい方には、SEOに強いWebサイトの作り方について解説しています。
ぜひとも合わせてお読みください。
この記事の内容を暗記する必要はありません。
ぜひこの記事をブックマークして、サイト制作やリライト時のチェックリストとして活用してみてください！
