alt属性は軽視されがちな要素です。設定していても通常は表示されておらず、いい加減に設定されていたり、そもそも何も記入されていないことがあります。しかし、SEO対策において重要な要素であるため、必ず設定します。
今回はalt属性について、具体的な書き方や注意点を解説します。
この記事を読むことで
- alt属性とはどういう意味なのか
- alt属性の適切な文字数
- alt属性を設定するメリット
- alt属性を設定する上での注意点
- alt属性の確認方法
がわかります。
alt属性とは
alt属性とは、画像の代わりとなるテキスト情報のことです。読み方は「オルトぞくせい」です。画像が表示されなかったときに代替手段として表示される文言と定義されています。英語のalternative(代替)の頭文字で、「代替テキスト」とも呼ばれています。
alt属性の文字数
alt属性の適切な文字数について詳しく述べていきます。まず大前提として、alt属性の文字数は特に明確な制限はありません。だからといって、alt属性に長い文章を設定するのではなく、「短いフレーズで端的な説明」をするのがよいです。なぜ、短いフレーズで端的な説明がよいかというと、長すぎることによって、検索エンジンスパム判定がされる可能性を高めるため、お勧めできません。Webサイトへの訪問者とGoogleに正しく画像の内容を伝えることが大切です。
alt属性を設定するメリット
alt属性を設定するメリットを解説します。
SEO対策
検索エンジンが画像のみで内容を理解するのは困難だと言われています。そのため、検索エンジンのクローラーが、Webページを巡回し、データベースに登録しています。具体的に画像の正確な内容を伝えるには、下記のような情報を補足する必要があります。
- ページのタイトルと説明を確認する
- 構造化データを追加する
- 速度を考慮して最適化する
- 高画質の写真を追加する
- 画像に記述的なタイトル、キャプション、ファイル名、テキストを含める
- わかりやすい代替テキストを使用する
- 画像サイトマップを使用する
<img src=”image.jpg” alt=”画像”>
の場合、「画像」がalt属性、「image.jpg」が画像のパスとなります。画像の設置場所によってはサブディレクトリがパスに含まれます。
上記の中でもalt属性は基本的な手段といえます。alt属性を正しく設定することによって、画像検索結果で上位表示されることもあるので、SEOで上位表示するためのメリットになります。
視覚障がい者のための配慮ができる
alt属性はSEO対策だけではなく、ユーザーの役にも立ちます。視覚障がい者の方がパソコンでサイトを閲覧する際、スクリーンリーダーや音声ブラウザを利用し、読み上げられたコンテンツの情報を理解します。
画像の内容について、補助する働きがあるのが、alt属性です。スクリーンリーダーや音声ブラウザが、画像の内容を伝える代わりに、代替テキストを読み上げます。そのため、alt属性には、ユーザーが画像の内容を理解できるテキストを登録する必要があります。
画像の代替テキストになる
Webサイト内にある画像がネットワーク上の問題や、著作権違反などで消されてしまった場合など、何らかの問題で画像が表示されなかった際に代替テキストが表示されます。
一昔前は、インターネットの回線がまだ遅く、画像が表示されないことが多々ありました。現在も昔と比べて画像が表示されないことが少なくなったとはいえ、画像が読み込めなかった場合にも、ユーザはどのような内容なのか画像を理解するために必要だといえます。
alt属性の注意点
alt属性を設定する上での注意点をまとめました。
短いフレーズで端的な説明をする
alt属性にキーワードを並べただけのものを設置するのは、視覚障がいのある人がページ読み上げ機能を利用した際、意味が分からなくなります。一つの画像を見たときに伝わる言葉を意識して書きましょう。
複数のキーワードを含めない
特定のキーワードを繰り返し記述することは、検索エンジンスパムと判定される可能性を高めるので推奨されません。具体例として、以下のような画像のダメな例とよい例を紹介します。
ダメな例:<img src=”dog.jpg” alt=”犬,可愛い犬,犬の画像,横を向いている犬”>
“犬”というキーワードを詰め込みすぎて、検索エンジンスパムされる可能性があります。また、スクリーンリーダーや、音声ブラウザを使用した際、意味が分からない言葉になります。
よい例:<img src=”dog.jpg” alt=”横を向いているラブラドール・レトリーバー”>
例のように”犬”という文字を入れなくても構いません。なぜなら画像周辺のテキストで、犬について記載されていれば、クローラーは「ラブラドール・レトリーバー=犬」と認識します。
同一ページにある複数の画像を同じキーワードにしない
同一ページにある複数の画像を同じキーワードにするよりも、異なるキーワードにします。
具体例をあげると、同一ページ内に犬の写真が3枚あったとします。その場合、「寝ている犬」「走っている犬」「公園で遊んでいる犬」のように”犬”というキーワードを複数使うよりも、「寝ている柴犬」「走っているトイプードル」「公園で遊んでいるミニチュアダックスフンド」など、短いフレーズで端的に異なる表現を使うほうがより良いです。
デザイン上必要になる線など、意味のない画像は空欄で設定する
デザインするうえで、図形など特に画像の意味がないものを使うことがあります。そのときにはalt=””のように、空白にして設定しておきます。
alt属性の設定方法について様々な例が以下のページで紹介されていますので、あわせて参考にしてください。(外部サイト)
alt属性の良い事例(つけ方・書き方)|情報バリアフリーポータルサイト
alt属性の確認方法
まずは、確認したいサイトへ行き、右クリックで「ページのソースを表示」をクリックしましょう。
すると以下の画像のような画面に切り替わります。
この画面で、「CTRL+F」を押すと以下の画像が表示されます。
ここに「alt」と入力することによって、以下の画像のようにalt属性で書いたワードが黄色く表示されます。
まとめ
- alt属性は「短いフレーズで端的な説明」を心がけましょう。
- 複数のキーワードを含めないように注意しましょう。
- 同一ページにある複数の画像をできるだけ同じキーワードにしないようにしましょう。
サイトに画像がたくさんあると、alt属性を設定するのに手間がかかるかもしれません。しかし、質の高いサイトを作るうえで重要な要素となっているので、この機会に正しくalt属性を設定しましょう。