【2026年】画像のSEO対策とalt・配置・軽量化・表示の確認方法

画像のSEO対策は、本文に合う画像を選び、内容が伝わる説明と、検索エンジンが発見できる実装を整えることから始めます。altの設定だけでなく、掲載位置、ファイル名、寸法・容量・画質、PCとスマートフォンでの見え方までつなげて確認しましょう。

商品写真なら色や形を判断できること、業務図解なら担当や受渡しの関係を理解できることが大切です。画像を増やすこと自体を目的にせず、読者のどの疑問を解決するかを決めます。この記事では、画像の選定から公開後の確認までを、用途別のalt例と担当者へ渡せる点検票で説明します。

SEOにおける画像の役割と本文との関係を整理する

画像検索での発見と掲載ページでの理解をつなぐ

画像は、文章だけではつかみにくい形・位置・工程を伝える手段です。たとえば業務引継ぎの記事で「作成した資料を確認して担当者へ渡す」と書くだけでは、誰が何を点検するのかが曖昧になります。資料作成から内容の照合、完成資料の受渡しまでを図にすると、前後の関係をまとめて把握できます。

検索からの入口にもなります。Googleには画像検索のほか、通常の検索結果などで画像を見つけられる機能があります。商品写真を見て形や色に関心を持った人が、その画像の掲載ページへ進み、仕様や使い方を読む流れを考えましょう。写真に写っている商品と本文の商品名・説明が一致していれば、訪問後も必要な情報を探しやすくなります。

一方、画像が検索で見つかることと、掲載ページで問い合わせや購入につながることは別の課題です。画像だけで説明を終えず、本文に判断材料を置き、次に読む情報へつなげます。掲載やaltの調整によって、特定の順位や流入数が約束されるわけではありません。

画像を加える前に補う疑問を一文で決める

画像を外したときに失われる説明があるかを採用の基準にします。「どの部署へ何を渡すかを示す」「椅子の背もたれと肘掛けの形を示す」のように、読者が分かることを一文にしてください。「見栄えをよくする」だけなら、その場所に説明画像が必要かを見直せます。

独自の画像は記事固有の例を示すのに役立ちますが、独自性だけで説明の質は決まりません。本文と関係の薄い写真を増やすより、疑問に答える画像を必要な箇所に置く方が、読み進める目的に合います。枚数や滞在時間だけをSEOの成否と結び付けず、画像の役割とページ全体の回答を先に整えましょう。

伝えたい内容に合う画像と配置を選ぶ

実物・関係・操作のどれを見せるかで選ぶ

画像の種類は、読者にしてほしい判断から選びます。商品の外観を確かめたい人には写真、作業の順序や担当間の受渡しを知りたい人には図解、設定箇所を探す人には実際の画面が適しています。同じテーマの記事でも、疑問が変われば使う素材も変わります。

たとえばオフィス用の椅子を説明するなら、全体の形を見せる写真と、肘掛けや背もたれの細部を見せる写真では用途が異なります。色を選ぶ段落には対象の色が分かる写真を、利用場面の説明には机との位置関係が分かる写真を置きます。写真から読み取れない座り心地や耐久性まで、見た目だけで断定しないことも必要です。

業務引継ぎなら、資料を作る、確認する、渡すという状態の変化を図にします。操作説明なら、対象の画面名と操作する場所、操作後の状態が読めるスクリーンショットを用意します。関係を示す概念図と、実際の操作を確かめる画面は、使う目的を分けてください。

説明する段落の近くへ置き、重要事項を本文にも残す

画像は、その内容を説明している本文の近くに配置します。商品写真を記事冒頭へまとめ、商品ごとの説明が離れた位置にあると、読者は写真と説明を照合しにくくなります。重要な画像を早く見せる場合も、何の画像か分かる見出しや文章と組み合わせましょう。

図の中に条件や注意点を詰め込むと、小画面で読めなくなります。図では工程の関係を示し、担当範囲や例外条件は本文や表で説明するなど、役割を分担します。画像だけの見出しや画像内だけの料金・仕様に頼らず、ページの文字としても内容を残してください。キャプションを付ける場合は、対象や撮影条件など必要な補足を選び、直前の説明を繰り返すだけにしません。

採用時には、写真・イラスト・画面ごとの利用条件も確認します。商用利用、加工、掲載媒体、クレジットの要否を確かめ、人物や顧客資料が写る場合は公開できる範囲を確認します。検索結果で見つかった画像や無料で入手できた素材でも、自由に転載・加工できるとは限りません。

画像の種類と採用の判断基準

画像の用途に合うaltとファイル名を付ける

説明画像・画像リンク・装飾でaltの目的を変える

