画像SEOとは?ファイル名・alt属性・容量の整え方

SEO・集客
IMAGE SEO & PERFORMANCE GUIDE

画像SEOとは?
ファイル名・alt属性・容量の整え方

画像SEOとは、ホームページに掲載する写真や図を、 利用者・検索エンジン・ブラウザが理解しやすく、 快適に表示できる状態へ整えることです。 画像の内容を説明するalt属性、 短く具体的なファイル名、 ページ本文との関連性、 適切な画像形式と圧縮、 画面サイズに応じた画像配信などを組み合わせます。 alt属性へ検索キーワードを大量に詰め込んだり、 すべての画像へ同じ説明を設定したりすることが 画像SEOではありません。 装飾だけの画像には空のalt属性を使い、 情報を伝える写真や図には、 そのページ内で画像が果たす役割を簡潔に説明します。 また、撮影時の大きな画像をそのまま掲載すると、 表示速度やCore Web Vitalsへ影響する可能性があります。 本記事では、ファイル名・alt属性・キャプションの違い、 JPEG・PNG・WebP・AVIF・SVGの使い分け、 WordPressのメディアライブラリで確認する場所、 遅延読み込みや画像サイズ指定、 Google画像検索へ見つけてもらうための基本まで解説します。

alt属性 ファイル名 画像圧縮 WordPress
内容の理解 altと周辺文章で
意味を伝える

画像単体ではなく、見出し・本文・キャプションを含むページ全体で内容を説明します。

表示速度 表示サイズに合わせ
形式と容量を調整

数MBの原本をそのまま使わず、画質を保てる範囲で縮小・圧縮します。

表示の安定性 幅・高さを指定し
画像領域を確保

読み込み前から画像の比率を伝え、文章やボタンの予期しない移動を防ぎます。

SECTION 01

画像SEOは検索キーワードの設定ではなく 発見・理解・表示・操作を整えること

画像検索への掲載だけでなく、通常の検索結果やページの利用体験にも関係します。

FIVE ELEMENTS 発見・内容・
軽さ・安定・権利

Googleは、画像のaltテキストだけで内容を判断するわけではありません。 画像の近くにある本文やキャプション、 ページ全体の主題、ファイル名、 コンピュータービジョンなど複数の情報を組み合わせて、 画像の内容と掲載ページとの関係を理解します。

そのため、画像だけを最適化しても、 ページ本文が画像と無関係だったり、 利用者が必要とする説明が不足していたりすれば、 十分な画像SEOとは言えません。 画像は関連する文章の近くへ配置し、 ページの目的を補足する役割を持たせます。

さらに、画像容量が大きすぎると表示開始が遅れ、 大きなメイン画像がLCPへ影響することがあります。 幅・高さを指定しない画像は、 読み込み後に本文を押し下げてCLSを悪化させる場合があります。 検索と表示速度を別作業にせず、同時に整えることが重要です。

整える要素
目的
代表的な確認事項
発見されやすさ
Googleが画像URLを取得できる
標準的なimg要素、src属性、クロール許可、必要に応じた画像サイトマップを確認します。
内容の理解
画像の意味と役割を伝える
alt属性、ファイル名、本文、見出し、キャプションの整合性を確認します。
表示速度
必要以上の通信を減らす
画像寸法、容量、圧縮、形式、srcset・sizesを確認します。
表示の安定性
読み込み時のズレを防ぐ
width・height、縦横比、埋め込み領域を確認します。
権利・信頼性
安全に掲載・再利用する
撮影者、使用許可、ライセンス、人物・店舗の掲載同意を確認します。
Google検索が対応している画像形式には、 BMP、GIF、JPEG、PNG、WebP、SVG、AVIFがあります。 ただし、対応している形式が常に最適とは限りません。 写真・ロゴ・透過・アニメーションなど、 画像の用途とブラウザ表示を踏まえて形式を選びます。
SECTION 02

ファイル名は短く具体的にし 画像を関連する文章の近くへ置く

