img要素とalt属性とは

img要素は指定した場所に画像を埋め込むことのできるインライン要素で、内容を持たない（独立した閉じタグを持たない）空要素です。画像の代替となる文字列をalt属性の値として記述することが文法上の必須事項となっています。以下のように記述します。

<img src="image.png" alt="イメージと等価のテキスト" width="180" height="24" />

img要素を記述する際には、その内部にalt属性を「alt=”属性値”」の形で記述します。記述する内容は「そのイメージの内容と等価のテキスト」であり、イメージを理解しないユーザーエージェントに対して、イメージの内容を伝える役割を持ちます。

イメージを理解しないユーザーエージェントとは、音声ブラウザやテキストブラウザの他、検索エンジンのロボットなどもこれに該当します。しかし検索エンジンのロボットについては、alt属性値の扱いはかなり曖昧で、時期によってはまったく検索結果に反映されないこともあるので注意が必要です。

検索エンジンとalt属性

alt属性値に記述される文字列は一種のメタ情報で、画像の表示対応した一般的なブラウザでは、ユーザーがalt属性の値にどんなことが書かれているかに留意することはまずありません。このため alt属性値は、キーワードを詰め込みなどのスパム行為に使用されてきた経緯があり、検索エンジンはalt属性に指定された文字列を慎重に扱います。

• alt属性値の文字列は認識するものの、加点には使用しない（meta要素descriptionやkeywordsと同等の扱い）
• alt属性の文字列を完全に無視する
• a要素の内容として使用（イメージリンクとして使用）された場合にだけ、alt属性値をアンカーテキストと同様に扱う
• alt属性値も通常のテキストと同様に扱う

検索エンジンによるalt属性の扱いには上記のような複数のパターンがあり、一定しません。このためSEOの視座からは、次のような指針を持ってimg要素を使用することが、一種の安全策として定着しています。非常に常識的な（おそらくはHTMLの記述としても適切な）ものとなっています。

• img要素は写真やグラフなどの図版を扱うときだけに使用する。alt属性は画像の代替として適切な文字列を記述する
• 画像化した文字は使用しない。文字の装飾にはCSSを利用する

alt属性値の記述

img要素には必ずalt属性を付加し、イメージと等価のテキスト情報を記述します。イメージと等価のテキストとは、単にそのイメージの説明のことではなく、文脈上そのイメージと等価なテキストという意味です。テキストブラウザなどで閲覧した際に、意味が通じるように記述することを心がけます。

またスペーサーに使用しているイメージや、特に意味のないマーカーとして配置しているイメージなどの場合は、alt=”” などとして空の属性値を指定します。

SEOの基本は、ユーザーにも検索エンジンのロボットにも同等のアクセシビリティを確保することです。検索エンジン対策、検索エンジン攻略、といった文脈でSEOをとらえる業者が数多く存在するため誤解を招きがちですが、検索エンジンのスコアリングとユーザーに対する配慮は本来同じ到達地点を目指すものであり、矛盾なく両立されるべきものです。

ユーザーに支持されるものが検索エンジンにも評価される、ということに留意し、検索エンジンよりもむしろユーザーに配慮したウェブサイト制作を行っていくようにしましょう。

h要素の内容として画像を使用するケース

以下のような記述を行うことで、h要素に画像を使用することもできます。これは文法上はまったく問題のない記述ですが、img要素のalt属性値に記述された文字列が検索エンジンに見出しの文字列として重み付けを受けることはあまり期待できません。

<h1>
<img src="image/title.gif" alt="見出し文字列" width="180" height="24" />
</h1>

このように単なる文字列を画像で代替するような場合には、そもそも画像は使用せずテキストを使用し、装飾はCSSによって行うことを基本としてください。またCSS画像置換の使用はGoogle非推奨です。できる限り避けてください。

a要素の内容に画像を使用するケース

a要素の内容に画像を使用する（イメージリンクを使用する）場合、検索エンジンは基本的には、alt属性値をアンカーテキストと同等に扱うことが多いようです。文法上も問題ありません。しかし、本当に画像によるリンクが適切なのか、という点は再考の余地があります。なぜなら、画像によるリンクには次のような問題があるからです。

• borderを0に指定している場合（多くの場合そうだと思います）には、未訪問のリンクと訪問済みのリンクの区別がつかず、ユーザビリティ上の欠陥となる
• 背景置換を使ってリンク画像（に見えるもの）を実装する場合、ビジュアルブラウザで画像表示オフのユーザーや遅い回線のユーザーがリンクを認識できなくなり、アクセシビリティ上の欠陥となる
• 機能的には単なるリンクであるものを飾るというのが目的なのであれば、それは構造と表現の分離の原則からいってCSSで実装するのが適切と思われる

上記のような問題点を認識した上で、それでもイメージリンクを使用せざるを得ない場合には、それが画像でなかった場合に使用するアンカーテキストの記述と同様の記述をalt属性の属性値に記述するようにしましょう。alt属性値にキーワードを詰め込むようなことは、百害あって一利無しです。

<a href="./tigers.html">
<img src="image/tigers.png" alt="阪神タイガース" width="80" height="20" />
</a>

やむを得ずimg要素をリンクに使用する場合には、上記の記述のように、リンク先のページに関連したキーワードを含み、リンク先の内容を的確に示すalt属性を付加します。この際のalt属性値の文字列はリンクのラベルの書き方に準じるものが適切です。

検索エンジンがalt属性値をアンカーテキストのように解釈するかどうかはその時によって異なりますが、音声ブラウザやテキストブラウザのナビゲーションに問題のない記述を行っておくことが解決策になるでしょう。

キーワードをむやみに詰め込まない

非表示要素や各種の属性値などにキーワードを羅列するスパムのトリックを、詰め込みテキストスパムといいます。属性値への詰め込みテキストスパムの中でも代表的なのは、img要素のalt属性です。特に1×1ピクセルの画像を使用してalt属性にキーワードを詰め込むトリックは、現在では無視されるかペナルティを受けるかのどちらかです。

<img src="spam.png" alt="キーワード1,キーワード2,キーワード3,……" width="1" height="1" />

写真やグラフなどの img要素の alt属性値に記述されたテキストは、ほぼSEOには無関係です。このため、表示させたいイメージの実際の内容とは無関係にキーワードを羅列したりするようなことは、まったく無駄であるだけでなく、一部のユーザーのアクセシビリティに重大なダメージを与えます。