ブログ画像のSEO対策｜代替テキスト・サイズ・ファイル名の決め方

2026年11月3日

URLをコピーしました！

ブログに画像を入れるとき、代替テキストには何を書くのか。画像の横幅は何pxにすればよくて、容量はどこまで小さくするのか。

調べるほど設定項目が増え、「とりあえずキーワードを入れて、軽くしておけばいいのかな」となっていないでしょうか。

画像のSEO対策は、入力欄を埋める作業ではありません。その画像で伝えたいことを、読者にも検索エンジンにも分かる状態にする作業です。

私も、このブログ関連のLPを作った際、画像内の文字が小さすぎてスマホでは読みにくいという問題を見直しました。作成した画像を大きな画面で見ているだけでは、掲載後の読みやすさまで判断できないんですね。

この記事では、すでに用意した写真や図解をWordPressに載せる場面に絞って、代替テキストの具体例、サイズと容量、ファイル名、保存後の確認まで整理します。

画像そのものをAIで作る方法は、ブログに使う画像生成AIの使い方で説明しています。今回は「作った後、どう載せるか」の話です。

ブログ画像のSEO対策で、最初に確認したいこと

画像を掲載するときは、次の順番で見ると迷いにくくなります。

本文のどの説明を助ける画像なのかを決める。
画像を見られない場合にも、必要な意味が伝わるようにする。
読める画質を残しながら、無駄に大きなファイルを減らす。
WordPressの設定だけでなく、掲載されたページで確認する。

画像の内容と、置く場所をセットで考える

たとえば、カップの使い心地を紹介する記事なら、持ち手の形を説明した直後に、その形が分かる写真を置く。ブログ運営の手順を説明するなら、その順番が分かる図を手順の近くに置く。

このように、本文と画像が同じ疑問に答えていることが大前提です。関係の薄い画像に検索キーワードを書き込んでも、読者への説明にはなりません。

Googleも、画像の内容を理解する際には、代替テキストだけでなくページの内容や周辺の説明を使うと案内しています。画像だけにSEOの仕事を押し付けず、何を示しているのかを本文でも説明しましょう。Googleの画像SEOガイド

特に比較表やグラフを丸ごと画像にする場合、結論も条件も画像の中だけに閉じ込めないこと。画像が読み込めなかった人や、音声で記事を読む人にも、判断に必要な情報を残すためです。

「画像を増やせばSEOに強くなる」ではない

写真を追加したことで、商品の大きさや使い方が分かるようになった。図解を入れたことで、複雑な手順を迷わず追えるようになった。こういう追加には意味があります。

一方、見出しの下を埋めるためだけに似た画像を並べると、本文までの距離が長くなります。読み込むファイルも増えます。「何枚入れたか」で満足してしまうのは、記事数だけを増やして安心するのと同じです。

私なら、画像を外した状態を一度想像します。外すと伝わらなくなることは何か。それを答えられれば、写真の説明やaltも決めやすくなります。答えられなければ、その画像が本当に必要かを先に考えます。

なお、画像検索で見つけてもらうことと、記事全体が検索で評価されることは同じ話ではありません。以下の設定は掲載の基本を整えるためのもので、画像の設定だけで本文の不足を埋められるわけではないです。

代替テキスト（alt）は、画像の用途によって書き分ける

代替テキストは、画像の代わりに意味を伝える文章です。HTMLではaltという属性に入り、WordPressでは「代替テキスト」などの名前で設定できます。

ここで大事なのは、見た目を何でも細かく説明することではありません。その場所で、読者が受け取る必要のある情報を説明することです。

同じ画像でも、商品の特徴を見せる写真として使うのか、別ページへ進むリンクとして使うのかで、必要な説明は変わります。判断の土台は、W3Cのalt判断ツリーも参考になります。

情報を伝える写真、行き先を伝える画像リンク、説明を空にする装飾画像の違い — 同じ見た目でも、掲載する役割によって必要な説明は変わります。

商品写真は、本文で確かめたい特徴を説明する

ここからは説明用の例です。赤いカップを手で持っている写真を、持ち手の形について書いた段落に置くとします。

