alt属性とは？画像の代替テキストの書き方と確認方法

この記事の要点：

• alt属性は、画像の内容を文字で伝えるためにimg要素に付ける属性です。画像が見えない人のスクリーンリーダーが読み上げ、画像が表示されないときにも代わりに表示されます。
• Googleは、画像の情報を伝える属性の中でalt属性が最も重要だと説明しています。画像がリンクのときは、altの文章がリンクのテキスト（アンカーテキスト）として使われます。
• 書き方の基準は「その画像を見られない人に、ページの中でその画像が果たす役割を伝える」ことです。同じ写真でも、記事の目的によって書く内容が変わります。
• 区切り線などの装飾の画像や、隣の文と同じ内容を示すだけの画像は、alt=””（空のalt）にします。altそのものを省くのは避けます。
• キーワードの詰め込みは、Googleがスパムとみなすおそれがあると明記しています。公開後は検証ツールでaltの無い画像を一覧にして確かめます。

alt属性とは：画像の代わりになる文章

alt属性（オルト属性）とは、画像の内容を文字で説明するために、HTMLのimg要素に付ける属性です。ここに書く文章を「代替テキスト」と呼びます。画像を見られない人や、画像を読み込めなかった環境に、画像の代わりとして届く文章です。

HTMLでは次のように書きます。

<img src="brown-puppy.jpg" alt="ボールを追いかける茶色の子犬">

WordPressでは、メディアの設定画面や画像ブロックの設定にある「代替テキスト」欄に入力した内容が、alt属性として出力されます。メディアライブラリの代替テキストを後から変えても、すでに記事に入れた画像には反映されないことがあるため、記事の中の画像ブロックでも確かめます。

alt属性はimg要素のほか、画像のボタン（input type=”image”）や、画像の一部をリンクにするarea要素にも使います。ページに直接書き込んだSVGの図にはalt属性が無いため、図の中のtitle要素やaria-label属性などで説明を付けます。どの書き方でも、画像の代わりに何を伝えるかという考え方は同じです。

alt属性が必要な理由：読み上げと、Googleの画像の理解

画像が見えない人に内容を伝える

目の不自由な人が使うスクリーンリーダー（画面の文字を読み上げるソフト）は、画像の代わりにalt属性を読み上げます。通信状態が悪く画像が表示されないときや、画像を表示しない設定のときにも、画像の場所にaltの文章が表示されます。これがアクセシビリティ（だれでも使いやすいこと）の面での役割です。

Googleが画像の内容を理解する手がかりになる

Googleの画像SEOのドキュメントは、画像について情報を伝える属性の中で、alt属性が最も重要だと説明しています。Googleは、alt属性に加えて、画像を解析する技術とページの内容を使って、画像が何を表しているかを理解します。

また、Googleのリンクのドキュメントは、画像をリンクとして使う場合、img要素のalt属性をアンカーテキストとして使うと説明しています。ボタン画像やバナーでリンク先を案内するときは、altがリンク先を説明する文章になります。リンクの文言の考え方は内部リンクのアンカーテキストと同じです。

altを書けば順位が上がるわけではない

alt属性は、画像の内容を伝える手がかりの一つです。altを整えたことで検索順位や画像検索での表示が約束されるわけではありません。まず読者に正しく伝わることを目的にし、その結果として検索エンジンにも内容が伝わる、という順番で考えます。

alt属性の書き方：判断の基準と画像の種類ごとの例

Googleは、ページの内容に合った、情報を伝える文章を書き、キーワードは適切な範囲で使うよう勧めています。迷ったら「その画像を見られない人に、電話で説明するなら何と言うか」を考えます。

同じ写真でも、記事の目的で書く内容が変わる

例：同じコーヒーメーカーの写真でも、「選び方」の記事なら「水タンクが前面にあり、上から給水しなくてよいコーヒーメーカー」、「お手入れ」の記事なら「取り外したフィルター部分を水で洗っている様子」のように、その記事で伝えたい点を書きます。写っている物をすべて並べる必要はありません。

