2016-12-24

imgタグのalt属性を必ずつける理由とその役割

はじめに

HTMLで画像を貼り付けるときに使用するimgタグですが、これに使用できる属性の中に「alt」というものが存在します。alt属性では、画像が表示できなかった場合に代替として表示されるテキストの設定を行うことができますが、Webサイトを見ていて画像が表示されない、といったことは今はほとんどないですし、設定していない人も多いと思います。

alt属性は必須項目

しかしながら、HTML5ではimgタグにおけるalt属性は必須とされています。実際、W3Cのバリデーションチェックでalt属性を指定していないimgタグの記述がされたページをチェックしてみると、エラーとなってしまいます。

alt属性がない場合のW3Cバリデーションチェックの結果

バリデーションチェックに引っかかる要素が存在することで、実際にクロールやランキングに影響を与えるかは不明ですが、大した手間でもないので、不安定な要素を排除しておくためにもalt属性を付与しておくと良いでしょう。

alt属性の書き方

alt属性には「その画像が表すものを」を文章として記述します。例えば上に貼った画像は、"alt属性がない場合のW3Cバリデーションチェックの結果"というalt属性を付与しています。このような形で、画像に写っているものが何なのか、どんな状況なのか、ということを書いておくと良いと思います。なお、文章ではない単語の羅列、空の文字列はSEOの観点でよくないようなのでやめておきましょう。

人間以外にも画像の説明をする

alt属性を設定することで、ロボットに対して何の画像なのかを知らせることができます。ロボットは画像を人間のように判断できないので、文章で説明しなければならないということですね。また、alt属性に記述した文章が、画像検索の際のキーワードとしても有効になってくるようなので、多くの人をサイトに呼び込むためにも適切なalt属性の記述が必要になってきます。

さいごに

HTMLタグは軽視されがちな気がしますが、Webサイトの根本を担うのもHTMLです。今回紹介したバリデーションチェックのサイト等も参考にして、定期的な整合性のチェックをしてみるのも良いかもしれません。



コメントする(※は必須項目です)













画像認証