画像のalt属性の書き方｜SEOに効く例文と空にしていい画像

画像のalt属性は、その画像が「意味を持つ画像か、飾りの画像か」で書き方が変わります。意味を持つ画像には、見なくても内容が分かる短い説明を書く。ロゴや区切り線のような飾りの画像は、属性ごと消すのではなく alt="" と空にする。判断はこの2択が土台で、あとはリンク画像と図・グラフに書き分けのコツがあるだけです。

この記事は、自社サイトやWordPressのブログに自分で画像を入れている広報・営業・経営者の方に向けて書いています。読み終わる頃には、手元のページを開いて画像を1枚ずつ仕分けし、その場でaltを書き終えられる状態を目指します。

扱うのは本文中に置く画像（<img>タグ）のalt属性だけです。SNSでシェアされたときのサムネイル設定はOGP画像の設定方法とタグの書き方、画像が重くてページ表示が遅い問題はLCP改善のやり方と直す優先順位で別に解説しているので、そちらが目的の方は先にそちらへどうぞ。

Contents / 目次

1. alt属性の書き方は、画像を4タイプに分けた時点で決まります
2. alt属性の書き方の手順。1ページ分を終わらせる5ステップ
3. altを直すと何が変わるか。順位より先に効く3つの変化
4. altだけでは画像SEO対策は完成しない。同時に揃える3つ
5. alt属性の書き方でやりがちな失敗5つ
6. 全画像に完璧なaltは付けられない。優先順位と、現場での妥協点
7. 画像のalt属性についてよくある質問
8. まず1ページだけ、今の状態を見てみてください

alt属性の書き方は、画像を4タイプに分けた時点で決まります

alt属性の書き方で迷う原因は、すべての画像に同じルールを当てはめようとしているからです。画像には役割が4つあり、役割ごとに正解が違います。先に仕分けてしまえば、あとは埋めるだけになります。

alt属性とは、画像の内容をテキストで説明するためのHTMLの属性です。「ここに何の画像があるのか」を言葉で伝える役割を持ち、次の3者に向けて働きます。

• 画面を見ずに音声読み上げソフトでページを聞いている人
• 画像を読み込めなかったブラウザ
• 画像の中身を直接は見られない検索エンジン

画像の役割	altの書き方	記述例
①意味のある画像（商品写真・施工事例・人物）	何が写っているかを、その記事で必要な情報とセットで短く書く	alt=”施工後のキッチン。L字型カウンターと吊り戸棚”
②装飾だけの画像（区切り線・背景の飾り・意味のないアイコン）	値を空にする（alt=”” と書く。属性ごと消さない）	alt=””
③リンク・ボタンになっている画像	写っている物ではなく、押すとどこへ行くかを書く	alt=”お問い合わせフォームへ”
④図・グラフ・文字入りの画像	読み取ってほしい要点を1文で。細部は本文かキャプションに書く	alt=”月別の問い合わせ件数の推移。6月以降に増加”

この4分類の根拠になっているのが、W3C（ウェブ技術の国際標準をつくる団体）のアクセシビリティ部門であるWAIが公開している判断フローです。W3C WAIの「An alt Decision Tree」では、画像の目的を順番に問いながら、説明を書くか空にするかを決める手順が示されています。装飾画像を空にするのは自己流の省略ではなく、標準に沿った正しい書き方です。

空にするのと、属性ごと消すのは別物です。alt=""は「この画像に読み上げるべき内容はありません」という明確な意思表示になり、読み上げソフトはその画像を飛ばします。W3C WAIの「Decorative Images」でも、装飾画像はalt属性を省略せず空の値を指定するよう示されています。属性そのものが無い場合の読み上げ結果は支援技術によって異なるため、意図した扱いにするには空の値を明示するのが確実です。

altにキーワードを詰め込むのは逆効果になります

alt属性は検索エンジンが画像を理解する手がかりになりますが、キーワードを並べる場所ではありません。Google 検索セントラルの画像SEOに関するドキュメントでは、alt属性にキーワードを詰め込む行為（キーワードスタッフィング）はユーザー体験を損ない、サイトがスパムと見なされる原因になりうると明記されています。

