Webサイトの表現において、ユーザーに大きな印象を与えるのが画像(イメージ)です。画像を使用する際に是非設定しておきたいのがalt属性についての記述です。
alt(alternative text)属性とは、Webサイト閲覧時に、画像の上のマウスを乗せるとポップアップで表示されるテキストの事です。オルト属性、と呼びます。
ブラウザによってはポップアップで表示されませんが、ポップアップさせること自体が目的ではなく、SEOの面、アクセシビリティの面から言って記述を推奨します。
記述方法は、各種Web制作ソフトに依存しますが、ソースコードを直接編集する場合は以下の例のように記述します。
<img src="http://business-affiliate.net/e-img/top/e-rss.jpg" width="485" height="133" class="entry-img" alt="RSS配信について" />
赤字の箇所がalt属性を記述した時のソースコードになります。alt属性を記述する際は、その画像を端的に表すテキストを記入しましょう。
SEO対策として
検索エンジンのクローラ(※詳しく知りたい方はコチラ)は、HTMLのタグやテキストを読みますが、画像は認識しません。しかし、alt属性に記述したテキストは認識しますので、結果、画像を読ませる行為となります。
この時SEOの評価としては テキスト>atl属性に記述したテキスト と、テキストに高い評価を置いていますが、何も記述しないよりは効果大です。
Google画像検索で集客できる
Google画像検索というのがありますが、alt属性を記述していると有利な気がしています。
例えば「Web Premium 値段」というキーワードを入力して画像検索をかけると、当サイトの画像が一番目に表示されているのが分かると思います。(※右画像参照。)
因みにこの画像のalt属性には「Web Premium のお値段」と記述しています。
他の画像でも色々と試してみましたが、やはりalt属性に記入したテキストがかなり有効に反映されている気がします。あくまで仮説ですが、こういった形でも集客が可能になりますのでやはりalt属性の記述は有効です。
因みに、Yahoo!検索エンジンはalt属性を読まないらしいです。(※2009年7月現在)
画像の表示ができない環境のユーザーに対応できる
Webサイトを閲覧中に、何らかの不具合で画像が正常に読み込まれない時や、事情によりユーザーが、Webブラウザで画像表示をOFFに設定している時があります。
そのような時にalt属性にテキストを記述しておけば、代替テキストが表示されるので、どのような画像があるのかを明示することが出来ます。
前述していますが、このような事からもalt属性に記述するテキストは、その画像を端的に表すテキストを記入することが望ましいです。
つまり、「画像01」や「表002」といったあいまいなテキストでは無く、「図:アフィリエイトとASPの関係」などといったテキストが望ましい、ということになります。
因みに、CSSで背景画像として設定している場合はalt属性は記述できませんが、text-indent: -9999px;のテクニックを使用すれば、テキストとして認識させることが出来ますので、こちらの方がSEO効果が高いです。
臨機応変に使い分けると良いでしょう。