目次

  1. なぜ画像SEOが重要なのか
  2. alt属性の正しい書き方
  3. SEOに効くファイル名の付け方
  4. 画像フォーマットの選び方
  5. 画像圧縮とサイズ最適化
  6. さらに効果を上げるテクニック
  7. まとめ

なぜ画像SEOが重要なのか

画像SEOは、見落とされがちですが非常に重要な施策です。

画像SEOのメリット

  • Google画像検索からの流入：画像検索経由のアクセスが増える
  • ページ表示速度の向上：最適化により読み込みが速くなる
  • ユーザー体験の向上：適切な画像はコンテンツの理解を助ける
  • アクセシビリティ対応：視覚障害者のスクリーンリーダー対応

知っていますか？

Googleの全検索のうち、約20%が画像検索と言われています。画像SEOを怠ると、この大きな流入機会を逃してしまいます。

alt属性の正しい書き方

alt属性（代替テキスト）は、画像が表示されない場合や、スクリーンリーダーが読み上げる際に使われるテキストです。

alt属性の基本ルール

  • 画像の内容を簡潔かつ具体的に説明する
  • キーワードを自然に含める（詰め込みすぎはNG）
  • 装飾目的の画像は空のalt（alt=""）でOK
  • 「〜の画像」「〜の写真」は不要

悪い例

  • alt="画像"（内容がわからない）
  • alt="IMG_0123.jpg"（ファイル名をそのまま）
  • alt="カフェ コーヒー 新宿 おしゃれ 人気"（キーワード詰め込み）

良い例

  • alt="新宿のカフェで提供されるラテアート"
  • alt="LIKaNONのホームページ制作実績：整体院サイト"
  • alt="SEO対策の効果を示すグラフ"

alt属性を書くときのコツ

「この画像を見えない人に説明するなら？」と考えると、適切なaltが書けます。

ポイント：alt属性は125文字以内が推奨されています。長すぎると途中で切られることがあります。

SEOに効くファイル名の付け方

画像のファイル名もSEOに影響します。アップロード前に適切な名前をつけましょう。

ファイル名のルール

  • 画像の内容がわかる英語のキーワードを使う
  • 単語はハイフン（-）で区切る
  • アンダースコア（_）やスペースは避ける
  • 日本語のファイル名は避ける
  • 短く簡潔にする

悪い例

  • IMG_0123.jpg
  • スクリーンショット 2024-12-01.png
  • photo_final_v2_new.jpg

良い例

  • cafe-latte-art-shinjuku.jpg
  • website-design-portfolio.png
  • seo-ranking-chart.jpg

なぜハイフンを使うのか

Googleはハイフンを単語の区切りとして認識しますが、アンダースコアは認識しません。

  • red-apple → 「red」と「apple」として認識
  • red_apple → 「redapple」として認識

画像フォーマットの選び方

用途に応じて適切なフォーマットを選ぶことで、画質と容量のバランスが取れます。

主な画像フォーマット

  • JPEG（.jpg）：写真向け。圧縮率が高く容量を抑えられる
  • PNG（.png）：ロゴや図解向け。透過が使える。写真には不向き
  • WebP（.webp）：次世代フォーマット。JPEGより30%軽量で高画質
  • SVG（.svg）：ロゴやアイコン向け。拡大しても劣化しない

WebPのすすめ

現在はWebP形式が推奨されています。JPEGと同等の画質で、ファイルサイズは25〜35%小さくなります。主要ブラウザはすべて対応しています。

使い分けの目安

  • 商品写真、人物写真 → JPEG or WebP
  • ロゴ、アイコン → SVG or PNG
  • 図解、スクリーンショット → PNG or WebP
  • 背景透過が必要 → PNG or WebP

画像圧縮とサイズ最適化

画像ファイルが大きいと、ページの読み込みが遅くなり、SEOにも悪影響を与えます。

画像サイズの目安

  • 1画像あたり200KB以下が理想
  • ヒーロー画像でも500KB以下を目標に
  • 横幅は表示サイズの2倍まで（Retina対応）

おすすめの圧縮ツール

  • TinyPNG：無料で使えるオンライン圧縮ツール
  • Squoosh：Google製。細かい調整が可能
  • ImageOptim：Mac用の圧縮アプリ
  • Photoshop：「Web用に保存」で最適化

実践テクニック：まず画像を適切なサイズにリサイズしてから圧縮すると、より効果的です。4000×3000pxの写真を800×600pxで表示するなら、先にリサイズしましょう。

さらに効果を上げるテクニック

1. 遅延読み込み（Lazy Loading）

画面に表示される直前まで画像を読み込まない技術です。初期表示を高速化できます。

HTML5ではloading="lazy"属性を追加するだけで実装できます。

2. レスポンシブ画像

srcset属性を使うと、デバイスの画面サイズに応じて最適な画像を配信できます。

スマホには小さい画像、PCには大きい画像を自動で出し分けられます。

3. 画像サイトマップ

サイトマップに画像情報を含めることで、Googleに画像をより正確に伝えられます。

4. 構造化データ

商品画像やレシピ画像には構造化データを設定すると、検索結果でリッチな表示になることがあります。

5. CDNの活用

画像配信に特化したCDN（Cloudflare、imgixなど）を使うと、表示速度が大幅に向上します。

まとめ

画像SEOは、少しの手間で大きな効果が得られる施策です。

画像SEOチェックリスト

  • alt属性に画像の内容を簡潔に記述する
  • ファイル名は英語キーワード＋ハイフン区切り
  • 用途に合った画像フォーマットを選ぶ（WebP推奨）
  • 1画像200KB以下に圧縮する
  • 表示サイズに合わせてリサイズする
  • loading="lazy"で遅延読み込みを設定

画像の最適化も含めたSEO対策をお考えなら、LIKaNONにご相談ください。サイト全体の画像最適化から、SEOに強いホームページ制作まで対応いたします。

画像最適化・SEO対策のご相談承ります

サイト全体の画像最適化、表示速度改善まで、まるっとお任せください。

無料相談はこちら