画像altは画像を見られない場合に必要な情報を伝えるために書きます。検索語を入れる空欄として扱うと、画像の内容や読者の操作と関係のない文章になりがちです。
最初にその画像が本文で担う役割を決めると、何を書くべきかが変わります。同じ見た目でも、説明図として使う場合とリンクのボタンとして使う場合では、伝える内容が違います。
目次
役割に合う説明を選ぶ
altを決めるときは画像だけを拡大して見るのではなく、周辺の見出しや本文も読みます。すでに同じ説明がある場合と、画像だけが重要な情報を持つ場合では、必要な補足が変わります。
スクロールできます
| 役割 | 説明用の架空例 | altの考え方 |
|---|---|---|
| 情報 | 通知設定を有効にした画面 | 設定名と示したい状態を伝える |
| 装飾 | 区切り線の横の飾り | 情報を加えないなら空のalt |
| 機能 | 問い合わせへ移動する画像リンク | 見た目より行き先や操作を伝える |
| 複雑な情報 | 複数系列の比較グラフ | 要約と本文の表・説明を組にする |
キーワードの列挙を内容の説明へ直す
たとえば「WordPress API 自動投稿 画像 SEO」という列挙では、何が写り、何を確認する画像かが伝わりません。「通知設定でメール送信を有効にした画面」のように、その文脈の情報を選びます。
ファイル名のimage01やphotoをそのまま使うことも避けます。一方、画像内の文字をすべてaltへ転記する必要があるとは限りません。複雑な表や図の情報は、本文でも利用できる形にします。
装飾画像の空のaltと、属性の未指定を区別することも必要です。空欄だから必ず不足という点検では、意図した装飾の扱いまで変えてしまいます。
HTMLと実際のページを確認する
次は情報を加えない装飾画像のHTML例です。すべての画像へ適用する例ではありません。役割を判断して使い分けます。
<img src="divider.png" alt="">情報画像なら、ページを読んでaltと本文で必要な情報が分かるかを確かめます。リンク画像なら、リンク先が分かるか、周囲のテキストと矛盾しないかを見ます。
Googleの案内も画像と関連本文の近さや説明を重視しています。altだけへ検索語を足せば順位が上がるという使い方ではなく、本文と画像の意味が対応するように整えます。公開後に画像を差し替えた場合もaltを読み直してください。