altは画像の代替テキストです。画像を見られない状況やスクリーンリーダーでの閲覧を助け、Googleが画像のテーマを理解する手掛かりにもなります。ファイル名をそのまま入れるのではなく、その場所で画像が伝える内容を簡潔に書きます。

説明画像なら、読者が理解するために必要な対象や関係を選びます。業務図解に「SEO 画像 図解 おすすめ」と付けても工程は伝わりません。「資料作成から内容確認を経て、完成資料を次の担当者へ渡す流れ」なら、図を見なくても説明の要点をつかめます。図内の全ラベルを機械的に転記するより、本文との関係を踏まえてまとめます。

同じ商品写真でも、単なる内容説明と、商品詳細へ移動するリンクでは役割が変わります。たとえば写真がグレーのメッシュチェアで、写真だけがリンクになっている場合、altは外観に加えて商品詳細へ進む目的が分かる文にします。リンク先と違う商品名や「購入する」のように遷移先の機能を超える説明は付けません。

装飾だけの画像には空のaltを設定します。alt=""と、alt属性そのものを省略することは同じではありません。画像に意味があるのに装飾扱いで消さないよう、画像を見ずに本文を読んでも必要な情報が欠けないかを確認してください。

キーワードの列挙を避け、画像を識別できる名前にする

altは検索語を並べる欄ではなく、画像の役割を伝える欄です。主題に必要な言葉は自然に含め、同じキーワードの繰り返しや、画像と無関係な語の追加を避けます。本文の段落全体を複製せず、その画像によって補っている説明を選びましょう。

ファイル名も、画像の内容が分かる簡潔な名前にします。たとえばIMG0001.jpgよりgray-mesh-office-chair.jpgの方が、どの画像かを区別しやすくなります。業務図解ならdocument-handover-flow.webpのように、対象と役割を表せます。拡張子は実際の形式に合わせます。

ファイル名を英語にすること自体が目的ではありません。日本語などを使う場合はURLのエンコードを考慮し、サイトの命名規則と運用上の扱いやすさをそろえます。言語を一律に禁止したり、名前の変更だけで順位が上がると考えたりせず、alt・周辺本文・画像の内容を一致させてください。

同じ商品写真に付けるaltの修正例

容量・画質・寸法と形式を一緒に最適化する

画像の寸法とファイル容量を分けて確認する

「画像サイズ」には、横幅・高さを表すピクセル数と、通信量に関わるファイル容量という別の意味があります。横幅を小さくしても形式や内容によって容量は変わり、容量を減らしても図中文字が読めるとは限りません。最初に記事内の表示領域を把握し、必要な細部を保てる寸法で書き出します。

たとえば本文の表示幅が800pxの場合、その幅で鮮明に見えるかを確認し、スマートフォンでも縮小後のラベルを読みます。800pxはこの表示条件での例です。高密度の画面や拡大して見る用途も踏まえ、サイトで配信する画像の候補を決めましょう。小さい原画像を引き伸ばすと、必要な細部が増えるわけではありません。

圧縮前後では同じ画像を並べ、輪郭、細い線、図中文字、商品の細部を照合します。軽くなっていても、肘掛けの形が分からない写真や、担当名が読めない工程図では目的を果たせません。図の情報量が多すぎる場合は、圧縮率を戻すだけでなく、ラベルを短く大きくする、図を分けるといった設計の見直しも行います。

形式を変えた候補を、実際の書出し結果で選ぶ

Google検索はJPEG、PNG、WebP、SVG、AVIFなどの画像形式に対応しています。写真、線や文字の多い図、透過が必要な素材では、適した書出し条件が異なります。WebPなどの候補を試す場合も、形式名だけで決めず、実ファイルの容量と見え方を比べて採用してください。

軽量化の完了条件は、必要な説明が読める状態で容量を抑えられたことです。すべての画像に同じ容量上限を当てはめると、写真の質感や図の細部を損なう場合があります。表示に不要な余白や過大な寸法を見直し、それから形式や圧縮の設定を調整すると、原因を切り分けやすくなります。

書出しファイルだけでなく、記事に掲載した状態でも確認します。CMSや画像配信の仕組みによって別の寸法・形式で配信される場合があるためです。PCでは読めてもスマートフォンでは読めないなら、画像内の構成と表示幅を見直します。ページ全体が遅い場合は、画像以外のコードや配信の問題も含めて診断する必要があります。

書出し後に照合する項目

検索エンジンが発見できる実装を確認する

HTMLから画像URLを参照できるようにする

画面上に見えていることと、Googleが画像を検出できることは分けて確認します。Googleは標準のHTML画像要素であるimgのsrc属性から画像を検出できます。一方、CSSで指定した背景画像は画像検索のインデックス登録の対象にしません。検索で見つけてもらいたい商品写真や説明画像は、見た目だけでなく出力されるHTMLを確認しましょう。