ファイル名は補助的な手掛かりです。ページ本文とalt属性を優先します。

FILENAME ファイル名
短く内容が分かる名前

IMG_4837.jpgimage1.pngのままではなく、 写真の対象が分かる名前へ変更してからアップロードします。

例:sendai-cafe-counter.jpg、website-contact-form.webp
PAGE CONTEXT 周辺の文章
画像と同じ話題を説明

施工事例の写真なら、 対応内容、地域、期間、変更点などを近くの本文で説明します。

画像だけを並べるより、利用者とGoogleが意味を理解しやすくなります。
CAPTION キャプション
表示して伝える補足説明

撮影場所、施工前後、商品名、 図の結論など、読者にも見せたい情報を画像の近くへ表示します。

すべての画像へ必須ではなく、理解を助ける場合に使います。
悪い例
改善例
考え方
IMG_0012.jpg
sendai-salon-reception.jpg
画像の主な対象を短い単語で表します。
ホームページ-制作-仙台-格安-SEO.jpg
responsive-website-sample.webp
キーワードを羅列せず、画像そのものの内容を表します。
同じ画像を別名で何度もアップロード
同じ画像URLを再利用
不要な複製とクロール・管理の負担を減らします。
画像だけを連続掲載
関連する見出し・本文の近くへ配置
何を示す画像なのか、ページの文脈から理解できる状態にします。
01
アップロード前に不要部分を切り抜く

画像の目的を明確にし、 個人情報・不要な背景・位置情報の写り込みも確認します。

選定
02
内容を表すファイル名へ変更する

英数字とハイフンを使い、 短く読みやすい名前にすると管理しやすくなります。

命名
03
対応する見出し・本文を用意する

写真や図が証明・補足している内容を、 テキストでも分かるように説明します。

文脈
04
必要な画像だけを掲載する

同じ意味の写真を大量に並べず、 比較・信頼・理解に役立つ画像を選びます。

整理
WordPressへアップロードした後に画像ファイル名を変更すると、 既存の画像URLや生成済みサイズとの関係が複雑になることがあります。 ファイル名はできるだけアップロード前に整え、 既に公開中の画像は、URL変更の影響を確認してから差し替えましょう。
SECTION 03

alt属性は画像の見た目を並べるのではなく その場で必要な意味と役割を伝える

同じ画像でも、掲載する文脈によって適切なaltテキストは変わります。

ALT TEXT 見えない場合にも
必要な情報を伝える

alt属性は、画像を表示・認識できない利用者へ、 画像が伝えている内容や機能をテキストで提供するためのものです。 スクリーンリーダーを利用する人、 画像が読み込まれない環境の人にとって重要であり、 Googleも画像の主題を理解する情報として利用します。

情報を伝える写真では、 「誰・何が・どのような状態か」を ページの目的に必要な範囲で簡潔に説明します。 画像内の文字が本文に存在せず、 読者が知る必要がある場合は、 その文字内容もaltへ含めることを検討します。

一方、区切り線、背景模様、雰囲気づくりだけの写真など、 本文の理解に情報を追加しない装飾画像は、 alt=""の空のalt属性にします。 alt属性そのものを省略するのではなく、 意図的に空へすることで、支援技術へ装飾であることを伝えます。

画像の役割
altの考え方
店舗・人物・商品を説明
内容を簡潔に説明する
「木製カウンターと6席のあるカフェ店内」
施工前後の比較
どちらの状態かを明示する
「外壁塗装後の白い二階建て住宅」
グラフ・図表
結論を本文でも説明する
altだけへ全データを詰めず、要点をalt、詳細を近くの本文や表へ記載します。
リンクになっている画像
リンク先・機能を伝える
ロゴ画像だけでトップへリンクする場合は「○○公式サイト ホーム」などを検討します。
周辺本文と同じ装飾画像
空のalt属性
alt=""
キーワードを大量に詰め込む

読み上げが不自然になり、利用者体験を悪化させます。 Googleからスパムと見なされる可能性もあります。