情報が足りない例: 「カップ」
詰め込みすぎの例: 「カップおすすめ人気安い比較通販」
内容に合う例: 「赤いカップの持ち手に指を通して持っている様子」

最後の例なら、その写真で何を見せているかが伝わります。商品名が識別に必要なら、正しい商品名を加えて構いません。ただし、写真から確認できない耐久性や、測っていない使いやすさまでaltで断定する必要はありません。

「画像が見えない人に、この段落の理解に必要なことを口頭で伝えるなら何と言うか」。この問いに答えるつもりで書くと、キーワードだけの羅列になりにくいです。

SEOを意識して同じ語を何度も入れるより、画像の内容に沿った自然な説明にしましょう。Googleの案内でも、altへのキーワードの詰め込みは避けるよう示されています。

図解やグラフは、要点をalt、詳しい内容を本文に分ける

手順が5つある図に、5つの項目名、矢印、補足、注意点を全部altとして入れようとすると、読み上げる説明が長くなります。

たとえば「ブログ画像を準備し、設定し、公開画面で確認する流れ」という短い説明で図の役割を示し、各段階で何をするかは直前・直後の本文に書く。数字を比較するグラフなら、対象期間や主要な差を本文に説明し、細かな数値が必要ならテキストの表も用意する。この分担が使いやすいです。W3Cの複雑な画像の説明方法

図を見れば全体像がつかめて、文章を読めば具体的に実行できる。図と本文は、そのような関係にします。

これは「図の説明が本文にあれば、すべての図のaltを機械的に空にしてよい」という意味ではありません。図を識別する短い説明が必要か、本文と同じ内容を重複して読ませるだけなのかを、そのページの構成で判断します。

画像だけのリンクは、見た目よりも行き先を伝える

クリックすると登録ページへ移動するバナーに「緑色のボタン」とだけ書いても、何が起きるかは分かりません。

画像だけでリンクになっているなら、たとえば「無料のブログ設計GPTの案内を見る」のように、リンク先でできることが伝わる説明にします。申込みページではなく案内ページへ移動するのに「申込み完了」と書く、といった食い違いも避けます。

一方、一つのリンクの中に、十分な説明文と画像が一緒に入っている場合は、画像側でも同じ説明を繰り返さない方法があります。これは、近くに別のテキストリンクが置かれているだけの場合とは区別してください。画像単独のリンクを、行き先の分からない状態にしないことが肝心です。W3Cの機能を持つ画像の説明

実際に記事の画像をクリックし、説明した行き先へ移動するかも確かめます。altが正しくても、リンク先が別ページなら案内としては間違っています。

装飾だけの画像は、altを空にする選択もある

区切りの模様など、文章に新しい情報を加えず、操作にも使わない画像は、説明を読み上げる必要がない場合があります。その場合は空のalt、つまりalt=""にします。

「画像には絶対に文章を入れる」と覚えると、こうした装飾まで長々と説明してしまいます。情報がない画像の説明を増やしても、記事の理解は進みません。W3Cの装飾画像の扱い

ただし、空のaltを付けることと、altという属性そのものが存在しないことは別です。属性がないと、読み上げ時にファイル名などが伝えられることがあります。編集画面で未入力だったから適切な出力になっている、とまでは決めつけないようにします。

迷う場合は「この画像を消すと、情報やリンク先が分からなくなるか」を考えてください。分からなくなるなら、単なる装飾として片付けず、伝えるべき内容を残します。

画像サイズ・表示幅・容量は、別々に確認する

「サイズを小さくしてください」と言われたとき、何を小さくするのか分からないと、別の問題を直してしまいます。

画像自体のピクセル数、記事内で見える幅、ファイルの容量。この3つを分けましょう。

画像の寸法はpx、表示幅は画面での大きさ、容量はKBやMBで見る三つの違い — 画像の寸法、ページでの表示幅、ファイル容量は別々の項目です。

項目	説明用の例	主に確認すること
画像の寸法	横1200px・縦800px	拡大したときの粗さ、必要以上の大きさ
記事内の表示幅	PCで横600px、スマホでは本文幅に収まる	文字や細部が読めるか、切れていないか
ファイル容量	KB・MBで表示されるデータ量	読み込む量が過大になっていないか

