alt属性の適切な使用方法と考え方

基本的な事柄ですが、SEOを意識する上でも、注意したい画像のalt属性について、まとめておこうと思います。
Googleは、画像内に表示されている文字情報や、その画像が何の画像なのか？を読み取ることが出来ないとされています。

画像データは、Webサイトのデザインには欠かせないものですので、その意味を伝えるalt属性についても理解し、適切な設定を行う事で、ユーザビリティとSEOにも配慮しましょう。

alt属性はどの様に参照されるのか？

まず最初に、alt属性とはimg要素に記載する属性値の1つです。
以下のサンプルコード
alt=””
に書かれている情報になります。

<img src="image.jpg" alt="画像ファイルの説明をするテキスト情報" width="300" height="300" />

基本的なルールですが、その画像の内容を適切に伝えるテキスト情報を記載します。
画像の内容が理解できないGooglebotや、画像が表示されないブラウザや、音声ブラウザを使用した際に、画像情報を伝える役割を担います。

ただ、SEOについて重きを置いて考えると、Googleのalt属性の取り扱いは、かなり流動的だとされています。
対象の画像の前後の文章などから参照している事もありますし、しっかりと参照される事もあります。

Googleの取り扱いは曖昧ではありますが、SEOの原則の1つに、ユーザーとクローラーに同じ情報を参照できる様にする、という考え方があります。
ユーザーには問題なく情報が伝わるが、検索エンジンには何が書かれているのか分からない、という状況はマイナスにはなってもプラスになる事はありません。

Googleが画像の内容を適切に理解することが難しい以上、その手助けとなるalt属性の設定は大切なSEOの設定の1つになります。

具体的に、どんなalt属性を付与するべきなのか？

alt属性の記載方法としては、先にも書いた通り、画像の内容を適切に説明するものです。

画像の説明、というのは、その画像に何が書いてあるか、という事と、その画像が表示されなかったとしても、意味が通じるようにテキストで補足する説明を記載する、という事です。

例を出します。
以下の様な画像がある場合、どんなalt属性を付けるのが適切でしょうか？

トマト

カットされたトマト
カットされた新鮮なトマト
半分に切られて切断面が上を向いているトマト

色々なalt属性が思いつくと思います。
トマトの画像単体で表示されている場合は、それでも良いでしょう。

では、以下の様なテキストにトマトの画像が使われている場合はどうでしょう。

今日は新鮮なトマトがあるのでサラダにしようと思う。
さて、トマトを切って盛り付けをしようかな、と思ったら急に窓から強風が入ってきて、トマトを真っ二つにした。

自分の指がこんな風に切れなくて良かった。。
カマイタチって怖い！

テキストの内容はワードサラダぎりぎりのレベルですが、alt属性は最初に提示されたトマトの画像単体で表示された時とは変わりますよね。
画像が表示されなかったとしても、意味が通じる様にalt属性を設定しなければいけません。

カマイタチによって真っ二つにされたトマト
鋭利な刃物で切ったかのように切れているカマイタチによって切られたトマト

など、カマイタチによって切られたといった内容をalt属性にも記載しなければ、alt属性に記載する情報としては不完全になってしまいますよね。

上記は極端な例ですが、ユーザーにもGoogleにも同等の情報が提示できる様なalt属性をつける様にしましょう。

alt属性の注意点

見出し（hxタグ）に画像を使う場合

alt属性がテキストと同等の情報として使用されているのか？は微妙な所です。
そのページに書かれている内容を適切にGoogleに伝える場合は、テキストが良いでしょう。
恐らく、見出しテキストとして参照してくれていると思うのですが確実ではなさそうです。

画像にリンクを設置する場合

アンカーテキストの情報はalt属性が参照されます。
alt属性にはテキストリンクと同様に適切なアンカーテキストを記載する事が重要です。
ただし、テキスト情報と比較すると、上手くアンカーテキストの内容が伝わらなかった事もある様子です。
現在は問題ないと思いますが、やはりテキストリンクの方が確実ではあると思います。

alt属性にキーワードをつめ込まない

以前、1pxの小さな画像などのalt属性にキーワードを詰め込むという手法が流行った事がありました。
キーワードを多く含める事で、検索順位の上昇を狙おうとした手法ですが、現在では通用しなくなっています。
スパムと見なされる可能性もありますので行わないようにしましょう。

記号などの画像のalt属性

記号や装飾などの画像の場合、
alt=””
として空のalt属性としておきます。

重要な画像にalt属性を設置しなかった場合

これはalt属性の注意点とは違いますが、例えば電話番号や住所など重要な要素が画像のみで表示されているにも関わらず、alt属性を設置していない場合は、検索してもヒットしません。
大きな損失になりますので、alt属性は必ず設置しましょう。

画像やalt属性に関するSEO関連情報

画像やalt属性に関する情報が記載されているSEO関連の記事を紹介しておきます。
2011年12月頃の画像認識に関する記事や、2012年4月～6月頃画像やalt属性に関するGoogleの挙動に関する実験記事もあります。

今回の記事のまとめ

alt属性についてまとめてみましたが、結構な情報がありました。
細かい事にこだわり過ぎても仕方がないのですが、細かい事をしっかりと行い続けているサイトは、長い目で見ると、やはり強い事が多いです。
alt属性はSEOというよりは、ユーザーの為に使用するべきものですが、検索エンジンが画像を適切に理解する為にも無くてはならないものです。

しっかりと理解して正しく使用して下さい。

※本ブログに記載されている情報は、私の見解に基づく場合が多々ございます。
 掲載記事を参考にした事による損害については、その責任を負いかねます。
 自己責任で、掲載情報を参考にして頂ければと思います。