すべて「画像」「写真」にする

何が写っているか分からないため、 情報画像では具体的な内容を説明します。

ファイル名をそのまま入れる

「IMG_3827.jpg」では意味を伝えられません。 画像の役割に合わせて書きます。

キャプションと長文を丸ごと重複

周辺に同じ説明がある場合は、 読み上げの重複を避けるよう簡潔にします。

装飾画像まで詳しく説明

ページの理解に不要なら空のaltへし、 読み上げの負担を増やさないようにします。

一つの画像へ常に同じaltを使う

WordPressの初期値をそのまま使わず、 掲載場所ごとの文脈を確認します。

alt属性に「最適な文字数」という一律のSEO基準はありません。 短さだけを目的に情報を欠かしたり、 長さを稼ぐために説明を増やしたりせず、 画像を見られない人がその場で必要とする情報を過不足なく伝えます。
SECTION 04

表示する大きさへ縮小し 用途に合う形式で画質と容量を調整する

一律のKB目標ではなく、画像の用途・寸法・画質・表示位置で判断します。

画像形式
向いている用途
注意点
JPEG
店舗・人物・料理・施工などの写真
写真を比較的小さくできますが、透過には対応せず、保存を繰り返すと劣化します。
PNG
透過画像・図・細い線・文字入り画像
写真では容量が大きくなりやすいため、用途を限定します。
WebP
写真・透過画像の軽量化
既存JPEG・PNGより小さくできる場合があります。変換後の画質を目視確認します。
AVIF
高圧縮の写真・ビジュアル
高い圧縮効率を期待できますが、生成環境・編集・互換性を確認します。
SVG
ロゴ・アイコン・単純な図形
拡大しても鮮明ですが、外部入手ファイルの安全性とWordPressのアップロード制限に注意します。
GIF
短い単純なアニメーション
長い・大きなアニメーションは容量が増えやすく、動画形式の方が適する場合があります。
01
実際の表示幅を確認する

記事本文、カード、メインビジュアルなど、 パソコンとスマホで表示される最大幅を確認します。

寸法
02
必要以上に大きい原本を縮小する

数千ピクセルの撮影原本を、 数百ピクセルの枠へそのまま配信しないようにします。

縮小
03
用途に合う形式を選ぶ

写真、透過、図、ロゴ、アニメーションを分け、 画質と容量を比較します。

形式
04
目視できる範囲で圧縮する

商品の細部、施工状態、文字、 肌や料理など、必要な情報が失われていないか確認します。

圧縮
05
レスポンシブ画像を利用する

srcsetとsizesにより、 端末の画面幅へ合う画像候補をブラウザが選べる状態にします。

配信
06
PageSpeed Insightsで配信サイズを確認する

適切なサイズ、次世代形式、LCP要素などの診断から 大きな改善候補を探します。

検証
「画像は必ず100KB以下」などの一律ルールは、 すべてのサイト・画像へ適用できません。 大きなメイン写真と小さなアイコンでは必要な画質も寸法も異なります。 表示品質を保てる最小容量を目指し、 ページ全体の通信量と表示速度で判断しましょう。
SECTION 05

画面外の画像は遅延読み込みし 主要画像は早く読み込める状態にする

lazy loadingは一律に付けるのではなく、画像の表示位置で使い分けます。

LOADING STRATEGY 上部は優先
下部は遅延

loading="lazy"を設定すると、 画面から離れた画像の読み込みを 必要になるまで遅らせることができます。 記事後半の写真や一覧の下部などでは、 初期表示の通信量を減らす助けになります。

ただし、ファーストビューのメイン画像や、 LCPの対象になる可能性が高い画像まで遅延読み込みすると、 肝心な内容の読み込み開始が遅れる場合があります。 画面上部の主要画像は通常読み込みまたは適切な優先設定とし、 実際のLCP要素を測定して判断します。

また、遅延読み込みする画像にも width・height属性やCSSのaspect-ratioなどで 表示領域を事前に確保します。 読み込み後に画像の高さが追加されると、 本文やボタンが動き、CLSを悪化させる可能性があります。

