alt属性とは？具体的な書き方や注意点を解説

alt属性の適切な文字数について詳しく述べていきます。まず大前提として、alt属性の文字数は特に明確な制限はありません。だからといって、alt属性に長い文章を設定するのではなく、「短いフレーズで端的な説明」をするのがよいです。なぜ、短いフレーズで端的な説明がよいかというと、長すぎることによって、検索エンジンスパム判定がされる可能性を高めるため、お勧めできません。Webサイトへの訪問者とGoogleに正しく画像の内容を伝えることが大切です。

alt属性を設定するメリット

alt属性を設定するメリットを解説します。

SEO対策

検索エンジンが画像のみで内容を理解するのは困難だと言われています。そのため、検索エンジンのクローラーが、Webページを巡回し、データベースに登録しています。具体的に画像の正確な内容を伝えるには、下記のような情報を補足する必要があります。

ページのタイトルと説明を確認する
構造化データを追加する
速度を考慮して最適化する
高画質の写真を追加する
画像に記述的なタイトル、キャプション、ファイル名、テキストを含める
わかりやすい代替テキストを使用する
画像サイトマップを使用する

の場合、「画像」がalt属性、「image.jpg」が画像のパスとなります。画像の設置場所によってはサブディレクトリがパスに含まれます。

上記の中でもalt属性は基本的な手段といえます。alt属性を正しく設定することによって、画像検索結果で上位表示されることもあるので、SEOで上位表示するためのメリットになります。

参考：Google画像検索に関するおすすめの方法

視覚障がい者のための配慮ができる

alt属性はSEO対策だけではなく、ユーザーの役にも立ちます。視覚障がい者の方がパソコンでサイトを閲覧する際、スクリーンリーダーや音声ブラウザを利用し、読み上げられたコンテンツの情報を理解します。

画像の内容について、補助する働きがあるのが、alt属性です。スクリーンリーダーや音声ブラウザが、画像の内容を伝える代わりに、代替テキストを読み上げます。そのため、alt属性には、ユーザーが画像の内容を理解できるテキストを登録する必要があります。

画像の代替テキストになる

Webサイト内にある画像がネットワーク上の問題や、著作権違反などで消されてしまった場合など、何らかの問題で画像が表示されなかった際に代替テキストが表示されます。

一昔前は、インターネットの回線がまだ遅く、画像が表示されないことが多々ありました。現在も昔と比べて画像が表示されないことが少なくなったとはいえ、画像が読み込めなかった場合にも、ユーザはどのような内容なのか画像を理解するために必要だといえます。

alt属性の注意点

alt属性を設定する上での注意点をまとめました。

短いフレーズで端的な説明をする

alt属性にキーワードを並べただけのものを設置するのは、視覚障がいのある人がページ読み上げ機能を利用した際、意味が分からなくなります。一つの画像を見たときに伝わる言葉を意識して書きましょう。

複数のキーワードを含めない

特定のキーワードを繰り返し記述することは、検索エンジンスパムと判定される可能性を高めるので推奨されません。具体例として、以下のような画像のダメな例とよい例を紹介します。

ダメな例：<img src=”dog.jpg” alt=”犬,可愛い犬,犬の画像,横を向いている犬”>

“犬”というキーワードを詰め込みすぎて、検索エンジンスパムされる可能性があります。また、スクリーンリーダーや、音声ブラウザを使用した際、意味が分からない言葉になります。

よい例：<img src=”dog.jpg” alt=”横を向いているラブラドール・レトリーバー”>

例のように”犬”という文字を入れなくても構いません。なぜなら画像周辺のテキストで、犬について記載されていれば、クローラーは「ラブラドール・レトリーバー＝犬」と認識します。

同一ページにある複数の画像を同じキーワードにしない

同一ページにある複数の画像を同じキーワードにするよりも、異なるキーワードにします。

具体例をあげると、同一ページ内に犬の写真が3枚あったとします。その場合、「寝ている犬」「走っている犬」「公園で遊んでいる犬」のように”犬”というキーワードを複数使うよりも、「寝ている柴犬」「走っているトイプードル」「公園で遊んでいるミニチュアダックスフンド」など、短いフレーズで端的に異なる表現を使うほうがより良いです。