画像の種類ごとの書き方

「画像」「写真」という言葉は、読み上げで「画像」と伝わることが多いため、必要なとき以外は付けません。グラフで大事な数字を伝えたいときは、altだけに頼らず、本文や表でも同じ内容を示します。

書いたaltを確かめる3つの問い

1. 画像を消してaltだけを読んでも、本文の流れが途切れないか：前後の文とつなげて読み、意味が通るかを確かめます。
2. 同じページのほかの画像のaltと区別できるか：似た画像が並ぶときほど、違いを書きます。
3. 隣の文やキャプションと同じ説明を繰り返していないか：繰り返しになるなら、altを短くするか空にします。

この3つは、読み上げで聞いたときの分かりやすさを確かめるためのものです。検索エンジン向けに語を足したくなったときも、この問いに照らして不自然にならない範囲にとどめます。

長さの目安

Googleの検索のドキュメントでは、altの文字数の上限は確認できませんでした。なお、Googleが自社の技術文書向けに公開している書き方のガイドでは、altを短く、目安として155文字以内にするよう勧めています。これは文書の書き方の方針で、検索の決まりではありません。長い説明が必要な図は、本文に説明を書き、altは要点にとどめます。読み上げでは、altの途中で前後に戻って聞き直すことが難しいため、結論を先に書くと伝わりやすくなります。

空のaltにする画像と、altを省いてはいけない理由

区切り線や背景の模様など、情報を持たない装飾の画像は、alt=””（空のalt）にします。スクリーンリーダーはその画像を読み飛ばすため、読者の邪魔になりません。

alt属性そのものを省くのは避けます。altが無いと、代わりにファイル名を読み上げるスクリーンリーダーがあるためです。「装飾だから何も書かない」は、属性を消すことではなく、alt=””と書くことを指します。

空にするかどうかは、W3CのWAI（ウェブのアクセシビリティの指針を作る団体）の考え方に沿って、次の順に判断できます。

装飾の画像をCSSの背景画像として置く方法もあります。ただし、Googleは、CSSで指定した画像はインデックスに登録しないと説明しています。検索で見つけてほしい内容のある画像は、img要素で置きます。

alt属性・title属性・キャプション・ファイル名の違い

画像の周りには、altと混同しやすい要素がいくつかあります。役割が違うので、使い分けます。

Googleの画像SEOのドキュメントは、内容が分かるファイル名や、関連する文章の近くに画像を置くことも勧めています。生成AIで作った画像の alt とファイル名の付け方は記事の画像を生成AIで作る注意点で扱っています。

マウスを乗せたときに出る説明（ツールチップ）は、多くのブラウザでtitle属性の内容です。「altを書いたのにマウスを乗せても表示されない」のは、この違いによるもので、altが効いていないという意味ではありません。

alt属性の確かめ方：検証ツールでaltの無い画像を探す

記事の数が増えると、altの抜けを目で探すのは大変です。公開したページで、次の方法を使います。

ブラウザの検証ツールで1枚ずつ見る

画像の上で右クリックし、「検証」を選ぶと、そのimg要素のHTMLが表示されます。alt=”…”があるか、内容が合っているかを確かめます。

コンソールで、ページ内の画像のaltを一覧にする

検証ツールのコンソールに次の1行を貼ると、ページ内のすべての画像について、altの有無と内容を一覧できます。

document.querySelectorAll('img').forEach(i => console.log(i.hasAttribute('alt') ? '[' + i.alt + ']' : '【altなし】', i.src));

「【altなし】」と出た画像は属性が無い状態、「[]」と出た画像は空のaltです。空のaltが装飾の画像だけかを確かめます。

Lighthouseのアクセシビリティの監査を使う