この表の寸法は説明用で、すべてのブログに適した指定値ではありません。

横幅は、掲載する大きさと細部の必要性から決める

横600pxで見せる写真に、横4000pxの元画像をそのまま使う必要があるか。まずはここを考えます。小さなサムネイルと、商品の細部を拡大して見せる写真では、用意したい画像も違います。

高精細な画面への対応として、表示幅600pxに対して画像を1200pxで用意する、といった考え方もあります。ただし、端末や用途で必要な精細さは変わります。「横幅は必ず1200px」と固定するのではなく、実際の表示で見比べることが判断になります。

また、Webページでは、端末に合わせて複数サイズの画像から読み込むものを選ぶ仕組みがあります。見た目が小さくなっているから、必ず小さなファイルを読み込んでいるとは限りません。web.devの画像サイズと配信の解説

初心者の方は、まず記事の表示幅に対して極端に大きな画像を避けることと、選んだ画像がぼやけていないかの確認から始めてください。テーマやプラグインの配信設定まで手を入れるのは、その後です。

容量は「読める画質を保って軽くする」ために調整する

同じ横幅でも、写真の細かさ、保存形式、圧縮の強さによって容量は変わります。ピクセル数を変えずに、圧縮で容量が減る場合もあります。

写真ならJPEGを候補にし、文字や線のある画像ならPNGやWebPなども含めて比較する。WebPやAVIFで容量を抑えられる場合もありますが、形式名だけで良し悪しを決めず、使用環境で扱えるかと仕上がりを見ます。web.devの画像形式・最適化の説明

作業としては、元画像を残し、掲載用の複製を作り、寸法や圧縮を調整して見比べる。この順番なら、圧縮しすぎても戻せます。特に図解は、細い線、漢字の細部、小さな数字がつぶれていないかを見ます。

私は「何KB以下になったら合格」という数字だけでは決めません。軽くして説明が読めなくなったら、その画像を置いた意味がなくなるからです。ページに画像が何枚あるかも含めて、必要な情報を残しながらデータ量を減らしていきます。

スマホで文字が小さい問題は、解像度を上げるだけでは直らない

ここは、実際に画像を使っていて気をつけたいと感じた部分です。

このブログ関連のLPでは、各画像内の文字が小さすぎて、スマホだと認識しにくい状態がありました。画像をきれいに作ったつもりでも、スマホの本文幅に縮めて表示すると、読者には文字が見えないわけです。

このとき、同じ構成のまま画像のピクセル数だけを増やしても、画面内の文字が大きくなるわけではありません。小さく鮮明になるだけでは、読める説明には近づきません。

必要なのは、図に入れる文を減らす、主要なラベルを大きくする、細かな補足は本文へ移す、といった内容の整理です。圧縮しすぎで文字がにじむ問題と、そもそも文字が小さすぎる問題を分けてください。

画像を直すべきなのか、表示設定を直すべきなのか。原因を分けるだけで、やり直しがかなり減ります。

ファイル名と画像の説明欄は、役割を混同しない

WordPressで画像を扱うと、代替テキスト以外にもタイトル、キャプション、説明などの欄が出てきます。全部に記事のキーワードを貼り付ける必要はありません。

新しくアップロードする画像には、内容が分かる名前を付ける

たとえば、赤いカップの持ち手を見せる写真なら、red-cup-handle.jpgのような短い名前にしておく。ブログ画像の確認手順なら、blog-image-check.webpのように内容を表す。どちらも命名の説明用例です。

こうしておくと、自分がファイルを探すときにも分かりやすくなります。Googleの公式ガイドでも、ファイル名は画像の主題を伝える小さな手掛かりとして扱われています。ただし、名前だけで順位が決まるような重要度ではありません。

日本語名だから一律に問題ということでもありませんが、私は管理のしやすさを考えて、短い英数字とハイフンでそろえる方法をすすめます。キーワードを何個も連結した長い名前より、「何の画像か」が分かる名前で十分です。

ファイル名を整えるタイミングは、基本的にはアップロード前。すでに掲載している画像を、名前だけのために一斉に入れ替える必要はありません。

タイトル欄を変えても、画像ファイルのURL変更とは別