画像の位置・用途
読み込み方針
確認事項
ファーストビューのメイン画像
原則として遅延を避ける
LCP対象、画像容量、読み込み開始、fetchpriorityなどを確認します。
記事本文の下部画像
lazy loadingを検討
スクロール前の通信を減らしつつ、幅・高さを指定します。
商品・施工の一覧画像
画面外を遅延読み込み
最初に見える行と、下部の画像を同じ扱いにしないよう確認します。
背景画像
CSSと読み込み優先度を個別確認
GoogleはCSS背景画像を画像検索用として通常のimg要素と同じ方法では扱いません。
01
width・heightを付ける

ブラウザが読み込み前から縦横比を把握でき、 画像領域を予約しやすくなります。

02
CSSでレスポンシブにする

max-width:100%などを利用し、 画面幅を超えずに比率を保って表示します。

03
主要画像を特定する

思い込みで設定せず、 PageSpeed InsightsやDevToolsでLCP要素を確認します。

04
変更後に表示を確認する

スマホ・パソコン、初回表示、 キャッシュなしの状態で崩れや遅延を確認します。

遅延読み込み・画像変換・CSSやJavaScriptの最適化を 複数のプラグインで重ねると、 画像が表示されない、二重読み込み、 画質低下、レイアウト崩れが起こる場合があります。 画像最適化の担当機能を整理し、変更ごとに実機確認してください。
SECTION 06

WordPressの自動機能を活用し 公開HTMLと画像URLを実際に確認する

メディアライブラリの入力内容と、ページに出力されたHTMLが一致するとは限りません。

01
アップロード前に名前・寸法・形式を整える

WordPressへ撮影原本をそのまま入れず、 用途に合う画像を準備します。

準備
02
メディアライブラリで情報を確認する

ファイル名、形式、容量、寸法、 altテキスト、タイトル、キャプションを確認します。

管理
03
掲載場所ごとにaltを調整する

メディアライブラリのaltを初期値として使いながら、 ブロックやテンプレートの文脈に合わせます。

文脈
04
生成された画像サイズを利用する

WordPressは複数サイズを生成し、 srcset・sizesにより端末に合う画像を選びやすくします。

配信
05
公開ページのHTMLを確認する

img、src、srcset、sizes、alt、 width、height、loadingの出力を確認します。

実体
06
Googleが取得できる状態を確認する

ページと画像がrobots.txtや認証で遮断されず、 正常な画像URLを返しているか確認します。

発見
WordPress項目
役割
注意点
Alt Text
画像の代替説明
画像の役割を表し、キーワード欄や画像タイトルとして使いません。
Title
メディア管理・テーマ表示用の名称
alt属性と同じ役割ではなく、テーマによって表示方法が異なります。
Caption
読者へ表示する補足
撮影場所、商品名、図の説明など、見せる必要がある場合に使います。
Resolution・画像サイズ
ページへ挿入する画像寸法
小さな表示枠へフルサイズ画像を選び続けないようにします。
01
標準的なimg要素を使う

Googleはimg要素のsrc属性から画像を見つけます。 重要画像をCSS背景だけへ置かないようにします。

02
画像URLを統一する

同じ画像を複数URLで配信せず、 キャッシュ・管理・クロールを整理します。

03
必要なら画像サイトマップ

JavaScriptやCDNなどで通常クロールから見つけにくい画像がある場合に検討します。

04
Search Consoleで掲載ページを見る

画像単体だけでなく、 画像を掲載するページがクロール・インデックス可能か確認します。

WordPressはアップロード画像から複数サイズを作り、 画像マークアップへsrcsetとsizesを追加する仕組みを備えています。 ただし、テーマ・プラグイン・独自HTMLによって出力が変わるため、 「WordPressだから自動で最適」と決めつけず公開ページを確認しましょう。
SECTION 07

掲載前に画像の役割を決め 公開後にHTML・速度・見え方を確認する