「大分 リフォーム 費用 安い おすすめ 業者」のようなaltは、読み上げソフトで聞くと意味不明な単語の羅列になります。人が聞いて意味が通らない文は、検索エンジンにとっても良い説明ではありません。

この章の結論として、altを書く前にやることは1つだけです。その画像を消したときに読者が情報を取りこぼすかを考え、取りこぼすなら説明を書き、何も変わらないなら空にする。この判断さえできれば、あとは書式の問題です。

alt属性の書き方の手順。1ページ分を終わらせる5ステップ

実際の作業は、画像の洗い出し、仕分け、記述、装飾画像の処理、公開前チェックの順に進めます。画像が10〜20枚あるページなら、一度に一巡できる分量です。

ステップ1。ページ内の画像とalt属性の現状を一覧にする

最初にやるのは、そのページに画像が何枚あり、今どういうaltが付いているかを一覧にすることです。目視で数えると必ず漏れます。CSSで背景として置かれた飾り画像や、スライダーの中の画像は見落としやすいためです。

ブラウザの開発者ツールを使えば、その場で一覧が出せます。ページを表示した状態でブラウザの開発者ツールを開き、コンソールに次のコードを貼り付けてEnterを押してください。開発者ツールの開き方はブラウザやバージョンによって違うので、メニューから「開発者ツール」「Webインスペクタ」にあたる項目を探すのが確実です。

// ブラウザの開発者ツールのコンソールに貼り付けて実行します。
// 表示中のページにある <img> を一覧にして、alt属性の状態を表で出します。
// 環境やライブラリの読み込みは不要です。そのままコピペで動きます。
console.table([...document.querySelectorAll('img')].map((img, i) => ({
  番号: i + 1,
  alt状態:
    img.getAttribute('alt') === null ? '★alt属性なし'
    : img.getAttribute('alt').trim() === '' ? 'alt=""（空）'
    : 'altあり',
  alt本文: img.getAttribute('alt') ?? '',
  文字数: (img.getAttribute('alt') ?? '').length,
  リンクの中: img.closest('a') ? 'はい' : 'いいえ',
  ファイル名: (img.currentSrc || img.src).split('/').pop()
})));

「★alt属性なし」と出た行が、最優先で直す対象です。「リンクの中」が「はい」なのにaltが空の画像も、押し先が分からないボタンになっているので直します。

ステップ2。4タイプに仕分けて、書くものと空にするものを決める

一覧ができたら、1枚ずつ前章の4タイプに振り分けます。判断に迷ったときの質問はこれです。「この画像を真っ白な四角に置き換えたら、読者は何か分からなくなるか」。

• 分からなくなる：意味のある画像。説明を書く
• 何も変わらない：装飾画像。alt=”” にする
• 押せなくなる／行き先が分からない：リンク画像。行き先を書く
• 数字や関係性が読めなくなる：図・グラフ。要点を書き、詳細は本文へ

記事の冒頭に置くアイキャッチ画像は判断が割れやすい部分です。記事タイトルを表現するために置いていて、写真そのものに情報がないなら、記事タイトルに近い内容を書くか、空にします。「オフィスで打ち合わせをする人々」のような写真素材そのままの説明は、読者にとってほぼ価値がありません。

ステップ3。テンプレートに当てはめてaltを書く

意味のある画像のaltは、次の型に当てはめると書けます。

［何が写っているか］＋［この記事で読者に伝えたい情報］

状況	惜しいalt	直したalt
外壁塗装の施工事例ページの写真	alt=”施工事例”	alt=”外壁塗装の施工後。ベージュのサイディング外壁と白い雨樋”
飲食店のメニュー写真	alt=”ランチ”	alt=”日替わりランチ。焼き魚と小鉢3品、味噌汁、ごはんの定食”
セミナー登壇者の顔写真	alt=”講師”	alt=”登壇中の講師。スライドを指しながら説明している様子”
会社ロゴ（リンクなし）	alt=”ロゴ画像”	alt=”株式会社○○のロゴ”（社名をそのまま書く）

