alt属性の役割を知っていても、正しい使い方をできている方はほとんどいないはず。SEOに直接的な効果が無い分、間違った設置をしも、修正することもないまま。この記事を見て、再度alt属性について見直してみるのはいかがでしょうか。
alt属性の意味
画像の代替えとなるテキストとして、画像に代わる役割を持つalt属性。しかし、本来の意味を理解していないために間違った使い方をしてしまう人も。alt属性を正しく使い、SEOに適した読みやすいソースにしましょう。
alt属性とは
「alt属性とは？」こう聞かれた時になんとなくは説明できても、正しい意味を理解してない人は多いです。以下はwikiペディアの引用となりますが、alt属性の正しい意味を小難しく述べるとこのようになります。
alt属性（英語: alt attribute）はHTMLとXHTMLで使われるHTML属性（英語版）。HTML要素が表示できないときに代わりにレンダリングされるテキスト（いわゆる代替テキスト、英語: alt text）を指定する。ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者（例えば視覚障害者など）もそのHTML要素の内容を理解できる。画像のアクセシビリティを向上するためにalt属性を指定すべきだが、alt属性には必ずしもテキストを指定する必要はなく、alt=のように何も指定しないこともできる[1]。この属性はHTML 2.0で導入され[2]、HTML 4.01以降ではimgタグとareaタグにおいて必須となった[3]。またinputタグと非推奨（英語版）のappletタグでも指定できるが、こちらは省略できる。
つまり、画像が正しく表示出来ないときに、画像の代わりとして表示される代替テキストがalt属性となります。またスクリーンリーダーと呼ばれる、WEB情報を音声に変換するシステムにおいても、画像を音声として伝えることができるのです。
alt属性の書き方
alt属性はimgタグ内に下記のように設置します
このように書きます<img src=”http://xxx.jpg” alt=”画像の内容を明確にしたテキスト”>
alt属性の中に入れるテキストに決まりはありません。しかし、説明が長すぎるテキストや、同じ文章を繰り返すテキスト、また取って付けたようなテキストは、返ってSEOの効果を落とすことも。W3Cでは以下のように言及されています。
When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as “alt text”.When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
翻訳すると「img要素を使用するときは、alt属性を使用して代替テキストを指定します（※この属性の値を “代替テキスト”と呼びます）。画像内に、記事を読み進める上で重要な単語が含まれている場合、代替テキストにそれらの単語を含める必要があります。それは、代替テキストが画像と同じ役割を果たす必要があるからです。ですが、必ずしも画像の視覚的特性を説明するテキストにする必要はありません。画像と同じ意味を伝えなければならないことに注意してください。」
つまり、alt属性は重要な画像に設置し、画像の内容が伝わるもの。そして画像の意味を的確に伝えるものにしましょうと言及されています。
alt属性の使い方
では実際に記事を書くとき、どの場所にどのように設置するのが正しいのでしょうか。結論から言えば、記事を読み進める中でその画像が重大な役割を果たすものでない限り、alt属性は必要無いと言えます。下手なalt属性の設置は、返ってSEO効果を落とすことも。
アイキャッチ画像の場合
アイキャッチの場合、記事のイメージを表すデザイン的な要素を含みます。そのため、alt属性を入れる必要はありません。
もしalt属性を入れる場合は、画像が表すものを明確に伝えるテキストを一言で入れると良いでしょう。
見出し下のイメージ画像
見出し下のイメージ画像は、画像をイメージできるテキストを一言で入れるようにしましょう。
ここでも、必ずしもalt属性を入れる必要はありません。アイキャッチと同じような、デザイン的な要素の場合はalt属性が無くても良いでしょう。
図やグラグの画像
図やグラグの場合は、記事を読み進めていく上でとても重要な役割を果たします。その図やグラフが示す結果や内容を完結に伝えるalt属性を入れるようにしましょう。
商品画像や画像リンク
紹介する商品の画像であったり、画像がら別のページへのリンクには、alt属性を設置するようにしましょう。
商品画像の場合には、その商品の名称をそのまま入れます。画像リンクの場合は、どういったリンクなのかを端的に表すようにしましょう。
関連記事などのサムネイル画像
エントリ一覧や関連記事一覧に使われる画像には、alt属性を設置する必要はありません。
まとめ
SEOを意識するあまり、alt属性に極端なテキストを入れたり、ターゲットキーワードがてんこ盛りになっているケースも。このような使い方は返ってSEOを下げることにも繋がりかねません。
極論を言えば、alt属性は無いほうが良い。それは記事に関係の無い文章を連発してしまうだけだからです。正しい使い方で、キレイなソースになるalt属性を設置しましょう。