914 SEO対策においてalt属性は意外と重要なのです。
Webサイトやブログを運営されているなら、画像を多く使用することもあるかと思います。
旅ブログなら風景の写真を入れたり、説明部分なら見てわかりやすいように図を使ったりと、いろいろな場面で活躍します。
そうやってユーザーには見やすくなるのですが、残念ながら検索エンジンは画像が置いてあるだけではそれが何を表しているかまで認識することができません。
そこで鍵になるのが「alt属性」です。alt属性を使うことで、検索エンジンに画像の意味を伝えることができます。
今回はそのalt属性についてや、SEO対策をふまえた適切な設定方法をご紹介します。
alt属性の目的
alt属性というとSEO対策としては軽視しがちです。なんのために必要なのか、ここで改めて主な目的を以下に挙げました。
- 画像が表示されなかった際に表示
-
たとえば画像がリンク切れを起こし、それが表示されなくなったとします。
ただ単純に画像がないままだと、それが何を表していたのかが不明です。その際、alt属性に設定された文章が表示されます。こういった文章ひとつあるだけで閲覧している人に対して情報を伝えることができます。
SEO対策としてではなく、ユーザーに良心的な設定として考えておくと良いでしょう。
- 音声ブラウザに認識される
-
音声ブラウザとは、視覚障害者などが主に利用するソフトで、Webサイトの内容を音声で読み上げることができます。
こちらを利用する場合、画像についてはalt属性を読み上げるようになっています。きちんと明記しておくことで、そういったユーザーにも情報を届けることができるのです。直接的なSEO効果ではありませんが、使い勝手を良くするためにあると良いです。
- 画像検索でヒットする
-
Googleが提供する検索エンジンの中で、画像を検索できるサービスがあります。キーワードから画像を探すだけでなく、ある画像に似た画像も検索することもできます。
そういった画像検索では、alt属性に設定した文章中のワードに関連した言葉が検索結果に反映されるようになっていますので、正しく情報を伝えるという意味で、SEO対策の役割を担っているためとても重要です。
title属性との違い
混同されることが多いalt属性とtitle属性。その明確な違いは何なのでしょうか。
title属性とは、画像などにマウスを合わせることで表示される文章を設定することができ、それが何を表しているのかを示します。
それに対してalt属性は、img要素などの検索エンジンに認識されない要素(img、area、inputなど)に対して使用されます。title属性には多くの要素に使用できますが、こちらは明確な使用目的を持って使うことが重要です。
- title属性……要素にマウスを合わせることで表示されるポップアップ。様々な要素に使用可能。
- alt属性……検索エンジンに要素の内容を知らせるために使う。使用できる要素が決まっている。
alt属性の設定方法やSEO対策としての注意点
様々な状況によって設定方法は異なります。以下に代表的な例を挙げました。
写真の場合
より具体的にその写真の情景がわかる文章が好ましいです。リンク切れになった場合を想定し、どういう写真であったかきちんと示しましょう。
<img src="cakecut.jpg" alt="カットされるチョコレートケーキ">
こんなときどうする？：検索ワードを意識しすぎている
SEO対策するなら、検索されたい言葉をあえて設定する方もいるでしょう。たとえば、写真を以下のように設定したとします。
<img src="cakecut.jpg" alt="チョコレートケーキ ビターチョコレート 切り方 バキバキに切る ケーキ屋さん ナイフ 9人分">
これはとても危険です！ 検索エンジンにSEO対策だと認識され、ペナルティを科される可能性があります。このようなキーワードを並べるだけの書き方はせず、きちんと文章で設定しましょう。
もちろん、SEO対策を考えて適切にキーワードを含めるのは重要です。ただし、入れすぎないように注意しましょう。
文章付きの画像の場合
そこに文章や文字が書かれているならば、それをそのまま記述すると良いでしょう。本来の使用意図に沿うように使います。
<img src="caketxt.jpg" alt="美味しそうなチョコレートケーキ">
こんなときどうする？：文章が長い
文章が長い場合、その文章をそのまま書けば長々と続いてしまいます。そのため、SEO対策目的と判断される可能性があります。
すべてを書くのではなく、一部を抜粋するか、またはその文章をまとめて一言で記入すると良いでしょう。
<img src="caketxt2.jpg" alt="チョコレートケーキ5000円">
リンク付きの画像
他のページに移動するようなボタンやアイコンの場合、リンク先のページ名などを明記すると良いです。
たとえば、以下のようにトップページへ移動するリンクをはっているならば、[alt=”ケーキのイラスト”]などにせず[alt=”HOME”]など行き先がわかるようにします。
<a href="http://s-seo.jp/"><img src="home.png" alt="HOME"></a>
マークや矢印など
見た目を整えるためにリストの頭に配置したり、流れを表すために矢印などのアイコンを使用したりする場合、その画像自体に意味がないのであれば、空のままにしておいても問題ありません。SEO的観点から考えると、入れない方が無難でしょう。
美味しそうなケーキがひとつ
美味しそうなケーキがふたつ
<img src="list.png" alt="">美味しそうなケーキがひとつ <img src="list.png" alt="">美味しそうなケーキがふたつ
主な設定方法は以上です。
ただ入れれば良いというわけではなく、それぞれの形を理解した上で適切に反映させましょう。