文字数に公式な上限はありません。長さの目安を決めるなら、声に出して読んで一息で言い切れるかを基準にしてください。長くなるときは、書きたい情報が多すぎるサインなので、余った説明は本文かキャプション（画像の下に表示される説明文）に移します。

「〜の画像」「〜の写真」という書き出しは不要です。読み上げソフトは画像であることを先に伝えるので、「画像。○○の画像」と二重に読まれます。

ステップ4。装飾画像は alt=”” にして、リンク画像は行き先を書く

装飾画像と、リンクになっている画像は、HTMLの書き方そのものが変わります。次の4パターンをコピーして、自社のファイル名と文言に差し替えてください。

<!-- ①意味のある画像。何が写っているか＋記事で必要な情報 -->
<img src="/img/gaiheki-after.jpg" alt="外壁塗装の施工後。ベージュのサイディング外壁と白い雨樋">

<!-- ②装飾だけの画像。属性は残して値だけ空にする -->
<img src="/img/divider-line.png" alt="">

<!-- ③リンク・ボタン画像。写っている物ではなく行き先を書く -->
<a href="/contact/">
  <img src="/img/btn-contact.png" alt="無料相談の申し込みフォームへ">
</a>

<!-- ④図・グラフ。要点を1文で。細部は直後の本文で補足する -->
<img src="/img/graph-inquiry.png" alt="月別の問い合わせ件数の推移。6月以降に増加">

<!-- ⑤ロゴがトップページへのリンクになっている場合 -->
<a href="/">
  <img src="/img/logo.svg" alt="株式会社○○ トップページ">
</a>

③と⑤が、実務でいちばん取りこぼされる箇所です。リンク画像のaltは、テキストリンクにおけるアンカーテキスト（リンクに付ける文字）と同じ働きをします。ここが空だと、検索エンジンにも読み上げソフトにも「行き先不明のリンク」として扱われます。アンカーテキストの考え方は内部リンクの貼り方とアンカーテキスト最適化の5ステップで詳しく整理しているので、リンク画像を多用しているサイトは合わせて確認してみてください。

WordPressでは、画像を選んだときの設定欄から代替テキストを入力できます（WordPress公式ドキュメント「Media Library Overview」）。 欄の名称や並びはバージョンやエディタによって変わり、空欄のときにどう出力されるかもテーマやプラグインによって変わります。1枚だけテスト投稿して、ページのソースを表示し、実際にどう出力されているかを目で確かめてください。

ステップ5。公開前チェックリストで抜けを潰す

書き終えたら、公開前に次の7項目を確認します。上から順に見ていけば、後から直す手戻りはほぼなくなります。

1. alt属性が付いていない画像がゼロになっている（ステップ1のコードを再実行して確認）
2. リンク・ボタン画像すべてに、行き先が分かるaltが入っている
3. 装飾画像は alt=”” になっている。「装飾」「スペーサー」などの文字が入っていない
4. 同じページ内に、まったく同じaltの画像が複数ないか（連番の商品写真でやりがち）
5. altに「｜」「/」「,」で区切ったキーワードの羅列がない
6. ファイル名がDSC_0421のような連番のままの画像がないか（内容が分かる英数字に変える）
7. スマホ表示でも同じ画像が出ているか（PCとスマホで画像を出し分けている場合は両方に設定が要る）

この章の結論として、altの作業は「洗い出し→仕分け→記述」の順を守れば判断で迷いません。逆に、いきなり書き始めると装飾画像にまで説明を付けてしまい、読み上げが冗長なページになります。

altを直すと何が変わるか。順位より先に効く3つの変化

先に率直に言うと、altを整えれば検索順位が上がる、とは言えません。altは画像の内容を伝える手がかりの1つで、それ単体でページの評価が決まる仕組みではないからです。ただし、順位以外の3か所には確実に効きます。

画像検索からの流入が「測れる」状態になる

