img要素は画像を埋め込むインライン要素で、alt属性では代替テキストを指定します。検索エンジンのimg要素およびalt属性の扱いは一定しませんが、基本となる最適化方法について説明します。
目次
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属性値の扱い
Google画像検索では、画像のテーマを理解するために代替テキストを用います。基本的には、画像のキャプションやページのタイトルなど、画像が掲載されているページのコンテンツから画像に関する情報を抽出しますが、代替テキストであるalt属性値も参考にするようで、この点について検索セントラルでは以下のように説明しています。
Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。
alt 属性でわかりやすい代替テキストを使用する | Google 画像検索の SEO1
画像検索で探されるような画像を扱っている場合には、画像検索からのトラフィックは無視できないものになります。この場合、画像に関連するテキストの近くに画像を配置するようにすることに加えて、alt属性として書き込む代替テキストも画像検索を意識したものにしておくべきでしょう。
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属性値をアンカーテキストと同等に扱うことが多いようです。Googleは以下の引用のように、検索セントラルの中で明確に「アンカーテキストとして使用できる」と説明しています。
画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。
alt 属性でわかりやすい代替テキストを使用する | Google 画像検索の SEO
画像をリンクとして使用する場合は、alt テキストを入力しておくと、リンク先のページについて Google が理解しやすくなります。テキストリンクのアンカー テキストを記述する場合を想像してください。
alt 属性を使用する | Google 公式 SEO スターター ガイド（2022年12月の版）2
もちろん、a要素の内容（リンク）に画像を用いることは文法上も問題ありません。しかし、本当に画像によるリンクが適切なのか、という点は再考の余地があります。なぜなら、画像によるリンクには次のような問題があり、基本的にリンクにはテキストを用いるほうが優れているからです。
- 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には無関係です。このため、表示させたいイメージの実際の内容とは無関係にキーワードを羅列したりするようなことは、まったく無駄であるだけでなく、一部のユーザーのアクセシビリティに重大なダメージを与えます。
まとめ
単にウェブ検索におけるSEOのことだけを考慮する場合、img要素のalt属性はそれほど重要な意味を持ちません。基本的には、画像を理解しないユーザーエージェントを利用する人々のための代替テキストを記述するものであり、SEOの観点からalt属性が意味を持つのは次の場合だけです。
- 画像検索 – 画像検索ではimg要素のalt属性値として記述された代替テキストも参考にされる。
- リンク画像 – リンクに画像を使用する（a要素の内容としてimg要素を使用する）場合には、alt属性値に記述された代替テキストはアンカーテキストと同様に扱われる。
検索における画像の扱いの現状はこのようなものですが、Googleレンズ3に見られるように、Googleによる画像の理解は飛躍的に進み、そこに映っているものや書かれている文字などをかなり正確に認識できるようになっています。将来的には、こうした技術がウェブ検索にも導入されるでしょう。
そうしたおそらくそう遠くない将来を見越して、ページの文脈に沿ってその画像をよく表す代替テキストをalt属性に指定することを習慣づけておけば、画像の扱いが変化したときに慌てずに済むことでしょう。alt属性を指定するのであれば、そうした近い将来のことも意識しておいたほうがよさそうです。