画像SEO WebP alt 設定完全ガイド【2026年最新】

画像SEO WebP alt 設定について調べている方は、「画像をWebPにすればSEOに効果があるのか」「alt属性には何を書けばよいのか」「ファイル名や画像サイズまで整える必要があるのか」と迷っているのではないでしょうか。

結論から言えば、画像SEOは検索順位を直接操作する裏技ではなく、検索エンジンとユーザーの双方に画像の意味を正しく伝え、ページの読みやすさと表示速度を改善するための基本施策です。Googleは、画像を関連するテキストの近くに配置し、画像の内容とページ文脈を説明する記述的なaltテキストを追加することを推奨しています。citeturn801191search12

この記事では、画像SEOの基本、WebP化のメリット、alt属性の書き方、ファイル名の付け方、画像サイズの最適化、表示速度との関係、公開後のチェック方法まで、中小企業やオウンドメディア担当者が実務で使える形で解説します。SEO全体の基礎を確認したい場合は、先に SEO対策とは？初心者でもわかる完全ガイド もあわせて確認してください。

画像SEOの基本

画像SEOとは、Webページ内の画像を検索エンジンとユーザーに理解されやすい状態へ整える施策です。具体的には、画像の内容、配置、alt属性、ファイル名、画像形式、サイズ、表示速度、モバイル表示、画像サイトマップなどを最適化します。

画像は、単なる装飾ではありません。サービス内容、商品イメージ、事例、図解、比較表、スタッフ写真、店舗写真など、読者の理解と信頼形成に関わる重要なコンテンツです。特にBtoBサービス、店舗ビジネス、士業、教育、健康、美容、Web制作、ECサイトでは、画像の品質や説明が問い合わせ率にも影響します。

Google検索では、画像はimgタグのsrc属性で参照されるBMP、GIF、JPEG、PNG、WebP、SVG、AVIFなどの形式がサポートされています。ファイル形式だけでなく、ファイル拡張子と実際の画像形式を一致させることも推奨されています。citeturn801191search1

項目	役割	実務での確認ポイント
画像形式	画質と容量のバランスを決める	写真はWebPやJPEG、透過画像はWebPやPNGを検討する
alt属性	画像の意味をテキストで補足する	画像内容と本文文脈に合う説明を書く
ファイル名	画像内容を管理しやすくする	意味のある英数字・ハイフン区切りにする
画像サイズ	表示速度と見やすさに影響する	表示幅以上に大きすぎる画像を避ける

WebP化のメリット

WebPは、Web向けに設計された画像形式です。GoogleのWebP公式情報では、WebPは可逆圧縮と非可逆圧縮の両方に対応し、Web上でより小さく豊かな画像を提供できる形式と説明されています。citeturn801191search2

WebP化の大きなメリットは、画質を一定程度保ちながらファイル容量を減らしやすいことです。GoogleのWebP公式ページでは、WebPの可逆画像はPNGより26％小さく、非可逆画像は同等品質のJPEGより25〜34％小さいと説明されています。citeturn801191search2 画像容量が小さくなれば、ページ表示速度の改善につながる可能性があります。

ただし、すべての画像を機械的にWebPへ変換すればよいわけではありません。ロゴ、図版、写真、アイキャッチ、透過画像、アニメーションなど、画像の用途によって最適な形式は変わります。2026年時点では、WebPに加えてAVIFもGoogle検索でサポートされています。Googleは2024年8月に、AVIFがGoogle画像検索を含むGoogle検索でサポートされるようになったと発表しています。citeturn801191search3

WebP化が向いている画像

• 記事のアイキャッチ画像
• 本文内の写真
• サービス紹介画像
• 店舗内観・外観写真
• 図解やバナー画像
• 容量が大きく、表示速度に影響している画像

画像形式の使い分け