Google画像検索は、画像の周辺のテキストとalt属性を手がかりに、その画像が何を写しているかを判断します。alt属性を整えると、画像検索の結果に出る可能性が生まれ、その結果をサーチコンソールで確認できるようになります。

確認に使うのはサーチコンソールの検索パフォーマンスのレポートです。Google の Search Console ヘルプ「検索パフォーマンス レポート」では、レポートを検索タイプごとに絞り込めることと、Google画像検索が検索タイプの1つであることが説明されています。画面構成やメニュー名は更新で変わるため、実際の操作手順はこのヘルプで確認してください。ここに表示回数が積み上がっていれば、画像経由で見られている状態です。使い方に不安がある方はサーチコンソールの使い方と初心者が最初に見る4つの画面を先に読むと迷いません。

作業前に画像検索ぶんの表示回数を記録しておき、4〜8週間後に同じ数字を見比べる。これがaltの効果を自分の手元で判断する唯一の確実な方法です。他社の「3倍になった」という数字は、業種も画像の枚数も違うので当てになりません。

読み上げソフトを使う人がページを理解できるようになる

ウェブアクセシビリティの国際的な指針であるWCAG（Web Content Accessibility Guidelines）では、画像のような非テキストコンテンツに代替テキストを提供することが、最も基本のレベルAに位置づけられています（W3C「WCAG 2.1」達成基準1.1.1 非テキストコンテンツ）。 つまり、altは「余裕があればやる応用施策」ではなく、いちばん土台の項目です。

発注元からウェブアクセシビリティの状況を尋ねられたとき、altの整備は最短で答えられる項目でもあります。

画像が表示されなかったときにページが崩壊しなくなる

通信が不安定な環境や、画像の読み込みに失敗したとき、ブラウザはaltのテキストを代わりに表示します。altが空のリンクボタンだらけのページは、この瞬間に「押せる場所が分からないページ」になります。

altを整えることは、画像が出なかったときでも読者を取りこぼさないための保険でもあります。

この章の結論として、altの効果は「画像経由の流入が測れる状態になる」「アクセシビリティの土台が満たされる」「画像が表示されなくてもページが使える」の3つで捉えるのが正確です。「順位が上がる」は含まれません。期待値をここに置いておけば、成果が出ないと焦ることもありません。

altだけでは画像SEO対策は完成しない。同時に揃える3つ

画像SEO対策としてalt属性だけを直しても、画像検索で見つけてもらえる状態にはなりません。検索エンジンが画像を理解するときの材料は、altのほかに3つあります。同じ作業のついでに揃えてしまうのが効率的です。

• ファイル名：DSC_0421.jpg のような連番ではなく、gaiheki-toso-after.jpg のように内容が分かる英数字とハイフンにする。日本語のファイル名はURLで文字化けするため避ける
• 画像の周辺テキスト：画像のすぐ上か下に、その画像が何かを説明する本文かキャプションを置く。altより周辺テキストのほうが情報量を確保しやすい
• 表示速度と遅延読み込み：圧縮していない画像はページを重くする。読み込みを後回しにする lazy loading の設定と、幅・高さの指定をセットで行う

3つ目については、画像が原因でページの表示が遅くなるパターンが実際に多いので、LCP改善のやり方と遅い原因の特定手順で切り分け方をまとめています。altを直すついでに、画像1枚あたりのファイルサイズも見ておくと二度手間になりません。

画像の中に文字を焼き込んだ「テキスト画像」は、altに全文を書き写しても読みやすくはなりません。表や料金表は画像ではなくHTMLの表として作るほうが、読者にも検索エンジンにも確実に伝わります。

この章の結論として、画像SEO対策は「alt・ファイル名・周辺テキスト・軽さ」の4点セットです。altだけを完璧にしても、ファイル名が連番のままなら手がかりは半分しか渡せていません。

alt属性の書き方でやりがちな失敗5つ

ここからは、実際のサイトを点検していて頻繁に見つかる失敗です。どれも「知らないとやってしまう」類のもので、直すのは数分で済みます。

失敗1。装飾画像に律儀に説明を書いてしまう

