画像の alt 属性の書き方

2019年7月24日

ブログや Web ページに画像や写真を載せる際は、基本的に HTML の img タグを使う。

この img タグには alt 属性というものがあるのだが、WordPress やブログサービス等を使ってブログ書いてる人には alt 属性を「いい加減に」書いちゃってる人が多い。

だが、alt 属性は SEO やユーザビリティにも影響するので、完璧でなくとも ある程度 ちゃんと書いた方がいい（alt 属性を完璧に書くのは意外と難しい）。

alt 属性とは

alt 属性って何ですかって話をすると。

W3C が定義する本来の役目は、

「そのページに画像が一切表示されてなかった場合でも、ページ全体で意味が通る文章を書くもの」

である。Google では同様に、

「ページのコンテンツのコンテキスト（文脈）に沿った情報」

と説明している。

ここで肝心なのは、「単なる説明文ではなく文脈として意味の通る文章」ということである。

ブラウザでページを表示した場合、通常は画像が表示されるので、alt 属性に書かれてる内容は普通のブラウザで見る限りは表示されない。

だが、主に以下の用途で使用される。

基本的な書き方は以下のとおり。

1 に関しては、alt="" と書く。

2 の部分に関しては、Google では「画像検索」等の機能を持っているため、一応は何かしら説明文などを書いておいた方が良い場合が多い。

文脈が通るように書くという点が alt 属性の難しさだが、そこまで意識せずとも、単に画像の説明文を書くだけでも決して悪いわけではない。

Google のガイドラインでは、以下のように例を挙げている。

最も最悪なのは、ファイル名などがそのまま書かれているパターン。

alt 属性はコンテンツ（文章）の一部なので、ファイル名が書かれていれば、検索エンジンはファイル名をキーワードの一部として認識する。

そして例えば、alt 属性に「abc.png」などと書いてあれば、音声案内では

「えーびーしーどっとぴーえぬじー」

とか、

「えーびーしー・・・ぴんぐ」

とか、

そういう音声が流れる。。。

alt 属性は多少は長くなっても構わない

さきにも書いたとおり、alt 属性は可能な限り正確に言葉で表現した方がよい。

なので、多少、説明が長くなっても構わない。

例えば、京都旅行に行って金閣寺を写真に撮り、それを Web に掲載するなら以下のように

「金閣寺の写真」

のように書いても構わないが・・・より具体的に文脈を意識して、

「京都へ行って金閣寺の写真を撮りました」のようなことを書いた方よい。

問題は、「面白い写真が撮れました」などと書いて、その写真をポンッと掲載した場合である。

この場合は、キャプションは短くても構わないが alt 属性に関しては「どういう状況で、何がどう面白いのかを言葉で伝わるように表現」しなければならない。

なので、こーいう場合は多少長くてもちゃんと前後と文の通る説明文を書くべきである。

・・・と言っても「実際に画像が表示されてない状態を意識して書く」ってのは結構難しいので、「ファイル名だけが書いてある」のような余程いい加減な状態でなければ、単なる画像の説明文でも構わない。

正直言えば、自分も SEO 関連の仕事以外では、そこまで文脈を意識して alt 属性なんて書いてない。上記の「良い例」止まり程度で済ますことが多い。

アイキャッチ画像の alt 属性はどうすべきか

これに関しては判断が難しい。

判断に迷ったら、以下のような解釈で考えれば良いだろう。

alt 属性のキーワード詰め込みは厳禁

十数年ほど前、まだ当時 Yahoo! 採用の inktomi エンジンが力を持っていた頃、SEO 対策として、画像の alt 属性にキーワードを詰め込むという、とんでもない行為が一部で流行ったことがある。

今の時代にこんなことをすれば、さきの Google の例にもあるようにガイドライン違反となり、あっという間にインデックスから外されるのでやってはいけないｗ

以上。