画像のSEOの中でも最も重要な対策がalt属性の最適化です。
alt属性の重要性はよく語られますが、適切な記述ができていなかったり、キーワードを入れるだけなど、現在のSEOにマッチしない使い方のサイトは、意外にも多くあります。
改めてalt属性の正しい書き方を理解しておきましょう。
目次
alt属性とは？ その役割と効果
alt属性は、画像に対して、画像の代わりとなる文字を指定するための記述です。
img要素ではalt属性の記述は原則必須です。
alt属性に記述するテキストを一般的に「代替テキスト」または「altテキスト」 と呼びます。
img要素の他、イメージマップのリンクエリアを指定するarea要素でもalt属性は利用されます。
Webアクセシビリティの向上
alt属性の本来の用途は、Webアクセシビリティの向上です。
画像を表示しない（できない）状況でも、どんな画像がそこにあるのか説明するために、代替テキストが使われます。
スクリーンリーダー（音声ブラウザ）では、alt属性の代替テキストを読み上げたり、ブラウザの設定で画像を非表示にしている場合に、代替テキストが表示されます。
モバイルなどの低速回線では画像の読み込みに時間がかかることがあり、画像が表示されるまでの間、代替テキストが表示されます。
検索エンジンに画像の内容を伝える
alt属性は、ユーザーだけでなく検索エンジンにとっても重要です。
検索エンジンは、人間のように画像が示すものを理解できないため、代替テキストを画像解析のヒントとして利用します。
代替テキストは検索インデックスの対象になり、Web検索と画像検索のどちらにも使われます。
画像リンクにおけるアンカーテキストの代わり
画像をリンクにする場合、画像のaltテキストはアンカーテキスト（リンクテキスト）の代わりになります。
この場合は、通常のアンカーテキストと同様に、リンク先ページの内容を表すテキストをalt属性に記述します。
alt属性 (altテキスト) の適切な書き方
img要素のalt属性の値に画像の代替テキストを記述します。
<img src="images/image-title.jpg" width="600" height="400" alt="画像の代替テキスト">altテキストには、画像の内容を記述します。
コンテンツのテーマや画像が使われる文脈に沿った内容の説明を書きましょう。
例えば、犬の画像を載せたページがあったとします。
コンテンツのテーマが「動物の種類」であれば、画像のaltテキストは『犬』と書くだけでも適切と言えます。
しかし、「犬種」を紹介するページならば、altテキストには『ゴールデンレトリバー』と記述する方が適切であり、『犬』では文脈とマッチしませんね。
あるいは、ページが「犬の習性」を解説するコンテンツであれば、『聞き慣れない音に首を傾げる犬』と書いた方が適切です。
画像単体でaltテキストを考えるのではなく、コンテンツの文脈の中でそれぞれの画像が表しているものを記述しましょう。
alt属性を空にしてもよい画像
単なる装飾、アイキャッチとして画像を挿入したいこともありますよね。
コンテンツとして意味を持たない画像、または、なくても何らコンテンツに影響を与えない画像では、alt属性を空にすることが認められています。
alt属性の省略ではなく、属性値を空にする点に注意しましょう。
装飾目的の画像のalt属性
<img src="images/meaningless.jpg" width="300" height="200" alt="">
ただし、ユーザー（第三者）がアップロードする画像や、ライブキャプチャなど自動で生成するような画像等、あらかじめ内容がわからない画像には、alt属性そのものを省略することもできます。
alt属性の省略は、特殊かつ限定的なシチュエーションですので、通常は気にしなくてOKです。
ちなみにalt属性を省略する時でも、画像付近のテキストや画像のキャプションを使って、画像を説明することが推奨されています。
alt属性の省略
<figure>
<img src="images/live-capture.jpg" width="300" height="200">
<figcaption>定点観測の様子</figcaption>
</figure>
alt属性でのキーワードの使用
キーワードを多用するのではなく、情報に富んだ有用なコンテンツの作成に力を注ぎ、キーワードは文脈に合わせて適切に使用してください。
「画像の代替テキストにキーワードを含める」という話を聞いたことがあるかもしれません。
自然な形でキーワードを含めることができる場合は、キーワードを利用するとよいのですが、無理やりキーワードを入れ込まないようにします。
あくまで画像の説明になっているかを第一に考えましょう。
例えば、ページ内に10個の画像があって、「10個の画像全てに狙うキーワードを必ず含める」と言った発想は、もはや時代遅れなSEOの考え方です。
SEOに効果的なaltテキストの文字数
「altテキストは◯◯文字までにしなければいけない」という具体的な制限はありません。
ですが、SEOに配慮するなら長すぎない方が良いです。
文章のような長めのテキストではなく、いくつかの単語で構成される程度の文字数が最適です。
1つの画像のaltテキストに多くの言葉が含まれていると、結局のところ、画像そのものが何を示しているのかがわかりづらくなります。
画像は、その周辺にあるテキストと併せて解釈されるので、本文テキストと意味が自然に繋がるように画像を説明していればOKです。
デザインの都合上、文章そのものを画像で作成して貼り付け、alt属性に画像上のテキストを入力しているケースを見かけます。
ロゴやボタンなど特定の役割を持った画像を除くと、何でもテキストを画像化するのは推奨できない方法です。できるだけ避けましょう。
CSSやWebフォントなど、画像以外でデザインを工夫できることもあるので、検討したいところですね。
やってはいけないalt属性の書き方
altテキストは、いわゆるブラックなSEO対策として利用されてきた過去があるため、使い方を間違えると、Googleにスパム行為と見なされる可能性があります。
キーワードの乱用 (詰め込み)
altテキストにキーワードやキーワードの言い換えパターン、関連語などを詰め込んではいけません。
キーワードスパムの例
<img src="images/golden-retriever.jpg" width="600" height="400" alt="ゴールデンレトリバー 犬 ペット 愛犬 ワンちゃん ドッグ トリミング シャンプー">
Googleのガイドライン違反であり、明白なスパム行為です。
画像と関係ないテキストの使用
画像の内容と全く関係ないテキストを記述したり、違う画像なのに同一のaltテキストを使用しているのは好ましくありません。
例えば、キーワードを意識した定型文を、多くの画像のaltテキストに機械的にコピペするような使い方も不適切です。
画像と関係ないaltテキストの悪い記述例（過度な画像SEOの例）
<img src="images/labrador-retriever.jpg" width="600" height="400" alt="愛犬のインフルエンザ・感染症予防なら〇〇ペットクリニック">
<img src="images/siberian-husky.jpg" width="600" height="400" alt="愛犬のインフルエンザ・感染症予防なら〇〇ペットクリニック">
alt属性に関するよくある疑問
alt属性の使い方について解説してきましたが、alt属性に関するその他のよくある疑問についても紹介しておきましょう。
alt属性とtitle属性の違いは？
title属性は補足的な情報を記述するためのグローバル属性で、直接画像の内容を説明するための属性ではありません。
title属性を記述すると、画像にマウスを乗せた時に、ツールチップが表示されるブラウザが多くあります。
しかし、スマホでの閲覧やキーボードブラウジングではツールチップは表示されません。
以前ほどtitle属性が使用されることも少なくなった印象で、利用価値もそれほどないでしょう。
グローバル属性とは、全ての要素（タグ）で利用できる属性です。
abbr要素のように、title属性に特別な意味を付加する要素には利用が推奨されます。
SEOでの利用価値も同様です。
alt属性を適切に記述した上で、補足情報を追記したいのなら、title属性よりも画像にキャプションを付けるか、画像近辺の本文テキストで言及する方が効果的です。
altとfigcaptionの違いは？
figcaption要素は、figure要素の子要素として記述するタグで、図版・画像にキャプションを付けるために利用します。
figcaptionはalt属性の完全な代わりではないので、figcaptionを利用するからと言って、altテキストを省略すべきではありません。
画像のタイトルまたは補足や注釈など、画像の理解を促すために必要に応じて利用します。
CSSで設定した背景画像にaltテキストを設定するには？
alt属性は、HTMLのimg要素に対して設定できます。
CSSのbackground-imageプロパティで指定した画像にalt属性は設定できません。
代替テキストを必要とする画像はできるだけimg要素を使い、デザイン上の理由かつ文脈に影響しない画像にCSSを使いましょう。
まとめ
1つ1つ画像にalt属性を設定するのは少々面倒ですが、その一手間の蓄積がSEOでは大切です。
alt属性の記述のポイントをおさらいします。
- 画像のalt属性の記述は必須である
- 代替テキストには「その画像がどんな内容の画像なのか」を記述する
- 文脈に沿って画像を説明する
- コピペで使い回さず画像ごとに適切な代替テキストを用意する
- 文章のように長いaltテキストは検索エンジンに理解されづらい
- キーワード対策にalt属性を利用しない
- コンテンツとしての意味を持たない装飾画像はalt属性を空にする
- 画像リンクにおけるaltテキストはアンカーテキストの代わりとして設定する
『画像のalt属性はしっかり考えていなかった…』という方は、見直してみてください。
コメントをどうぞ