起きる状況。「altは全部埋めるもの」と教わった担当者が、見出し横の飾りアイコンや区切り線にまで alt="区切り線" alt="装飾" と入力してしまう。alt属性の抜けを検出するツールの警告を潰そうとして起きます。

どうなるか。読み上げソフトを使う人には、本文の合間に「装飾。装飾。区切り線。」と無意味な音声が挟まります。飾りが多いデザインのサイトほど、読み上げが聞き取りづらいページになります。

防ぎ方。その画像を消しても読者が何も失わないなら alt="" にします。前述のW3C WAIの判断フローでも、装飾画像は空にするのが正しい書き方とされています。使っているツールが空altをどう扱うかは、そのツールの公式ヘルプで確認してください。

失敗2。同じ商品の連番写真に、全部同じaltを付ける

起きる状況。商品ページやギャラリーで5枚並べるとき、コピーして貼り付けるため alt="商品名" が5枚とも同じになる。

どうなるか。読み上げソフトでは同じ言葉が5回連続で読まれ、どれが正面でどれが裏面かが分かりません。検索エンジンにとっても5枚の違いを示す手がかりがなく、どの1枚を画像検索に出すかを判断できません。

防ぎ方。「商品名＋アングルや状態」を足して区別します。alt="革製名刺入れ ブラウン 正面" alt="革製名刺入れ ブラウン 内側のカード収納部" のように、その1枚でしか分からない情報を1語だけ足せば十分です。

失敗3。リンクになっている画像のaltを空にする

起きる状況。バナー画像やボタン画像は「デザイン要素だから装飾扱い」と判断して alt="" にしてしまう。装飾画像は空にするというルールを、リンク画像にまで広げてしまうパターンです。

どうなるか。読み上げソフトでは「リンク」とだけ読まれ、押した先が分かりません。リンク先の内容を検索エンジンに伝える手がかりも失われます。

防ぎ方。リンクを囲っている <a> タグの中にテキストが一切ない場合は、画像のaltが唯一の説明になります。この場合は必ず行き先を書いてください。同じリンク内に説明のテキストが既にあるかどうかで書き方が変わるので、判断の手順はW3C WAIの「An alt Decision Tree」で確認してください。

失敗4。altとタイトル属性とキャプションを取り違える

起きる状況。WordPressの画像設定には、代替テキストのほかにタイトルやキャプションなど複数の入力欄があります。 どれがaltか分からず、別の欄だけ埋めて終わってしまう。

どうなるか。alt属性は空のまま公開されます。タイトル欄はファイル名から自動で入ることが多いので、埋まっているように見えて実は何も設定できていない状態になりがちです。

防ぎ方。代替テキストの欄に入力します。 欄の名称や並びはバージョンやエディタによって変わるので、1枚テスト投稿してページのソースを見てください。どの欄がalt属性に出力されるかは一目で分かります。

失敗5。狙いたい検索語をaltにも入れておこうとする

起きる状況。ページで狙っているキーワードを、タイトルにも本文にも入れたうえで「念のため画像のaltにも」と全画像に同じ語を入れてしまう。悪意なく、良かれと思って起きます。

どうなるか。ページ内の10枚の画像すべてに同じキーワードが入り、画像の内容とは無関係な説明が並びます。前述のとおり、Googleのドキュメントではキーワードの詰め込みがスパムと見なされる原因になりうると示されています。

防ぎ方。altに書くのは「その画像に写っているもの」だけです。結果としてキーワードが自然に入るのは問題ありませんが、写っていないものを書くのはやめる。施工写真に「大分 リフォーム 格安」と書いても、その文字は写真のどこにも写っていません。

この章の結論として、失敗の大半は「全部埋める」か「全部空にする」の極端に寄ったときに起きます。1枚ずつ役割を見て決める、という当たり前の作業に戻せば、5つとも自然に回避できます。

全画像に完璧なaltは付けられない。優先順位と、現場での妥協点

記事数の多いサイトでは、画像は数百枚規模になります。これを全部さかのぼって直そうとすると、途中で必ず止まります。作業量は記事の本数や1本あたりの画像枚数で大きく変わるので、まず数記事を実際に直して自社のペースを測るのが確実です。現実的には、優先順位を決めて途中で止める前提で始めるほうがうまくいきます。