ChromeのLighthouseや、PageSpeed Insightsのユーザー補助の項目では、alt属性の無い画像が指摘されます。ただし、altが「ある」かどうかを見るもので、内容が適切かどうかまでは判断しません。

スマートフォン向けの表示で画像やaltを省いていないかも確かめます。Googleは主にスマートフォン版のページの内容をインデックスに使うため、スマートフォン版でもパソコン版と同じく内容の分かるaltを付けるよう説明しています。詳しくはモバイルファーストインデックスの記事で説明しています。

WordPressでaltを設定する手順と、既存の画像の見直し方

新しく画像を入れるとき

1. ブロックエディターで画像ブロックを追加し、画像を選びます。
2. 右側の設定にある「代替テキスト」欄に、画像の役割を1文で書きます。
3. 装飾の画像なら、欄を空のままにします。多くの場合、空の欄はalt=””として出力されますが、テーマやプラグインによって出力が変わることがあるため、公開後にHTMLで確かめます。記事の代表画像の設定は「アイキャッチ画像の設定方法」で説明しています。
4. キャプションが必要なら、キャプション欄に書きます。altとキャプションに同じ文を入れると、読み上げで2回聞こえることがあります。

すでに公開している記事の画像を見直すとき

記事の数が多いと、すべての画像を一度に直すのは大変です。次の順で優先順位を付けると、読者への影響が大きい所から直せます。

見直しの際は、アクセスの多い記事や、問い合わせなどの成果につながる記事から始めると、手間に対する効果を考えやすくなります。

alt属性のよくある間違いと直し方

altは本文の一部と考え、記事の書き方と合わせて整えます。本文の組み立て方はSEOライティング、ページの階層を伝える見出しタグの使い方もあわせて確認すると、読み上げで情報が抜ける場所を減らせます。

よくある質問

alt属性は日本語で書いてよいですか？

はい。ページの言語に合わせて書きます。日本語のページなら日本語のaltが、読み上げでも自然に伝わります。

すべての画像にaltを書く必要がありますか？

alt属性はすべてのimg要素に付けます。ただし中身は、内容を伝える画像なら説明を書き、装飾の画像ならalt=””にします。属性そのものを省くのは避けます。

アイキャッチ画像のaltには何を書けばよいですか？

記事の題名と同じ文を入れるより、画像に写っている内容を書きます。題名の隣に置かれ、内容を補わない飾りの画像なら、空のaltにする判断もあります。

altを直したら画像検索に表示されますか？

表示されるかどうかはGoogleが決めるため、約束はできません。Search Consoleの検索パフォーマンスで検索タイプを「画像」にすると、画像検索での表示回数を確かめられます。

商品の画像がたくさんあるとき、altはどう書けばよいですか？

商品名に加えて、色・型・角度など、その画像で見分けられる点を書きます。同じ商品の画像が並ぶときに全部同じaltにすると、どの画像が何を示すか分からなくなります。例：「白い陶器のドリッパー 横から見た形」「白い陶器のドリッパー 底の穴の数」。

SEOAGENTでできること

SEOAGENTでは、記事のアイキャッチや見出しごとの画像の生成を指定し、自社の写真と使い分けながら記事を作れます。自社の写真にはAIで説明の下書きを付けられ、記事で使われるのは、確認して確定した説明だけです。altの内容は、公開前に人が画像と見比べて確認してください。

• AI記事作成・画像生成
• 自社資料・写真・文体
• 品質チェック

表示や構造に関わるほかの記事は「テクニカルSEOの記事一覧」にまとめています。

参考情報

• Google 検索セントラル：Google 画像検索 SEO のベスト プラクティス
• Google 検索セントラル：Google の SEO リンクのベスト プラクティス
• Google 検索セントラル：ウェブ検索のスパムに関するポリシー
• W3C WAI：An alt Decision Tree（altの判断の流れ）
• W3C WAI：Decorative Images（装飾画像）