形式	向いている用途	注意点
WebP	写真、アイキャッチ、バナー、透過画像	変換後の画質と表示崩れを確認する
JPEG	写真、人物、風景	圧縮しすぎると劣化が目立つ
PNG	ロゴ、透過画像、図表	写真では容量が大きくなりやすい
SVG	ロゴ、アイコン、線画	セキュリティ面に配慮し、信頼できるデータを使う
AVIF	高圧縮を狙いたい画像	運用環境や変換フローを確認して導入する

alt属性の書き方

alt属性は、画像の内容をテキストで説明するHTML属性です。画像が表示されない場合の代替テキストとして使われるほか、検索エンジンが画像とページ文脈を理解するための手がかりにもなります。Googleは、altテキストは画像とページ内容の関係を説明する短く記述的なテキストであり、検索エンジンが画像の内容と文脈を理解する助けになると説明しています。citeturn801191search12

初心者がやりがちな失敗は、alt属性にキーワードだけを詰め込むことです。たとえば、パーソナルジムのトレーニング風景画像に「パーソナルジム 横浜 安い おすすめ 女性 初心者」と書くのは不自然です。画像の内容を正確に説明しながら、必要であれば文脈に合うキーワードを自然に含めます。

よいalt属性の考え方

• 画像を見られない人にも内容が伝わるように書く
• 画像の内容とページ文脈を一致させる
• 不自然なキーワード詰め込みを避ける
• 装飾画像には空のalt属性を使うことも検討する
• 同じ画像でも、ページ文脈に応じて説明を調整する

alt属性の良い例・悪い例

画像内容	避けたい例	改善例
SEO記事の構成図	SEO SEO対策 上位表示	SEO記事の見出し構成と内部リンク設計を示した図
店舗の外観写真	店舗 おすすめ 人気	横浜市内にある店舗の外観と入口の写真
商品比較表の画像	比較 ランキング 安い	3つの商品プランの料金と機能を比較した表
装飾用の背景画像	マーケティング	alt="" として装飾画像として扱う

WordPressでのalt設定

1. WordPress管理画面で「メディア」を開く
2. 対象画像を選択する
3. 「代替テキスト」に画像内容を説明する文章を入力する
4. 記事内で画像を使う文脈に合っているか確認する
5. 装飾目的の画像は、必要に応じて空のalt属性を検討する

WordPressでは、メディアライブラリの代替テキストを変更しても、すでに記事内へ挿入済みの画像に反映されない場合があります。重要ページでは、記事編集画面のHTMLやブロック設定で、実際に出力されているalt属性を確認しましょう。

ファイル名の付け方

画像ファイル名は、画像管理と検索エンジンへの補助情報の両面で重要です。Googleは、ファイル名も画像の内容を理解するために利用される可能性があるため、短く説明的なファイル名を推奨しています。citeturn801191search1

よくある悪い例は、「IMG_1234.jpg」「スクリーンショット 2026-01-01.png」「名称未設定-1.webp」のようなファイル名のままアップロードすることです。これでは、画像内容を管理しにくく、検索エンジンにも画像の文脈を伝えにくくなります。

ファイル名の基本ルール

• 英数字の小文字を使う
• 単語はハイフンで区切る
• 画像内容がわかる名前にする
• 日本語ファイル名や空白を避ける
• キーワードを詰め込みすぎない
• 同じ画像を複数回使う場合は用途別に整理する

ファイル名の例

用途	避けたい例	改善例
SEO記事のアイキャッチ	IMG_001.jpg	image-seo-webp-alt-guide.webp
店舗外観	photo.png	yokohama-store-entrance.webp
料金比較表	比較表最新版.png	pricing-plan-comparison.webp

ファイル名は、画像そのものを説明する短い名前にします。記事タイトルをそのまま長く入れたり、同じキーワードを何度も繰り返したりする必要はありません。画像SEOでは、ファイル名、alt属性、画像周辺の本文、ページタイトルが自然に整合していることが大切です。

画像サイズの最適化

画像サイズの最適化とは、ページ表示に必要な画質を保ちながら、画像の横幅、縦幅、ファイル容量を適切に調整することです。たとえば、記事本文の表示幅が800px程度なのに、4000px幅の写真をそのままアップロードすると、余分なデータを読み込むことになり、表示速度に悪影響を与える可能性があります。

