【 簡単 SEO 対策 】img タグには alt 属性を付けるといいことあるかも？

こんにちは HARU（ @HARU ）です。

みなさんはブログを書いていて SEO 対策 として何かやっていますか？

専門知識が無いと初心者ブロガーには難しいことから、初心者ブロガーでも簡単にできる SEO 対策までいろいろあるとは思う。

今回はその中でも簡単にできる SEO 対策として、img タグ（ 画像 ）に alt 属性 を設定することを説明したいと思う。

img タグについて

ブログに画像を貼り付けると以下のようなコードで表記される。

  
    <img border="0" src=～～ />
  

この<img /> が img タグである。画像 ＝ img タグで認識して問題ないと思う。

alt 属性って何？

そもそも alt 属性とは、画像が読み込まれなかったときに、代替としてテキスト表示させるためのものになる。

通常通り画像が表示されている場合、alt 属性が設定されていてもテキストは表示されない。

ということは alt 属性は、画像が表示される環境下ではまったく意味を持たないタグである。

というのは間違いでコンピュータは alt 属性を認識するため、コンピュータに対して何の画像か認識させることができる意味のあるタグである。

alt 属性を設定されていない画像は、コンピュータからすれば何の画像かわからないので、画像検索などからの流入は期待できなくなる。そもそも画像検索にも引っかからないんじゃないだろうか。

alt 属性を付けて SEO 対策

すべての画像に alt 属性を設定すれば、画像のすべてをコンピュータに認識させることができ、画像検索からの流入も期待できるかもしれない。

しかし alt 属性には意味のある内容を記載しなければならないルールがある。

冒頭でも記載した通り、alt 属性には画像の代わりにテキストとして表示させる意味もある。

たとえばアイキャッチ画像などは alt 属性があっても無くても困らない画像である。こういった画像に alt 属性を設定してはいけない。

ルールに反する使い方をすると SEO 対策のつもりが、逆にアクセスを減らしてしまう結果になってしまう恐れがある。

alt 属性設定の注意点

意味を持たない画像に設定してはいけない

alt 属性の設定は画像に意味を持たせる意味もあるが、画像が表示されなかったときのテキスト化の意味が一番大事なことである。

アイキャッチ画像なんかは意味を持たない可能性が高いので、alt 属性は設定しないことになる。

意味を持つか持たないかは個人の判断になってしまうが、文脈上画像が無いと説明できない場合などは alt 属性が必要になってくると考えている。

たとえば私の場合以下のようなとき、alt 属性を設定している。

  
    <p>（２）ワークスペースウィンドウが表示されたら、① キャプチャをクリック、② [ 指定領域のスクリーンショット ] をクリック</p>
    <p>
      <img alt="Screenpresso ワークスペースウィンドウからスクリーンショット" ~~~ />
    </p>
  

画像の意味的にアイキャッチでなければ alt 属性があってもいいと思う。

簡潔な文で設定する

alt 属性をたくさん設定することで、コンピュータからはいろいろな意味の画像として認識される。そのためキーワード検索においてヒットしやすいかもしれない。

しかしキーワードの乱用は SEO の観点から考えると逆効果を生む可能性が高い。

例となる画像

alt 属性設定 良い例

  
      alt="砂漠にいる3頭のラクダ"
  

画像について簡潔に説明したい意味を記載する。

alt 属性設定 悪い例

  
      alt="砂漠 ラクダ 曇り 暑そう モフモフ "
  

“ 砂漠にいるラクダ " の意味で画像を使っている場合、「 曇り 」や「 暑そう 」などというキーワードは適切ではない。

もちろん「 曇り 」や「 暑そう 」などを意味した画像として使っている場合はその限りではないが、キーワードとしては全部で 3 つくらいまでにするようにしよう。

alt 属性を設定しない場合

意味の無い画像に関しては alt 属性を設定しないというルールがあるが、その場合 alt="" と表記することが必要になる。

もし画像の img タグ内に alt 属性が無い場合、alt="" と追記する必要があるので注意すること。

なお、Blogger に関しては alt 属性を追記する必要がある。

img タグに alt 属性を設定する

alt=""と img タグ内記載されている場合、そこにキーワードを入力するだけで alt 属性を設定することができる。

  
    <img alt="こんな感じにキーワードを入力する" border="0" src=～～ />
  

img タグ内に最初から alt 属性が記載されていない場合、alt="" と追記して設定するだけでOKだ。

Blogger で alt 属性を設定する

HTML で alt 属性を設定することに不安な人で Blogger を使ってる人は、以下の手順で alt 属性を設定することができる。

（１）Blogger 画像をブログ記事に貼り付ける

※ 例では HTML のエディタ画面で画像を貼り付けている。

（２）① 作成エディタに変更

（３）② 貼り付けた画像をクリックし、[ プロパティ ] をクリック

（４）画像のプロパティ ウィンドウ が表示される

（５）「 代替テキスト（ alt ）」の欄に alt 属性を設定し、[ OK ] をクリック

ちなみに画像のプロパティ ウィンドウ を空欄のまま [ OK ] をクリックすると、alt="" と追記されるので、alt 属性を入れない場合にもやっておくことをオススメする。

まとめ

実際、alt 属性が直接の SEO 対策になるかというと、効果的にはそうでもないらしい。

しかし、HTML の文法的にも画像をコンピュータに認識させるためにも、alt 属性を的確に設定することは必須と言ってもいいと思う。