画像の説明を記述するalt属性
Webサイトに画像を掲載する事はよくある事です。
画像もなく、テキストだけでは伝わる物も伝わりにくいですし、絵で説明を加えたり、写真を載せて商品や物件のイメージを伝えたりと用途は多岐にわたります。
また、文字を画像化することで、CSSでは難しい表現も可能になりますね。
画像はWebサイトには無くてはならない存在でしょう。
便利な画像ですが、人の目から見れば、その画像が何を説明しているのか、どんな文字が書かれているのかが分かりますが、検索ロボットからはそれがわかりません。
また何かしらの不具合で画像の読み込みができない場合、何も表示されません・・・
そんな時に活躍するのがalt属性です。
画像が表示されない場合、alt属性へ記述した内容が代替テキストとして表示されます。
さらに画像検索でも使用されるので、alt属性に画像の説明を適切に記述しておくことが大切になります。
alt属性を設定する3つのメリット
alt属性へ適切な記述をすることで、様々なメリットがあります。
1.何かしらの不具合で画像が表示されないとき、代わりにテキストで説明をしてくれる
2.画像からリンクを貼る場合、altに設定したテキストがアンカーテキストのように扱われるので、リンク先が分かるような内容を設定しておくことで、リンク最適化につながる可能性がある
3.画像を適切に説明することで、画像の検索に特化した検索エンジンに何を示す画像なのかを伝えることができ、画像検索からWebサイトの閲覧も期待できる
alt属性の書き方
alt属性は適切に設定してあることで効果が出ます。
ではどうしたら正しく記述できるのかを説明します。
以下のポイントを抑えながら、効果的な文言でalt属性を記述しましょう。
・キーワードを詰め込まない
・極端に長いaltテキストは書かない
・ページに掲載する文章を書くような感覚でaltテキストを書く
悪い例
<img src=”drink.jpg” alt=””>
<img src=”drink.jpg” alt=”夏 冷えた ビール 居酒屋 枝豆 黒崎茶豆 つまみ”>
良い例
<img src=”drink.jpg” alt=”枝豆とビール”>
最適な例
<img src=”drink.jpg” alt=”キンキンに冷えたビールとつまみに最適な黒崎茶豆”>
単語を並べるよりも文章にした方が伝わりやすくなります。
情景が浮かぶような文章を心掛けてみてください。
ただし、長くなりすぎると逆効果になるので、適度な文章量にする必要があります。
alt属性とtitle属性
画像を説明するための属性としてalt属性の他に、title属性も使う事ができます。
title属性はimg要素以外でも使う事ができ、HTML5の全ての要素に指定する事ができます。
title属性を設定することで、要素を補足する事に役立ちます。
マウスカーソルを合わせると、ツールチップで文字が表示されます。
ただし見ている人からすると、どこにtitle属性が設定されているか分かりにくく、マウスカーソルを意識して載せて、title属性で補足している内容を見る事はなかなかありません。
偶然マウスを載せたら文字が出た！という経験もあるのではないでしょうか。
それほど利便性は高くなく、SEO的な効果も低いと考えられているので、無理やり設定する必要はないかと思います。
使うのに便利な場面としては、意図的にマウスカーソルを載せる「リンク画像・文字」が適切でしょう。
リンク先の情報を補足してあげることで、クリック率が上がるかもしれません。
利便性やSEO的な効果が低くても、多少の変動はあるかもしれない要素ではあるので、使う場合はalt属性と同じく、キーワードの詰め込み過ぎなど、SEOスパム判定となりそうな表現は避け、慎重に使いましょう。
まとめ
・alt属性は画像の説明を入れる
・キーワードを並べるのではなく、説明する文章を入力する
・title属性と混合するが、alt属性は画像の説明、title属性は要素の補足を行う属性
・あまり文章を入れすぎると逆効果となる