PageSpeed Insightsの画像最適化に関する説明では、画質への大きな影響を抑えながらファイルサイズを削減できる画像を検出すると説明されています。citeturn801191search17 画像が多いメディアサイト、店舗サイト、ECサイトでは、画像容量の見直しが表示速度改善の入口になります。

実務で使いやすい画像サイズ目安

画像用途	推奨の考え方	注意点
記事アイキャッチ	テーマの表示幅に合わせて横1200px前後から検討	SNSシェア画像として使う場合はOGP表示も確認
本文内画像	本文カラム幅に合わせて横800〜1200px程度から検討	拡大表示が必要な図解では可読性を優先
サムネイル	実際の表示サイズに近い画像を使う	大きな画像をCSSだけで縮小しない
図解・表	文字が読める解像度を確保する	重要な表は画像ではなくHTML表も検討する

画像最適化の手順

1. 記事や固定ページで使っている画像を一覧化する
2. 実際の表示幅に対して大きすぎる画像を確認する
3. 必要に応じて横幅をリサイズする
4. WebPなどの軽量形式へ変換する
5. TinyPNG、Squoosh、ImageOptim、EWWW Image Optimizer、ShortPixelなどで圧縮する
6. PageSpeed Insightsで改善前後を確認する
7. スマートフォン表示で画質と読みやすさを確認する

WordPressでは、アップロード時に複数サイズの画像が自動生成されます。ただし、テーマやブロックの設定によっては、不要に大きな画像が読み込まれることもあります。画像最適化プラグインを使う場合でも、元画像のサイズ、テーマの表示サイズ、srcsetの出力状況を確認しましょう。

表示速度との関係

画像は、ページ表示速度に大きく影響する要素の1つです。特にファーストビューに大きな画像を配置している場合、Largest Contentful Paint、いわゆるLCPに影響することがあります。LCPは、ページ読み込み中に主要コンテンツが表示されるまでの体感速度に関わる指標です。

画像の最適化では、容量を小さくするだけでなく、読み込みの優先順位も考える必要があります。たとえば、ファーストビューのメインビジュアルを遅延読み込みにしてしまうと、表示が遅く見える可能性があります。一方、画面下部の画像はlazy loadingを使うことで初期表示の負担を下げられます。

Googleは、遅延読み込みはパフォーマンスとUXの一般的なベストプラクティスである一方、正しく実装しないとGoogleにコンテンツが見えにくくなる可能性があると説明しています。citeturn801191search7 また、主要コンテンツをユーザー操作に依存して読み込む実装は、Googlebotが操作を実行しないため注意が必要です。citeturn801191search9

表示速度改善で見るべき項目

項目	確認内容	改善方法
画像容量	1枚あたりのファイルサイズが大きすぎないか	WebP化、圧縮、リサイズを行う
画像寸法	表示サイズより大幅に大きい画像を読み込んでいないか	適切なサイズの画像を生成・指定する
lazy loading	画面外画像だけを遅延読み込みしているか	ファーストビュー画像は優先読み込みを検討する
CLS	画像読み込み時にレイアウトがずれないか	width、height、aspect-ratioを適切に指定する

特にモバイル流入が多いサイトでは、スマートフォン回線での読み込みを前提に確認しましょう。デスクトップでは問題がなくても、スマートフォンでは画像が重く、ファーストビューの表示に時間がかかることがあります。PageSpeed Insights、Lighthouse、Chrome DevToolsを使い、画像がページ速度へ与える影響を確認します。

チェック方法と運用フロー

画像SEOは、記事公開時だけでなく、公開後の定期チェックも重要です。特にオウンドメディアでは、記事数が増えるほど、alt未設定、巨大画像、古いファイル形式、画像リンク切れ、同じ画像の重複利用が増えやすくなります。

実務では、画像アップロード前、記事公開前、公開後の3段階で確認します。画像制作担当、ライター、WordPress入稿担当、SEO担当が分かれている場合は、チェック項目を共有しておくと品質が安定します。

