画像(IMGタグ)のalt属性を最適化しよう


IMGタグ内にあるalt属性って何?

alt属性とは、端的に言うと、画像の代替テキストの事です。

ブラウザでは、何らかの理由で画像が表示されなかったり、画像を意図的に表示しない設定で、ホームページを閲覧したときに、このalt属性内に記述されているテキストが表示されるようになっています。

例<img src=”./images/xxxx.jpg” alt=”alt属性の説明”>

上記の「alt属性の説明」の部分が、代替テキストになります。

参考例として、以下の画像を表示させました。ソースは以下の通りで、実際に評されているのが下の画像です。

<img  src=”http://trendtop.net/websuccess/wp-content/uploads/2014/05/titletag.jpg” alt=”googleの検索結果として表示されたときの、タイトルタグの見え方、表示のされかた” width=”579″ height=”139″ />

 googleの検索結果として表示されたときの、タイトルタグの見え方、表示のされかた

正常に画像が表示されているときは、代替テキストは隠れて見えません。

 

次に、意図的に画像が表示されない状態にしました。

googleの検索結果として表示されたときの、タイトルタグの見え方、表示のされかた

上記の様に、画像が表示されないときに代わって表示されるのが代替テキストであり、alt属性で指定した文字列です。

Googleは画像を理解できない?

現在、googleのクローラー(インターネット上のWEBサイトの情報を集める為のプログラム)は、ホームページに表示されている画像の内容を把握できていないと言われています。

その為、googleはalt属性の内容を画像の情報だと認識しています。

イメージ画像は、テキストよりも、より多くの情報を伝えることが出来る為、無くてはならないものです。

また、ホームページのデザイン、印象を左右してしまうほどの影響力もありますので、お洒落でクリエイティブなデザインのホームページを作る上でも欠かせないものです。

その為、画像を多用するケースが多く、さらにalt属性の中身が空だったり、最適な文字が入っていないことで、デザインは良くても、googleから何のサイトだか分からない中身の無いサイトだと思われている事も多々あると思います。

ゆえに、alt属性の値を最適化する必要があるのです。

alt属性の最適化

alt属性の最適化は、基本的にはタイトルタグやディスクリプションの最適化アンカーテキストの最適化と同じ様な考え方で問題ありません。

最初にやってはいけない例として、下記のようにキーワードを無理やり詰め込んだやり方です。

<img  src=”./images/titletag.jpg” alt=”google,タイトルタグ,最適化,SEO,集客,キーワード,検索エンジン最適化,売上アップ” width=”579″ height=”139″ />

次に、不適切ではないですが、ちょっともったいないやり方

<img  src=”./images/titletag.jpg” alt=”タイトルタグの画像” width=”579″ height=”139″ />

最後に、かなり適切に文字列を入れているなと思うやり方

<img  src=”./images/titletag.jpg” alt=”googleの検索結果として表示されたときの、タイトルタグの見え方、表示のされかたの画像。googleの検索結果では、30文字くらいまでしかタイトルタグの内容が表示されない。” width=”579″ height=”139″ />

上記の様に、無理やりキーワードを詰め込んだわけでなく、且つ代替テキストとして、画像が表示されなかった時に、そこの表示されるはずの画像がどんな内容かが適切に説明されている。

要は、画像が表示されなかったユーザーの為の代替テキストと言う思いで最適化すれば、間違いはないと思います。

基本はいつもユーザーの為の最適化