alt属性とは？まず押さえたい基本

alt属性とは、HTMLの <img> 要素に付ける代替テキストのことです。 画像が見えない場合でも、その画像が何を表しているのか、どんな役割を持つのかをテキストで補います。

たとえば、次のように書きます。

<img src="white-cat.jpg" alt="窓辺で眠る白い猫">

alt 属性は、SEOだけのためではなく、画像が使えない状況でも内容を伝えるための基本的な設定です。

alt属性が大切な理由

画像の内容を伝えやすくなる

Googleは画像そのものだけでなく、ページ本文、キャプション、タイトル、ファイル名、alt text などを組み合わせて画像を理解します。 そのため、alt 属性を適切に設定しておくと、画像の意味が伝わりやすくなります。

アクセシビリティの向上につながる

スクリーンリーダー利用者にとって、alt 属性は画像内容を知る手段になります。 また、画像が読み込めない状況でも内容を補いやすくなります。

画像リンクでは意味を伝える助けになる

画像がリンクになっている場合、alt 属性はリンク先の意味を伝える補助になります。 画像リンクにも内容の分かるテキストを付けておくと、理解しやすくなります。

alt属性の書き方の基本

1. 画像をページ文脈の中で説明する

alt 属性は、画像に写っているものを単に列挙するだけでなく、そのページの中でどんな役割を持つかまで意識して書くと伝わりやすくなります。

2. 短く、具体的に書く

alt 属性は長文にしすぎず、必要な情報を短くまとめるのが基本です。 複雑な図やグラフは、alt で短く要約し、詳細は本文側で補う形が向いています。

3. キーワードは自然に入れる

ページテーマに関係する語を入れること自体は問題ありませんが、不自然な詰め込みは避けるべきです。 文章として自然に読めるかを基準にすると判断しやすくなります。

4. 周辺テキストと重複しすぎない

画像の近くに同じ説明がある場合、alt でそのまま繰り返す必要はありません。 画像の役割を補うために必要な情報に絞ると、冗長になりにくくなります。

装飾画像・図表・商品画像の考え方

装飾画像は alt="" にする

区切り線、背景パターン、雰囲気づくりだけの画像など、内容理解に不要な画像には空の alt を使います。

<img src="border-line.png" alt="">

図表やグラフは「短い要約＋本文で補足」

複雑なグラフやフローチャートを alt だけで全部説明するのは向いていません。 要点だけを alt に書き、詳細は本文や注釈で補うのが実用的です。

商品画像は識別に必要な情報を入れる

商品画像では、ブランド名、色、型番、形状など、その商品を見分けるために必要な情報を入れると分かりやすくなります。

よくあるNG例

キーワードだけを並べる

不自然なキーワード列は避けるべきです。 画像内容を自然な言葉で説明することを優先しましょう。

すべての画像に同じ alt を入れる

画像ごとの役割が伝わらなくなるため、同じページ内でもそれぞれの画像に合わせて書き分けることが大切です。

装飾画像に説明を入れる

装飾目的の画像に説明を付けると、必要のない読み上げが増えることがあります。 意味のない装飾画像は空の alt にしておくほうが自然です。

title属性と混同する

alt は代替テキスト、title は補足情報です。 同じ文章を両方に入れる必要はありません。

WordPressでの設定方法

WordPress系の環境では、画像ブロックやメディア設定から alt を入力できることが多いです。

• 投稿画面で画像を選択する
• 画像ブロックの設定や詳細設定を開く
• 代替テキスト欄に内容を入力する

また、画像ファイル名も内容が分かる形にしておくと、画像整理や理解の助けになります。

公開前に見直したいチェックポイント

• 画像の内容や役割が伝わる alt になっているか
• 周辺テキストと重複しすぎていないか
• 不自然なキーワード詰め込みになっていないか
• 装飾画像に alt="" を使えているか
• 複雑な図表は本文でも説明できているか
• 画像リンクに意味のある alt が付いているか

まとめ

alt 属性は、画像検索だけのための設定ではありません。 画像の内容や役割を伝え、読者にも検索エンジンにも分かりやすいページにするための基本です。

• 画像をページ文脈の中で説明する
• 短く、具体的に書く
• キーワードは自然に使う
• 装飾画像は alt="" にする
• 複雑な図表は本文でも補足する

まずは、アクセスの多い記事や重要ページの画像から見直し、alt 属性が「何の画像か」だけでなく「そのページでどんな意味を持つか」まで伝えられているかを確認してみてください。