画像SEOチェックリスト

• 画像が記事本文の内容と関連している
• 画像の近くに関連する本文がある
• alt属性が画像内容を自然に説明している
• ファイル名が英数字・ハイフン区切りで意味を持っている
• WebPなど適切な形式に変換されている
• 表示サイズに対して画像が大きすぎない
• 圧縮後も文字や人物、商品が見やすい
• ファーストビュー画像が遅延読み込みになっていない
• 画像読み込み時にレイアウトが大きくずれない
• スマートフォン表示で見切れや崩れがない

確認に使えるツール

ツール	用途	見るポイント
PageSpeed Insights	表示速度と画像最適化の確認	適切なサイズ、次世代フォーマット、LCP画像
Google Search Console	検索パフォーマンス確認	画像検索流入、ページ単位の表示回数とクリック
Screaming Frog	画像一覧とalt確認	alt未設定、画像容量、画像URL
Chrome DevTools	実際の読み込み確認	Network、Lighthouse、画像の読み込み順
Squoosh	画像圧縮と形式変換	圧縮率、画質、WebP・AVIF変換

記事公開時の運用フロー

1. 記事構成段階で、必要な画像の種類を決める
2. 画像を作成・撮影し、用途に合うサイズへリサイズする
3. ファイル名を英語・ハイフン区切りで設定する
4. WebPなど適切な形式へ変換する
5. WordPressへアップロードし、alt属性を設定する
6. 本文内で画像の近くに関連説明を入れる
7. 公開前にスマートフォン表示とPageSpeed Insightsを確認する
8. 公開後にSearch ConsoleとGA4で流入・行動を確認する

画像SEOは、毎回の入稿ルールに落とし込むことが大切です。記事ごとに担当者の感覚で設定すると、alt属性の書き方やファイル名にばらつきが出ます。メディア運用では、画像命名ルール、alt設定ルール、圧縮ルール、アイキャッチサイズ、図解サイズをマニュアル化しておきましょう。

よくある質問

画像をWebPにすればSEO順位は上がりますか？

WebP化だけで検索順位が必ず上がるわけではありません。WebP化は画像容量を減らし、表示速度改善につながる可能性がある施策です。SEOでは、WebP化に加えて、本文の品質、検索意図、alt属性、ファイル名、内部リンク、ページ体験などを総合的に整える必要があります。

alt属性にはキーワードを入れるべきですか？

画像内容とページ文脈に自然に合う場合は、キーワードを含めても問題ありません。ただし、キーワードを詰め込むのは避けましょう。alt属性は、画像を見られない人にも内容が伝わるように、短く具体的に説明することが基本です。

装飾画像にもalt属性を書いたほうがよいですか？

装飾目的の画像で、読者理解に必要な情報を持たない場合は、空のalt属性を使うこともあります。逆に、図解、商品写真、店舗写真、比較表など、本文理解に必要な画像には、内容を説明するalt属性を設定しましょう。

まとめ

画像SEO WebP alt 設定の基本は、画像を軽くし、意味を明確にし、ページ内容と自然に結びつけることです。WebP化は表示速度改善に役立つ可能性がありますが、それだけでSEOが完結するわけではありません。alt属性、ファイル名、画像サイズ、本文との関連性、表示速度まで合わせて整える必要があります。

初心者はまず、既存記事のアイキャッチ画像と本文内画像を確認しましょう。ファイル名が「IMG_001」のままになっていないか、alt属性が未設定ではないか、画像が大きすぎないか、WebP化できる画像がないかをチェックします。そのうえで、PageSpeed InsightsやSearch Consoleを使い、改善前後の変化を確認しましょう。

画像SEOは、SEO全体の中では基礎施策の1つです。記事品質、内部リンク、E-E-A-T、表示速度、構造化データなどと組み合わせて運用することで、検索ユーザーにとって使いやすいページへ近づけられます。SEO全体の考え方は、SEO対策とは？初心者でもわかる完全ガイド を起点に整理しておきましょう。