画像SEO完全ガイド
alt属性・WebP化・遅延読込・画像検索流入

公開日: 2026-05-24 所要時間: 約4分

Webサイトに画像は欠かせませんが、適切な最適化なしでは「重い・遅い・読まれない」原因になります。本記事では、検索順位とユーザー体験の両方に効く画像SEOの全テクニックを実装コード付きで解説します。

画像SEOがもたらす5つのメリット

本文SEOの強化: 画像近辺のテキスト・alt属性が記事の文脈理解を補強
Google画像検索からの流入: 商品・人物・図解は画像検索でも上位を狙える
Core Web Vitals 改善: WebP化＋遅延読込でLCP/CLSが大幅向上
アクセシビリティ向上: スクリーンリーダー対応で多様なユーザーに届く
SNSシェア時の見栄え: OGP画像の最適化でクリック率UP

alt属性の正しい書き方

alt属性（代替テキスト）は画像が表示されない時 / スクリーンリーダー利用時に画像の代わりに伝えられる説明文です。SEO観点でも重要な評価対象です。

画像のタイプ	推奨alt例
コンテンツ写真	「東京駅前のスターバックス店舗外観」（具体的・簡潔）
図解・グラフ	「2026年SEOツール市場シェア円グラフ。1位Saguru 35%、2位…」
ロゴ	「Saguru」（社名のみ。"Saguruロゴ"は冗長）
装飾画像	alt="" 空文字（スクリーンリーダーが読み飛ばす）
ボタン画像	「無料で試す」（ボタンの動作を書く）

⚠️ NG例: 「画像」「image001.jpg」「SEO SEO SEO キーワード」のような無意味な羅列や詰め込みは逆効果。

ファイル形式: WebP/AVIF への移行

2026年現在、JPG/PNG ではなく WebP（Chromium/Firefox/Safari 14+ 対応）または AVIF（より新しい・圧縮率高い）が標準です。

形式	サイズ削減率（JPG比）	ブラウザ対応
JPG	基準	全ブラウザ
PNG	+50%（むしろ大）	全ブラウザ
WebP	-25 〜 -35%	モダンブラウザ全対応
AVIF	-50 〜 -60%	Chrome/Firefox/Safari 16+

WebPへの一括変換はコマンドラインで簡単: cwebp -q 80 image.jpg -o image.webp。WordPressなら EWWW Image Optimizer プラグインで自動化できます。

picture要素でブラウザ別配信

AVIF → WebP → JPG の優先順でブラウザに適切な形式を渡すには <picture> 要素が便利です。

💡 実装例: <picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><img src="hero.jpg" alt="..." width="800" height="450" loading="lazy"></picture>

遅延読み込み（lazy loading）

ファーストビュー外の画像は loading="lazy" を付け、スクロールが近づいたら読み込む方式にします。初期表示が劇的に速くなります。

ファーストビュー画像: loading="eager"（または属性なし）
記事中盤以降の画像: loading="lazy"
必ず width と height を明示: CLS（レイアウトずれ）防止
decoding="async": 並行デコードでメインスレッド負荷軽減

画像サイトマップ

サイトに画像が多い場合、画像サイトマップ（image sitemap）を作るとGoogleが画像を効率よく発見できます。普通のsitemap.xmlに<image:image>を追加するだけ。

💡 商品EC・ストック写真サイト・写真ブログでは効果大。SaguruのコラムのようにSVGメインなら不要。

Google画像検索で上位を取る

ファイル名にキーワード: seo-keyword-tool.webp > img001.jpg
alt属性 + 周辺テキスト: 画像の文脈をGoogleが理解しやすく
構造化データ: Article/Product のimageプロパティで画像URLを明示
独自性: ストック写真より自社撮影写真のほうが評価高
サイズ・形式: 縦長・正方形画像はPinterest等にも応用可、流入チャネルが広がる

画像SEO含めた総合的なSEO診断を

SEO対策の最初の一歩はキーワード調査です。Saguruなら、Google・Bing・YouTube・Amazonのサジェスト、知恵袋の質問、上位サイトの見出し・共起語を 1画面で一括抽出。SEO難易度の自動判定で「狙い目キーワード」に 👑 マークが付きます。

無料で試す（登録不要）自サイトをSEO診断する

登録なしで1日5回まで無料／メール登録で1日30回／ベーシック月額270円

画像SEO完全ガイドについてよくある質問

alt属性は必ず設定すべきですか？

はい、すべての <img> タグにalt属性は必須です。装飾画像は alt="" （空文字）にすることでスクリーンリーダーが読み飛ばします。alt属性自体を省略するとアクセシビリティ違反になります。

WebPに対応していない古いブラウザの対策は？

<picture>要素で source（WebP/AVIF）と img（JPG/PNG）を併記すれば、対応ブラウザはWebP、非対応ブラウザはJPGを自動で読み込みます。サーバ側でAccept ヘッダを見て切り替える方法もあります。

画像のファイル名は日本語でも良いですか？

英数字＋ハイフンを推奨します（例: seo-tool-comparison.webp）。日本語ファイル名はURL エンコードで読みにくくなり、シェア時にも問題が出やすいためです。