SEO対策として、ついつい手を抜いてしまいがちなのが画像ファイルのalt属性です。

alt属性はオプションではなく必須

alt属性はなんとなくオプション扱いされていますが、HTML4.0以降において、必須の属性とされています。

また、alt属性は検索エンジンに画像の情報を伝えるための手段でもあるため、alt属性が書いていないと検索エンジンは画像の情報を解釈することがでなくなってしまいます。

SEO対策を売りにしているホームページ作成会社が作成したホームページの画像ファイルにまったくalt属性が付いていないのをこの間見つけてしまいました。見た目の変化はないため、お客様が気付くことはなかなかありませんが、手を抜いてはいけない部分です。

すべての画像に付ける必要はなし

しかしながら、すべての画像にalt属性を付加する必要はありません。その画像に重要なキーワードが含まれている場合だけでかまいません。

アイコンであったり、その画像がただのデザイン的なもので、情報として何も持っていない画像の場合はalt=””と中身は空っぽにしておけば良いでしょう。

特に重要なのは見出し

画像がよく用いられる箇所として、見出しがあります。見出しは閲覧者の注目を惹く必要があるため、強調するために画像ファイルを用いているケースが数多くあります。

見出しは特徴的な言葉やユーザの興味を惹くキーワードが用いられていることが多いため、その内容は非常に重要です。よって見出しに画像が用いられている場合、見出しに書いている文字と同じ内容をalt属性に書いておく必要があります。

内容が重要

見出しは文字が書かれていることが多いので、そのまま文字をalt属性に書けばいいのですが、ロゴマークとかはどうでしょうか?

ロゴの場合はalt=”会社ロゴ”と書いてしまいがちですが、社名を書くべきです。会社ロゴと書いても情報としての価値がありません。alt=”○○会社”と書きましょう。

またクーポンを示した画像であれば、alt=”クーポン”ではなく、alt=”初回キャンペーン 1000円割引!”のようにキャンペーンの内容を具体的に書くことで、検索エンジンに情報を正確に伝えられます。

CSSを活用すればリッチな見出しも

見出しに関しては画像ファイルにするよりも、スタイルシートを使ってテキストで見出しを作ることをお勧めします。

というのはサイト作成後、お客様側でタイトルを変更したい場合に画像であれば毎回画像を作らなければならないのにたいして、スタイルシートで見出しを作っていれば文字を変更するだけで簡単に内容を変えられます。また、alt属性も気にする必要がなくなるなどの利点も得られます。

background-imageを利用すれば、画像と変わらない見出しが作成可能です。

サイトの持つ効果を最大限に引き出す手段の1つとして、画像ファイルのalt属性を活用しましょう。

本日は以上です。