実装担当へは「画像を表示してほしい」だけでなく、記事本文のどの画像を検索で発見可能にしたいかを伝えます。背景装飾と説明画像を分け、説明画像の参照先に目的のファイルが指定されていることを照合します。ファイルが削除されていないか、画像URLへアクセス制限がかかっていないかも確認対象です。

レスポンシブ画像にも代替URLを用意する

srcsetやpictureを使うと、画面などの条件に応じて画像候補を指定できます。その場合もsrc属性で代替の画像URLを指定します。候補を切り替える設定だけで完了とせず、代替画像が表示でき、各候補の内容が本文やaltと一致するかを点検してください。

たとえばPC用とスマートフォン用で商品写真の切り抜き方が異なる場合、スマートフォン版で説明対象の肘掛けが切れていないかを見ます。図解なら、狭い画面向けに一部だけを切り取ることで、受渡し先や分岐条件が消えないようにします。配信候補を変えても、画像が答える疑問は維持する必要があります。

画像サイトマップは、検出されにくい画像のURLをGoogleへ知らせる方法です。既存のサイトマップや画像の配信方法を実装担当と確認して利用を判断します。サイトマップを用意することは発見を助ける作業であり、画像の取得制限や本文との不一致を解決する作業の代わりにはなりません。

画像の掲載ページも、商品名やテーマが分かるタイトルと本文を整えます。画像検索から訪れた人が「何を見ているのか」「どの説明を読めばよいか」を把握できることが大切です。技術面の判断は、Googleの画像検索SEOベストプラクティスも確認しながら進められます。

実装担当へ渡す画像の確認事項

公開後の画像表示と自然検索の変化を確かめる

同じ画像の点検票を編集・制作・実装で共有する

企画と公開後の確認を別々のメモにすると、画像を差し替えた際にaltや掲載位置だけが古いまま残りがちです。画像ごとに、読者の疑問、採用理由、配置、代替文、書出し条件、実表示の確認を一緒に管理します。ファイルを変えたら、関連する項目も読み直してください。

たとえば「資料作成から点検、受渡しまでの流れ」を示す図を制作する場合、最初に解決したい疑問を「点検後の資料を誰へ渡すか」と決めます。関連する説明段落へ配置し、altでは工程の要点を伝え、書出し後は矢印の方向と担当ラベルを確認します。公開時には、実際のページで受渡し先まで読めることを完了条件にします。

編集担当は本文と図の意味を、制作担当は書出し後の画質を、実装担当は画像参照と端末別の表示を点検すると役割が明確になります。最後はそれぞれの作業結果を同じページで照合します。画像ファイルが正しくても、掲載時の切り抜きや幅の指定で必要な情報が隠れることがあるためです。

業務説明画像の点検票の記入例

表示の修正と自然検索の観測を分けて進める

公開直後は、画像が表示されるか、文字が読めるか、リンク画像が意図したページへ進むかを確認します。PCとスマートフォンで、画像の右端や下端が欠けていないかも見ます。表を併用する場合は、ページ全体が横にはみ出さず、表の枠内をスクロールして最後の列まで読めるかを確認してください。

自然検索については、対象ページ、期間、検索語などの条件をそろえて変化を追います。Search Consoleでの表示回数・クリック数などと、サイト内での閲覧や問い合わせは、それぞれの計測範囲を踏まえて見ます。画像を変更した日に本文やタイトルも変えたなら、その変更も記録します。

表示が改善したことと、検索流入が増えた理由を分けて評価しましょう。読みやすくなったことは実表示で確認できますが、流入の増減には需要や他の変更も関わります。数字が変わったときは、画像だけの効果と決め付けず、比較条件とページ全体の変更を照合して次の修正を選びます。

関連記事：Search Consoleの検索パフォーマンスの見方と記事改善につなげる確認方法

公開後に直す問題の優先度

自社で直せる項目と支援が必要な工程を整理する

まずは画像の役割と掲載位置、alt、読めないラベルなど、記事単位で把握できる問題を整理します。複数ページの配信仕様やHTMLの変更が必要なら、対象ページと症状、望む状態をまとめて実装担当へ渡します。問題の場所が分かる情報があれば、必要な作業と担当範囲を相談しやすくなります。

画像だけでなく記事制作や内部施策まで横断して改善したい場合は、トミラのSEO支援も選択肢になります。相談時は、対象記事、画像の目的、表示上の問題、自社で対応できる工程を整理すると、必要な支援を具体的に検討できます。支援内容と資料請求の案内は以下から確認できます。

トミラ　SEO運用代行コンサルティング