「画像を入れたら、altの欄はとりあえず全部埋めておくのが正しいはず」。代替テキストは入稿画面に必ず入力欄が用意されているうえ、解説でも「すべての画像に書きましょう」と案内されることが多いので、空欄をなくすこと自体が目標のように見えてきます。
しかし、SEO記事の執筆から代替テキストを含む入稿までを数多く請け負ってきた弊社の立場から言えるのは、altに書く内容は画像に何が写っているかではなく、その画像がページで担っている役割から決まる、ということです。写真なら記事の文脈で何を示しているか、機能アイコンなら押したときに起きることというように、画像の種類が変われば書く内容も変わります。欄を埋めること自体を目的にすると、判断の基準がないまま文字だけが並ぶ状態になります。
本記事では、alt属性の読み方と基本的な意味から、写真・図解・ロゴ・リンク画像での書き分け、空にしてよい画像の見分け方、WordPressでの設定と確認方法まで、記事の制作と入稿を手がけてきた制作会社の視点で順を追ってお伝えします。
- alt属性の読み方と、altタグという呼び方との関係
- 写真・図解・ロゴ・リンク画像で書く内容が変わる理由
- altを空にしてよい画像と、属性ごと省略した場合との違い
- title属性との使い分け
- WordPressでの設定手順と、設定漏れの確認方法
alt属性は、画像の代わりに読まれるテキスト
alt属性は、HTMLのimg要素に付ける属性のひとつで、その画像が果たしている役割をテキストで置き換えたものです。読み方は「オルト属性」。altはalternative（代替）の略で、日本語では代替テキストと呼ばれます。
<img src="pilates-lesson.jpg" alt="マットの上で背中を伸ばすピラティスのレッスン風景">ここで押さえておきたいのが、「説明」と「代替」の差です。altは画像の説明ではなく、画像の代わりに置くテキストです。説明だと考えると、写っているものを並べたくなる。代替だと考えると、その画像がなかったときに本文の流れを保つには何と書けばよいか、という問いに変わります。W3Cが公開しているアクセシビリティの判断手順も、後者の立場を取っています。
altタグと呼ばれることが多い理由
検索では「altタグ」という言い方もよく使われます。ただしHTMLの文法上、altはタグではなく属性です。タグは`<img>`や`<p>`のように山かっこで囲まれた部分を指し、altはそのタグの内側に書き足す情報にあたります。
呼び方が定着している以上、社内で通じているなら実務上の支障はありません。とはいえ外部のエンジニアやコーダーと画面越しにやり取りするときは、alt属性と言ったほうが指す場所が一発で伝わるでしょう。
alt属性に書いたテキストが届く3つの場面
altに入れた文章は、次の3つの経路で読者や機械に届きます。
- スクリーンリーダーが、画像の位置に来たときに読み上げる
- 画像の読み込みに失敗して、画像枠に文字が表示される
- 検索エンジンが、画像とページの内容を判断する材料にする
逆に言えば、ふだんブラウザで自分のサイトを眺めているぶんには、altに何を書いてもページの見た目は一切変わりません。表に出ないぶん、抜けていても気づきにくい。サイトを作った本人が最後まで気づかない項目の代表格です。
alt属性を設定すると何が変わるのか
「とりあえず埋めておくもの」と扱われがちな項目ですが、効いている先は2つに分かれます。ひとつは画面を見ずにページを読む人への情報提供、もうひとつは検索エンジンによる画像の理解です。
画面を見ないで読む人に、画像の内容が届く
WCAG（Webコンテンツアクセシビリティガイドライン）2.1の達成基準1.1.1「非テキストコンテンツ」は、最も基本的な等級であるレベルAとして、テキスト以外のコンテンツに代替テキストを用意することを求めています。画像はその代表例にあたります。
スクリーンリーダーは、altが設定されていればその文章を読み上げます。設定されていなければ、ファイル名を読み上げたり、画像の存在そのものを飛ばしたりする挙動になる。IMG_2831.jpgと読み上げられても、読者には何の情報も残りません。
※ 出典はW3CのWCAG 2.1です（日本語訳はウェブアクセシビリティ基盤委員会）。
検索エンジンが画像とページを理解する材料になる
Google検索セントラルの画像SEOに関するドキュメントは、代替テキストを「画像に関してより多くのメタデータを提供するうえで最も重要な属性」と位置づけています。さらに、画像をリンクとして使う場合には、altのテキストがアンカーテキストとして使われうるとも書かれている。
※ 出典はGoogle検索セントラル「画像のSEOベストプラクティス」です。
ただし、altを埋めれば検索順位が上がる、という単純な話ではありません。効きやすいのは画像検索での露出と、ページ全体の文脈理解を補助する部分です。本文でろくに説明していないページのaltだけを整えても、通常の検索結果での順位はおそらく動かないでしょう。
Web担当者既存記事が200本あるのですが、全部の画像にaltを入れ直す価値はありますか。
Writers-hub編集部
全部を一律にやるより、順番をつけたほうが投資対効果は出ます。優先度が高いのは、リンクやボタンになっている画像と、図解やグラフです。前者はaltがないとリンク先が伝わらず、後者は画像の中にしか情報がない状態になっているからです。逆に、記事の途中に置いたイメージ写真は後回しで構いません。装飾だけの画像にいたっては、空にしたほうが読み上げは快適になります。200本を頭から順に潰すより、画像の種類で並べ替えてから着手してください。
alt属性とtitle属性の違い
altとよく混同されるのがtitle属性です。title属性は要素にマウスカーソルを重ねたときにツールチップとして出る補足情報で、altの代わりにはなりません。
属性 | 主な役割 | 届く場面 |
|---|---|---|
alt属性 | 画像の代替となるテキスト | 読み上げ、画像が読み込めないとき、検索エンジン |
title属性 | 補足的な説明 | マウスカーソルを重ねたとき |
title属性は、タッチ操作の端末ではカーソルを重ねる動作自体が存在しないため、内容が読者に届かないことがあります。altに書くべき内容をtitleに逃がすと、スマートフォンの読者には何も伝わりません。
なお、img要素のtitle属性と、ページの`<title>`要素はまったくの別物です。前者は画像の補足、後者は検索結果に出るページタイトル。名前が同じなだけで役割は重なりません。
alt属性の書き方の基本
Googleのドキュメントには、犬の写真に対する例が段階的に並んでいます。代替テキストがない状態、キーワードを羅列した状態、単に「子犬」とだけ書いた状態、そして「「取ってこい」遊びをするダルメシアンの子犬」。良い例として挙げられているのは最後だけです。
差はどこにあるのか。単に写っているものを名指しするのではなく、その画像がページの中で果たしている役割まで含めて言葉にしているかどうかです。
その画像がなくても文章が成立するなら、書くべき情報は少ない。逆に、画像を消すと意味が通らなくなるなら、その足りない情報がaltに入る内容です。
主語と動作、あるいは対象と状態を短くまとめます。形容詞を重ねるより、何が写っているかを名詞で正確に指すほうが伝わります。
同じ料理写真でも、レシピ記事なら盛り付けの状態、店舗紹介なら店名や料理名が意味を持ちます。文脈に関係ない情報は落として構いません。
読み上げられる文章なので、耳で聞いて長すぎないかを基準にします。息継ぎが必要な長さなら、たいてい情報を詰め込みすぎています。
文字数はどのくらいが適切か
altの文字数について、Googleは上限を示していません。世の中では100文字前後という目安がよく語られますが、その根拠は主に読み上げ体験の側にあります。長いaltは、読者が途中で飛ばせないまま最後まで聞くことになるため、負担が大きい。
実務上は、日本語でおおむね40字から80字程度に収まっていれば困りません。それ以上の情報が必要な画像は、altではなく本文やキャプションに書くほうが、読み上げでも検索エンジンでも扱いやすくなります。
キーワードを詰め込むと何が起きるか
キーワードの羅列はスパムとみなされる場合があります
Googleのドキュメントは、alt属性にキーワードを並べる行為を「キーワードの乱用」と呼び、ユーザー体験を損なうだけでなく、サイトがスパムとみなされる要因になる場合があると明記しています。SEOのために埋めたはずのaltが、逆側に働くわけです。
- 対策キーワードを、全画像に機械的に入れる
- 画像に写っていないサービス名や地名を書き足す
- 記事タイトルをそのままaltにコピーする
- 記事内のすべての画像で同じ文言を使い回す
画像の種類によって、書く内容は変わる
ここが実際に迷うところです。altは「画像を説明する欄」ではなく「画像の役割を引き受ける欄」なので、役割が違えば書く内容も変わります。
画像の種類 | altに書く内容 |
|---|---|
写真・イラスト | 何が写っていて、その記事の文脈で何を示しているか |
図解・グラフ | 何を表した図なのか。数値の詳細は本文へ |
ロゴ | 組織名や製品名。リンクなら遷移先が伝わる形に |
機能アイコン | 絵柄の名前ではなく、押したときに起きること |
リンク・ボタン画像 | リンク先の内容、または実行される動作 |
装飾だけの画像 | 空にする |
写真やイラスト
記事の内容を補うために置いた写真は、写っている事実を短く書きます。ここで注意したいのが、感想を書かないことです。「素敵なオフィス」ではなく「木製のデスクが並ぶ執務スペース」。読み上げを聞いた人が、頭の中に同じ絵を再現できるかどうかが判断基準になります。
図解・グラフ・表を画像にしたもの
W3Cは、複雑な画像について、含まれている情報をページ内の別の場所にも記載するよう案内しています。altに数値を全部押し込むのではなく、altでは「何を示した図なのか」を伝え、詳細は本文か表で提供する形です。
画像内の文字は、検索エンジンにも読み上げにも届きません。バナーや図解に入れた文字は、あくまで画像の一部として扱われます。図の中にしか書いていない結論は、その記事では誰にも読まれていないのと同じ状態になる。図解を多用する記事ほど、この点は効いてきます。
ロゴとアイコン
会社ロゴには組織名を書きます。「ロゴ」「ロゴマーク」と書いても情報になりません。ロゴがトップページへのリンクになっている場合は、遷移先が想像できる書き方にしておくと親切です。
機能アイコンは考え方が変わります。虫めがねのアイコンなら、altは「虫めがね」ではなく「検索」。W3Cの判断手順も、アイコンのように特定の機能を持つ画像については、絵柄ではなく機能を伝えるよう示しています。
リンクやボタンになっている画像
画像そのものがリンクになっていて、他に手がかりのテキストがない場合、altが唯一の道しるべになります。Googleのドキュメントも、画像をリンクとして使うときのaltはアンカーテキストとして機能しうると説明しています。MDNも同じ趣旨で、矢印画像のaltを「右向き矢印」ではなく「次のページ」と書く例を挙げている。絵柄ではなく、押した結果を書くという考え方です。
種類ごとの方針が決まると、次に問題になるのが誰がいつ書くのかという運用側です。
画像のaltを誰が書くのか、社内で決まっていますか
altの書き分けは、判断のルールさえ一度決めてしまえば、ライターでも編集担当でも運用できます。難しいのはルールを作る工程と、記事本数が増えても守られる状態を保つ工程のほうです。Writers-hubでは、記事制作の手順と品質基準を社内に残していく内製化支援を行っています。現在の入稿フローを見ながらの相談も可能です。
空にすべき画像がある
「すべての画像にaltを書く」という運用は、実は正確ではありません。装飾目的の画像は、altを空にするのが正解です。
W3Cが公開しているalt Decision Treeは、画像の用途を順番に問いながら判断していく手順を示しています。装飾だけの画像、すぐ近くの本文と内容が重複している画像、視覚効果のためだけに置かれた文字画像は、いずれも空のalt属性を使うよう案内されている。
<img src="section-divider.png" alt="">ここで区別しておきたいのが、空にすることと、属性そのものを書かないことの違いです。MDNの解説では、alt属性に空文字列を指定した画像はコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザ以外では描画が省略される場合があるとされています。対して、alt属性が指定されていない画像は、一部のスクリーンリーダーで代わりにファイル名が読み上げられる。どちらも見た目には「何も書いていない」ですが、伝わり方は逆になります。
※ 出典はMDN Web Docsのimg要素リファレンスです。
つまり、装飾画像に対して意識的に空を選んだのか、単に設定を忘れたのかを、機械側は属性の有無で見分けている構図になります。
装飾画像は、alt属性を残したまま値を空にします。属性ごと省略するのとは意味が違い、省略は「まだ設定していない画像」として扱われる可能性があります。
判断が固まったら、同じ基準を記事全体に適用していきます。次の図が、迷ったときにたどる順番です。
設定方法と、設定できているかの確認
HTMLで直接書く場合
img要素の中に、srcと並べてaltを書きます。順序に決まりはありませんが、srcの直後に置くとレビューのときに見落としにくくなります。
<img src="/images/report-2026.png" alt="部門別の問い合わせ件数を月ごとに比較した棒グラフ" width="800" height="450">WordPressで設定する場合
ブロックエディタで対象の画像をクリックすると、右側に設定パネルが開きます。
「代替テキスト」または「alt text」と表示された入力欄に、その画像の役割を書きます。装飾画像なら空のままにしておきます。
メディアライブラリ側に保存した代替テキストは画像に紐づくため、使い回すと文脈がずれます。記事ごとに書き直してください。
プレビューではなく公開後のページで、後述の方法を使って実際のHTMLを確認します。
設定できているかを確認する
入力したつもりでも、テーマやプラグインの仕様で出力されていないことがあります。公開後のHTMLで、次のいずれかの方法を使って実際の状態を見てください。
- ブラウザで画像を右クリックし、検証を開いてimg要素のalt属性を目視する
- スクリーンリーダーを起動して、記事を頭から読み上げさせる
- サイト全体を巡回するクローラー系のツールで、alt未設定の画像を一覧化する
一覧化まで済ませておくと、修正すべき記事の本数がはっきりします。1本ずつ検証タブを開いて回るのは、記事が数十本を超えたあたりで現実的でなくなるためです。
運用に乗せると崩れやすい3つのところ
ここからは、記事を継続的に出している現場で実際に起きることです。書き方のルールを決めた後に効いてくる話でもあります。
ひとつ目が、CMSの保存単位です。WordPressのように画像そのものへ代替テキストを保存する仕組みでは、同じ画像を別の記事で使った瞬間に文脈がずれます。同じ画像でも、置く場所が変わればaltは変わります。アイキャッチ用の共通素材を複数記事で使い回している場合は、一度確認してみてください。
ふたつ目が、テンプレート化の副作用です。記事を量産する体制では「altは記事タイトルに連番を足したもの」といった機械的なルールが生まれがちです。運用は確かに楽になる。ただし出来上がる状態は、Googleが避けるよう書いている、画像と関係のない文言の反復に近づいていきます。
みっつ目が、担当の分かれ方です。構成を書く人、本文を書く人、画像を作る人、入稿する人が別々の場合、altは誰の仕事でもない領域に落ちます。入稿担当が最後に埋めることになり、記事の文脈を知らないまま画像を見て書く。結果として「グラフの画像」のような、あってもなくても変わらないaltが並びます。書く人を工程表の中で先に決めておくだけで、この問題はほぼ消えます。
記事の入稿まで含めて任せられる相手を探しているなら
altの設定そのものは、記事1本あたり数分の作業です。負担になるのは、月に何本も出す運用の中で書き分けのルールを守り続ける部分のほうでしょう。Writers-hubでは、キーワード設計から構成、執筆、そして画像の代替テキストを含む入稿までを一貫して引き受けています。現在の記事本数と更新頻度をお聞かせいただければ、進め方の案をお出しします。
alt属性についてよくある質問
制作の現場で実際に受けることの多い質問を、判断の根拠とあわせてまとめます。
日本語で問題ありません。日本語のページであれば、読み上げる読者も検索エンジンも日本語を前提にしています。無理に英語で書くと、スクリーンリーダーの読み上げがかえって不自然になることがあります。
数が少なければ空に直す価値があります。読み上げのときに不要な情報が挟まるためです。ただし優先度としては、リンクになっている画像や図解のaltを整えるほうが先になります。
alt単体で順位が動くとは考えにくいところです。効果が出やすいのは画像検索での露出と、画像を含むページ全体の理解を助ける部分になります。
出ないこともあります。表示のされ方はブラウザによって異なり、画像の指定サイズが小さいと文字が枠に収まらず切れる場合もあります。altは表示のための機能というより、代替情報を渡すための仕組みだと捉えたほうが実態に近いです。
img要素で読み込んだSVGにはaltを書きます。HTMLに直接埋め込んだSVGの場合、Googleのドキュメントはtitle要素を使う方法を挙げています。CSSの背景画像はHTML上の要素ではないため、装飾以外の情報を背景画像で表現しないほうが安全です。
まとめ
altに何を書くかは、画像を眺めて決めるのではなく、その画像がページで果たしている役割から決まります。装飾なら空、情報を持つ画像なら内容、リンクならリンク先。判断の順番が決まっていれば、画像1枚あたりに迷う時間は数十秒で済むはずです。
迷ったら、その画像を消した状態で本文を読み返してみてください。意味が通るなら空でよく、通らないなら、足りなくなった情報がそのままaltに入る内容になります。
記事の本数が増えるほど、alt属性は「知っているかどうか」ではなく「守り続けられるかどうか」の問題に変わっていきます。合同会社Writers-hubでは、SEO記事の構成設計から執筆、代替テキストを含む入稿までを請け負うほか、社内で運用を回せるようにする内製化支援も行っています。手元の記事を見ながらの相談も歓迎です。
