こんにちは、mickです。
プログラマ系SEとしてIT企業に11年勤務。
ブログなどWebサイトには画像は必須。
Webサイトで画像を使うときに合わせてでてくるのがalt属性。
ここでは次のことを書いています。
- alt属性とは何か
- なぜalt属性は必要なのか
alt属性は「画像をテキストで説明する」
altは、英語alternativeの略です。和訳には「代わり」という意味があります。
alt属性の解釈はーー
画像をテキストで説明する
といったところでしょうか。
このalt属性は「代替テキスト」といって、ユーザーやプログラムが画像を解釈・分析するときに、その代わりとなる情報をテキスト、文字でalt属性に記述するわけです。
これは、リンク切れなど何らかの事情でWebサイトに画像が表示されない場合、画像の代わりにWebサイトに表示するテキストにもなります。
alt属性の記述はSEO対策に大切
Googleなど検索エンジンは、ユーザビリティといって、ユーザーの利便性の観点からもalt属性は重要視しています。
例えばGoogleは、alt属性を記述することを推奨しています。
つまりalt属性を適切に記述することは、SEO対策になるわけです。
検索エンジンはalt属性を解析する
GoogleやYahoo!など検索エンジンが使う検索ロボットは、画像そのものではなくalt属性を解析します。
またユーザーは、画像がリンク切れなど何らかのトラブルが発生しても、alt属性から画像を文字で確認できます。
Googleの画像検索に採用される
alt属性を記述することで、Webサイトの画像がGoogleの画像検索に掲載することになります。
すると、Googleの画像検索からもWebサイトにユーザーを呼び込めることになるわけです。
参考までに、Google画像検索がサポートしている画像形式はこのとおり。
- BMP
- GIF
- JPEG
- PNG
- WebP
- SVG
ユーザビリティの一例
alt属性の記述は、ユーザーの利便性、ユーザビリティに繋がります。
例えば、目が見えない人がWebサイトを利用するときにalt属性は有効です。
該当するユーザーは、ブラウザを使うときに、画面読み上げソフトを使って音声でブラウジングします。
このとき、画面読み上げソフトは、alt属性を読み上げます。画面読み上げソフトでは、画像を解析しないからです。
画像を表示しない人がWebサイトを利用するときにalt属性は有効です。
何らかの理由でWebブラウザの画像を非表示にしている人がいます。
該当するユーザーは、Webサイトを見るときにalt属性があるとどのような目的で画像が設置されているか知ることがあります。
alt属性の書き方
Googleによると代替テキストの例はこのようになっています。
// 悪い例（代替テキストがない）
<img src="straycat.jpg"/>
// 悪い例（キーワードの乱用でスパム判定に）
<img src="straycat.jpg" alt="赤ちゃん 猫 野良猫 子猫 猫たち 三毛 ブチ 野良 猫缶 ご飯"/>
// 良い例
<img src="straycat.jpg" alt="野良猫"/>
// 最も良い例
<img src="straycat.jpg" alt="人懐っこい野良猫"/>※横にスクロールします
Googleの検索エンジンはHTML部分を解析する
画像をWebサイトに画像を貼り付けるときは、img要素を使います。
理由は、Googleがページの HTML を解析して画像をインデックスに登録しますが、CSS の画像はインデックスに登録しないからです。
// 良い例
<img src="mikekitty.jpg" alt="三毛の子猫"/>
// 悪い例
<div style="background-image:url(mikekitty.jpg)">三毛の子猫</div>※横にスクロールします
CSSで画像を貼り付ける記述するのが無駄というわけではありません。
画像を検索エンジンに解析されたくない場合には、CSSを使うのが裏技になるわけです。
代替テキストに困ったとき
余裕があったり、画像につける代替テキストが明確なら楽ですよね。
完璧にやろうとしない
そこで息抜き的なやり方を覚えておくといいと思います。
h3, h2, h1のいずれかの要素をalt属性に記述する
alt属性に記述する代替テキストに困ったら、h3、h2、h1のいずれかの要素に記述している内容をそのまま使えばいいと思います。
h*要素は、記事のヘッダーです。
そこから先に何について記述しているかを表しているからです。
少なくとも、alt属性は記述した方がいいので書かないよりはましです。
まとめ。あくまでユーザーのことを考えているか
Googleなどの検索エンジンは、ユーザーのことを考えて設計しているとみなしたWebサイトは信頼あるWebサイトとして評価を上げます。
その結果、そのWebサイトを検索上位へ表示するようにします。
画像の多さや状況によっては、ひとつひとつの画像にalt属性をつけるのは大変かも知れません。
それでもユーザビリティの観点からalt属性は記述していきましょう。
以上、みなさまの助けなれば幸いです。
初稿 2020/07/24