さかのぼって直すのは、この3種類だけで十分です

過去分に手を付けるなら、次の優先順位で区切ります。この3つを終えたら、いったん止めて構いません。

1. 問い合わせ・購入につながるページ（サービス紹介、料金、フォーム前のバナー画像）のリンク画像
2. アクセスが多い上位10〜20記事の、意味のある画像
3. 商品ページ・施工事例など、画像そのものが商品になっているページ

逆に、優先度を下げていいのが、テーマやプラグインが自動で出力している飾り画像です。CMSのテンプレート側で出力されているものは、1枚直すのにテーマファイルの編集が必要になることがあり、費用対効果が合いません。ここは触らず、記事本文の画像だけを直すという線引きで問題ありません。

altの一括生成をAIに任せるときの、渡し方と直し方

大量の画像を前に手が止まるなら、たたき台をAIに書かせる方法があります。ただし、画像を渡して「altを書いて」と頼むだけでは「オフィスで働く人々」のような一般的な説明しか返りません。画像から読み取れる情報と、その画像がどのページのどの文脈に置かれているかは別物だからです。

結果を左右するのは、画像と一緒にその画像の前後の本文を渡すかどうかです。出発点として、次のくらい短い指示で始めて、あとは対話しながら自社の書き方に寄せていくのが早いです。

あなたはウェブアクセシビリティに詳しい編集者です。
これから画像と、その画像が置かれている記事の前後の本文を渡します。
画像ごとに、alt属性に入れるテキストを1案ずつ出してください。

条件
- 声に出して一息で読み切れる長さにする
- 「〜の画像」「〜の写真」で始めない
- 写っていないものは書かない
- 装飾目的だと判断した画像は、テキストではなく「空（alt=""）」と回答する

［ここに画像と前後の本文を貼る］

出てきた案は、次の3点だけ人が確認して直します。ここを飛ばすと、写っていないものが書かれた説明がサイト中に残ります。

• 事実確認：写っていない色・数・型番を勝手に足していないか。商品写真でここを外すと誤情報になる
• 装飾判定：空にすべき飾り画像に説明が付いていないか。AIは「何か写っている」と説明を書きたがる
• リンク画像：写っている物の説明になっていないか。行き先の説明に書き換える

判断が割れる画像は、どちらでも大きな差は出ません

現場で率直に感じるのは、「装飾か意味があるか」で30分悩む価値のある画像はほとんどないということです。記事冒頭のイメージ写真、著者アイコン、実績ロゴの並びあたりは、社内でも意見が割れます。

迷ったら「空にする」を既定にして先へ進んでください。空にして困るのは、その画像にしかない情報があるときだけで、それは迷わず判断できます。判断に時間を使うより、alt属性そのものが無い画像を1枚でも多く潰すほうが効果は大きいです。

この章の結論として、altの整備は「全部やる」ではなく「問い合わせに近いページとリンク画像から」と決めた時点で終わりが見えます。全画像を完璧にすることを目標にすると、着手そのものが止まります。

画像のalt属性についてよくある質問

まず1ページだけ、今の状態を見てみてください

今日すぐできることは1つです。自社サイトでいちばん問い合わせに近いページを開き、この記事のステップ1にあるコードをブラウザのコンソールに貼り付けてください。1分もかからず、alt属性が無い画像とリンク画像の状態が一覧で出ます。そこに「★alt属性なし」が並んでいたら、それが最初に直す場所です。

画像まわりを整えたあと、ページ全体の土台も点検しておきたい方はSEO内部対策チェックリストと初心者がまず直すべき優先順位を続けて読むと、altの次に手を付ける項目がはっきりします。

ここまで読んで「枚数が多すぎて自社では回らない」と感じた方は、どこから手を付けるかを一緒に整理するところからでも構いません。現状のページを見せていただければ、直す優先順位と作業量の見当をお伝えできます。売り込みはしませんので、気軽に声をかけてください。