SEO面でもアクセシビリティ面でも重要
画像には、必ず代替文字を指定しておきましょう。SEO面でもアクセシビリティ面でも重要です。
画像の意味を文字で表現する代替文字（alt属性）
HTML上で画像を表示させるためのimg要素には、何らかの原因で画像が表示できなかった場合のために、画像の代わりに表示する文字を指定できます。
その文字の事を「代替文字」といいます。
以下のように、imgタグの中にファイル名（src属性）やサイズ（width属性・height属性）と並べて、「alt」属性を使って記述します。
＜img src="ファイル名" width＝"200" alt="交通安全のポイント" /＞
この代替文字は、画像が何らかの原因で読み込めなかった場合のほか、もともと画像が表示できない環境で閲覧された場合は、音声読み上げブラウザでアクセスした場合などで使われます。
また、通信速度の遅い環境では、画像の表示が完了するまでの間、代替文字が表示されている事もあります。
このように、アクセシビリティの面でも重要なので忘れずに記述しておきましょう。
尚、代替文字には、画像の代わりに表示されても意味が通じる内容を記述しておかなければなりません。
例えば、画像のファイル名を入れたり、ただ「画像」とだけ書いたりしても全く意味がない点に注意してください。 画像の代替文字として望ましいのは、画像の代わりとして正確に意味が伝わる内容です。
代替文字は検索エンジンにも有効
この代替文字は、画像そのものの内容を文字で表現したものとして、検索エンジンも解釈します。
したがって、キーワードを含んでも文脈上問題がないのなら、画像の代替文字にもキーワードを含めておくと良いでしょう。
弊社がインストールしたDrupalは本文中に画像を挿入する再、代替文字を入力するフォームが表示されます。
そうする事で、ページ内でのキーワードの出現頻度を高める事ができ、SEO面で有効です。
例えば、東京国際展示場について説明しているページで、有明の海を撮影した写真を掲載する事を考えます。
この場合、代替文字に「有明の海」とだけ記述するよりは、「東京国際展示場から見える有明の海」のように、キーワードを含ませておくほうがページ内のキーワード出現頻度を向上させられます。
代替文字は、ページの内容を判断する材料のほか、画像検索機能にも活用されます。
GoogleやYahoo! JAPANなどでは、検索後を単語で入力して画像を検索する機能があります。こ
れらの検索には、画像に指定されている代替文字も、検索結果を表示する材料として使われています。
適切な代替文字を書いておく事は、画像検索の検索結果からのアクセスを増やす効果も期待できるでしょう。
スパム的な記述は避ける
画像が表示される限り、代替文字はアクセス者には見えません。
そこを悪用して、検索エンジン向けに大量の無関係な文字列を含めてはいけません。
それは検索エンジンスパムと判断されて、ペナルティの対象になる可能性があります。
代替文字には、画像を正しく表現する文字列だけを記述するようにしましょう。
表現がおかしくならない程度にキーワードを含めるようにする事で、SEO面でも旨く活用できます。
例えば、次のような代替文字は避けるようにします。
- 同じ単語を何度も列挙する。
- 小さな画像に大量の文章を記述する。
同じ単語を大量に列挙しても意味がありません。
これは、本文内の単語でも代替文字内の単語でも同じ事です。
大量に列挙されすぎている単語は、特に重要な単語だとは判断されません。
悪質な場合には、ページそのものにペナルティが科せられる可能性もあります。
また、画像サイズを考えて明らかに代替文字が多すぎる場合も、スパムとして判定される可能性があります。
代替文字に長い説明文を入れないように注意しましょう。
画像の面積が本当に大きくて、表現する内容が多く、代替文字が長くなってしまう場合は問題ありません。
ただし、本当に画像化が必要かどうか再検討する必要はあるでしょう。
デザイン目的の画像はalt属性を空にする
デザイン目的で使用している（言葉としての）意味がない画像のalt属性値には、何も指定しないでおきます。
alt属性は文法上は省略できないので、「alt=""」のように値の中身を空にして記述します。
そうする事で、「特に問題はない画像だ」という事を伝える事ができます。