画像SEOはアップロード時だけでなく、差し替え・更新・削除まで含む運用です。

01
画像を掲載する目的を決める

商品理解、店舗案内、事例証明、 手順説明、装飾のどれかを明確にします。

目的
02
権利・個人情報・掲載同意を確認する

自社撮影、素材サイト、提供写真、 人物・車両・住所などの扱いを確認します。

権利
03
ファイル名・寸法・形式・容量を整える

アップロード前に不要部分を切り抜き、 表示用途へ合わせて軽量化します。

準備
04
altと周辺文章を作る

情報画像は意味を説明し、 装飾画像は空のalt属性にします。

説明
05
読み込み位置と画像領域を設定する

上部の主要画像と画面外画像を分け、 width・heightを設定します。

表示
06
公開後に実機と測定ツールで確認する

スマホ表示、画質、alt、画像URL、 PageSpeed Insights、リンク切れを確認します。

検証
画像を掲載する目的が明確である
使用許可・著作権・人物の同意を確認した
不要な個人情報や位置情報の写り込みがない
アップロード前に具体的なファイル名へ変更した
キーワードをファイル名へ羅列していない
表示枠より極端に大きな画像を使っていない
写真・透過・図に合う画像形式を選んだ
必要な画質を保って圧縮した
情報画像へ文脈に合うaltを設定した
装飾画像へ空のalt属性を設定した
altへキーワードを大量に詰めていない
画像を関連する見出し・本文の近くへ置いた
必要な画像へキャプションを付けた
width・heightまたは縦横比を指定した
画面上部の主要画像を遅延読み込みしていない
画面外の画像へ適切な遅延読み込みを使った
srcset・sizesで端末に合う画像を配信している
公開HTMLのsrc・alt・loadingを確認した
Googlebotが掲載ページと画像を取得できる
PageSpeed Insightsと実機で表示を確認した
既存サイトの画像を一括変換・一括圧縮する前に、 必ずバックアップを取り、 代表ページで画質・URL・レイアウト・SNS表示・構造化データを確認してください。 元画像を削除すると復元できない設定もあるため、 少数の画像で検証してから範囲を広げましょう。
IMAGE QUALITY & PERFORMANCE

写真の魅力を残しながら 検索・表示速度・問い合わせ導線を整える

画像選定、alt、容量、表示位置、スマホ表示を一つの作業として確認しましょう。

画像SEOの基本 選定から公開確認まで
5要素
内容・名前・alt・容量・表示

合わせて確認したい内容

  • 写真の目的と掲載場所
  • ファイル名と画像URL
  • alt属性とアクセシビリティ
  • JPEG・PNG・WebP・AVIFの使い分け
  • 画像寸法・圧縮・レスポンシブ配信
  • LCP画像と遅延読み込み
  • width・heightとCLS対策
  • WordPressのメディア管理

※画像SEOの調整によって、 Google画像検索への掲載、検索順位、アクセス数、 問い合わせ数が必ず向上することを保証するものではありません。 ページ本文の品質と、画像が利用者へ提供する価値を合わせて改善してください。

表示速度の改善方法を見る →
altへキーワードを詰める前に
画像の意味・軽さ・表示位置を整えよう

画像SEOでは、 画像の内容を表すファイル名、 文脈に合ったalt属性、 関連する本文とキャプション、 用途に合う画像形式と容量を整えます。 装飾画像は空のalt属性とし、 画面上部の主要画像と画面外画像で読み込み方を分けます。 WordPressの自動レスポンシブ画像を活用しながら、 公開HTML、スマホ表示、PageSpeed Insightsまで確認しましょう。

画像SEO・alt属性・画像表示の最適化について

本記事は、2026年7月時点で公開されている Google検索セントラル、web.dev、W3C WAI、 WordPress公式情報を参考に作成しています。 Google画像検索、対応画像形式、ブラウザの画像読み込み、 WordPressの画像出力仕様は変更される場合があります。 最新の公式情報と公開ページの実際のHTMLを確認してください。