WordPressのメディア画面で「タイトル」を書き換えることと、サーバー上のファイル名を変えることは、同じ操作ではありません。

項目	役割	入れる内容の考え方
ファイル名	画像ファイルを識別する名前	アップロード前に短く分かりやすくする
代替テキスト	画像を見られない場合に意味を伝える	掲載場所と画像の用途に合わせる
キャプション	画像のそばに見せる説明	見るべき点、条件、出典などを必要に応じて書く
メディアのタイトル	管理やテーマ側の表示などに使う名称	管理しやすい名前にする。altの代わりにはしない

WordPress公式のメディア編集画面の説明でも、これらは別項目になっています。キャプションを足したから、画像ブロックのaltも書き換わったはず、とは考えないことです。

すでに公開した画像を差し替える必要があるなら、どの記事やアイキャッチで使っているかを確認してから行います。旧ファイルを先に削除すると、残っている参照先で画像が表示されなくなる可能性があります。まず表示中の不具合を直し、名前をきれいにするだけの作業は後回しで構いません。

WordPressでは、メディア・本文・公開画面を順に確認する

ここからは、WordPressの通常の画像ブロックで掲載する手順です。表示名や設定位置はバージョン、テーマ、編集画面によって変わるため、項目の役割を見ながら進めてください。

メディアの元画像と初期値、本文画像の設定、実ページの見え方を順番に確認する図 — 矢印は確認する順番です。メディアの変更が本文へ自動反映される意味ではありません。

1. メディアで、画像の寸法・容量と初期の説明を確認する

管理画面の「メディア」から画像を追加し、対象の画像を開きます。ここでファイル名、画像の寸法、容量を見ます。WordPressのメディアライブラリの説明にも、これらの確認項目が示されています。

たとえば、掲載用に小さくしたはずなのに、数千pxの元画像が選ばれていたら、アップロードするファイルを間違えています。この段階で確認すると、記事に入れた後の手戻りを防げます。

代替テキストも、画像の内容を説明する初期値として入れておきます。同じ画像を複数の場所で使うなら、特定の記事だけでしか意味が通らない文章をここに入れるより、基本的な内容を記録し、掲載箇所で調整する方が管理しやすいです。

スクリーンショットを使う場合は、公開してよい情報だけになっているかも、この段階で確認してください。見せたい操作の説明に、個人のメールアドレスや管理用の情報まで必要になることはありません。

2. 本文へ挿入した画像ブロックで、altをもう一度見る

記事の編集画面で画像ブロックを追加し、メディアライブラリから対象を選びます。その後、画像ブロック自体を選択して設定を開き、代替テキストを確認します。

ここは重要です。メディアライブラリのaltを後から直しても、すでに本文へ挿入した画像のaltまで自動で直ったとは限りません。

WordPressの公式説明では、ライブラリのaltは画像を挿入するときの初期値で、ブロック側の変更はその投稿・固定ページに対して使われます。古い記事を直すときは、ライブラリだけでなく、その記事の画像ブロックを確認してください。WordPressの画像ブロックの説明

同じ画像でも、別の記事では別の説明が必要になることがあります。使い回しているからこそ、今回の本文と合っているかを見るわけです。確認したら下書きを保存、または対象の記事を更新してからプレビューへ進みます。

3. 表示サイズとリンク先、アイキャッチを別々に確認する

本文の画像ブロックでは、解像度やサイズの選択肢、表示幅、リンクの有無を確認します。小さなサムネイルを大きく引き伸ばしていたら、元の画質が良くてもぼやけます。逆に、大きな元画像を小さく見せるだけでは、読み込むデータ量の削減につながっていない場合があります。

商品ページへ移動させる予定の画像なのに、画像ファイル自体が開く設定になっていないかも見てください。リンクが不要なら、無理に画像へリンクを付ける必要はありません。

アイキャッチは本文画像とは別の設定です。記事一覧に使われたり、テーマによって記事冒頭に出たりします。本文では全文字が見えていても、一覧の横長の枠では切れることがあるため、一覧側も確認します。WordPressのアイキャッチ設定

SNSで共有したときの画像も、本文に挿入した画像と常に同じになるとは限りません。共有画像の設定を使っている場合は、そちらも分けて確認しましょう。本文のaltを直す作業と、共有画像を選ぶ作業を混ぜないことです。

