alt属性は必要なのか?alt属性の書き方と確認方法!

alt属性(オルト属性)とは、ホームページ上に掲載する画像に設定することが出来る、画像の説明文のようなものです。また、代替テキストとも呼ばれ何らかの原因で画像が表示できなかった場合に、代わりに表示されるテキストでもあります。実際にホームページ上の見た目には表示されることはなかなかありませんが、どういった目的でalt属性を設定する必要があるのでしょうか?

検索エンジンは画像が理解できない?

まずalt属性の解説をする前に、Googleなどの検索エンジンがWEBの情報を収集するためのロボットである「クローラー」の説明をします。クローラーはWEB上のサイトを巡回し、文章や画像データを収集し、検索エンジンのデータベースに登録(インデックス)します。数年前まではクローラーは文字情報は理解できましたが、画像は理解するのが苦手でした。しかし現在はクローキング技術も進化し、画像が何なのかを理解できるようになっています。(GoogleのTVCMで「肉肉しい料理のお店」と検索するものがあります。これも、Googleのクローラーが画像の内容を理解していることを意味していますね。)

 

それでも、検索エンジンが完全に画像を理解できるわけではありません。クローラーにその画像が何を意味しているのかを伝えるのを手助けするのがalt属性になります。クローラーが画像を適切に理解することが出来れば、サイトの理解に繋がります。サイトが理解されれば、適切な評価に近づくでしょう。それだけでなく、画像検索に対しても効果が期待できます。

 

alt属性は単なる画像の説明文ではない?

冒頭で、alt属性は「何らかの原因で画像が表示できない場合に、代わりに表示されるテキストでもある」と説明しました。画像が表示できない場合というのは様々です。画像へのリンクが切れてしまっている場合や、画像が削除されてエラーになっている場合、通信速度が低速なため画像が読み込めない場合。それだけでなく、視覚が不自由なユーザーが利用する音声読み上げブラウザ(スクリーンリーダー)の場合もあります。

 

スクリーンリーダーでは、alt属性に設定された説明文を画像の代わりに読み上げます。つまり、alt属性が設定されていないとその画像はスクリーンリーダーにはスキップされてしまい、存在しないようなものです。

ウェブサイトを見ているユーザーが必ずしも自分と同じ環境とは限りません。あらゆるユーザーに対して、より良いユーザー体験(UX)を与えることも重要です。

 

適切なalt属性を設定しましょう。

闇雲にキーワードを詰め込んだalt属性を設定すると、逆に過剰なSEOとなり評価が下がる可能性がありますので、適切な画像の説明を挿入しましょう。

 

例えば、一枚の猫の画像があったとします。

alt属性の悪い例をお見せします。

 
<img src=”cat.jpg” alt=”猫,子猫,かわいい猫,キャット,猫の画像”>
 

上記のようにキーワードを詰め込んでしまうと、具体的なイメージができませんし、読み上げられた際にも意味不明です。これではユーザーのためにも、クローラーのためにもなりません。

 

それでは、これはどうでしょうか?

 

<img src=”cat.jpg” alt=”猫”>

 

キーワードは詰め込んでいませんし、何の画像かも分かるので一見問題なさそうですが、これではどのような猫かが分かりませんので、もう少し具体的な表現があると望ましいです。

 

最適な例は以下のようなものです。

 

<img src=”cat.jpg” alt=”公園を散歩する2匹の黒猫”>

 

このように、具体的な装飾表現があると画像を見なくてもその情景をイメージすることが出来ます。短い文でその画像を説明するつもりで書くと、書きやすいかもしれません。

また、「その画像が表示されなかった場合にも代わりにそのテキストが表示されても不自然でない文章」という判断基準でつけると考えやすくなります。

 

全ての画像にalt属性を指定するべきか?

サイト内の全ての画像に必ず指定する必要はありません。しかし、HTML(ホームページを構成するプログラム)の構造上、説明する必要のない画像(サイトの装飾などコンテンツとして意味を持たない画像)にはalt属性を「alt=””」(空白)にしておくとよいです。

サイトの中で重要な意味を持つ画像は積極的に設定しましょう。

 

alt属性の確認方法

設定したほうがよいと分かっていても、つい忘れがちになってしまうalt属性ですが、しっかりと設定されているかを確認する方法がいくつかあります。

ブラウザに拡張機能を入れる方法もありますが、今回は直接ソースコードを見て確認する方法を紹介します。(今回はGoogle Chromeというブラウザの場合です。別のブラウザの場合は確認方法が異なる場合があります。)

 

まず確認したいサイトを開き「キーボードのF12キー」を押します。

画面右側に開発ツールが開きますので、①のオブジェクト選択のマークをクリックします。

そのまま、alt属性を確認したい画像にマウスを合わせて②クリックすると、該当箇所のソースコードが画面の右側に③ハイライトされます。

 

alt属性を確認する手順

 

この画像の場合、

 

<img src="/webconsul/theme/webconsul/img/logo.png" alt="社内で行うSEO対策">

 

となっているので、alt属性は「社内で行うSEO対策」と設定されています。

このようにalt属性が設定されているかを確認し、抜けている画像や設定し忘れがあれば、積極的に入れていきましょう。

 

alt属性のまとめ

・alt属性(オルト属性)はホームページ上の画像の説明のようなものです。

・画像が表示されなかった場合に代わりに表示されます。

・検索エンジンの画像への理解を手助けするのがalt属性です。

・目の不自由な方々が利用する音声読み上げブラウザ(スクリーンリーダー)では代わりalt属性に設定した文章が読み上げられます。

・キーワードの詰め込みなどをした不適切なalt属性は評価が下がる可能性があります。

・写真などは、具体的な装飾表現を使って情景が思い浮かぶような文が理想的です。

・alt属性の書き方のコツは「その画像が表示されなかった場合に表示されても不自然ではない文章」などと考えると分かりやすいです。

・コンテンツとしての意味を持たない画像には「alt=””」(空白)を設定しましょう。

・F12キーから開ける開発ツールでalt属性の確認が可能です。

 

SEO対策に取り組むにあたっては、alt属性の設定は積極的に取り組むべき施策です。

他にもSEO対策の内部対策についてはSEO内部対策を御覧ください。

社内SEOのススメ | admin | 2018/06/04

この記事へのコメント

コメントを送る

※ メールは公開されません


画像の文字を入力してください