公開前後は「設定したつもり」ではなく、ページで確かめる

管理画面で正しく入力できていても、見える形まで確認しないと、途中の取り違えに気づけません。確認はPCだけで終えず、スマホの幅でも行います。

文字が小さいときは情報量や配置、文字がにじむときは解像度や画質を見直す比較 — 小ささと画質の問題を分け、直した後も掲載ページで確かめます。

スマホでは、拡大せずに読めるかを見る

公開前はプレビュー、公開後は実際のURLを開き、上から下まで読んでみます。図解がある場所では、主要な文字が通常の表示で読めるか、横が切れていないか、隣の文章と重なっていないかを見ます。

ピンチ操作で拡大できることと、記事を読みながら無理なく理解できることは別です。重要な手順を毎回拡大しないと読めないなら、本文にも手順を書き、図側の情報量を減らすなど、読者の負担を減らします。

画像を変更したのに古いものが見える場合は、まず保存した記事と開いているURLが同じかを確認します。そのうえでページの再読み込み、画像の参照先、キャッシュの影響を順番に見ます。理由が分からないまま何度もアップロードすると、似たファイルが増えて選び間違いの原因になります。

また、通信が速いPCで一度開いただけでは、初めて訪れたスマホ読者の待ち時間は分かりません。画像が多い記事は、見た目だけでなく読み込みの様子も確認したいです。

altが反映されたかは、本文の画像設定と実際の出力を照合する

通常の画面ではaltがそのまま表示されないため、「画像が見えるからaltも正しい」とは確認できません。

PCのブラウザで確認できる方は、画像を右クリックして「検証」などから、その画像のimg要素を見ます。alt="赤いカップの持ち手に指を通して持っている様子"のように、保存した内容が入っているかを確認します。装飾画像ならalt=""という空の値か、属性自体がないのかを区別できます。

確認するのはページ上の同じ画像です。アイキャッチを見ているのに本文画像を確認したつもりになったり、別の画像のaltを見たりしないようにします。開発者向け画面が難しければ、まず編集画面の対象ブロックに戻って、メディアの欄だけを変更していなかったかを確かめてください。

テーマ独自の画像表示やバナー機能を使っている場合は、通常の画像ブロックと設定元が異なることもあります。実際の出力と一致しないときは、その機能の説明を確認する順番です。

画像が遅れて出る、本文が動くときは読み込み設定を見る

画面の下の方にある画像を、近づいてから読み込む遅延読み込みは、最初に取得する画像を減らすための仕組みです。ただし、最初から見えている大きな画像まで一律に遅らせればよいわけではありません。web.devの遅延読み込みの説明

また、画像が表示された瞬間に本文が押し下げられるなら、読み込み前に画像の場所が確保されているかも確認対象です。画像の幅と高さの情報や縦横比は、場所を確保するために使われます。web.devのレイアウトのずれに関する説明

ここは、すべての初心者が手作業でコードを追加すべきという話ではありません。WordPressやテーマがすでに処理していることもあります。まず利用中の機能を確認し、似た画像最適化プラグインを重ねて入れないようにしてください。

「全部の画像を遅延読み込みにする」「サイズの数字を消す」といった一括変更より、どの画像で何が起きているかを記録する方が先です。

すでにある記事は、困っている画像から直せばいい

ここまで読むと、過去の記事を全部開いて、全画像の設定をやり直さないといけない気がするかもしれません。

ただ、最初からファイル名まで総点検して回るより、読者への影響が大きいものから直す方が現実的です。私なら、次の順番で確認します。

今起きていること	最初に見る場所	修正の方向
画像が表示されない	掲載先の画像URL、元ファイルの有無	正しいファイルへの参照を直す
図の文字が小さすぎる	スマホでの表示と図内の文字量	主要文字を大きくし、詳細は本文へ移す
ぼやける・にじむ	選択した画像サイズ、圧縮後の画像	適切な解像度・画質へ戻す
リンク先が分からない	画像リンクのaltと実際の行き先	行き先が伝わる説明にする
ページの表示が重い	画像の容量・枚数・読み込み方	原因となる画像から調整する