SEO対策であまり意識されていないケースが多いimg タグのalt属性。今回はそのimgタグのalt属性の書き方、不適切な例や正しい例をご紹介していきます。
alt属性はなぜ設定しないといけないか？
alt属性はページを読み込む際、何らかしらの原因で画像が表示されなかったときの代替え手段として表示させるテキスト情報です。
上記の要因以外にも視覚障害者の方などが使用するスクリーンリーダーというページのテキストを読み上げてくれるブラウザでも、画像部分にalt属性が設定されていれば読み上げられます。
alt属性の書き方
上記イメージの通りにalt属性を指定するようにしましょう。
<img src="outswan.png" alt="ここに画像の説明をテキストで入れます。">Alt属性の指定の注意点
Alt属性は下記のポイントを注意しながら設定するようにしましょう。
- 画像の具体的な内容を書きましょう
- 見出しの要素またはリンクの要素なっている場合、必ずalt属性を指定しましょう。
- 多数のキーワードを詰め込みすぎないようにしましょう。
- 飾り目的の画像はalt属性を指定しなくていい
Alt属性の具体的な書き方
検索エンジンへ画像の情報を適切に伝えるために画像の内容を具体的に書くことをお勧めします。たとえば、スポーツの画像を張る場合、なんのスポーツをしているのか・選手の画像であれば選手の名前の情報・チームの情報などを記載するようにしましょう。
Alt属性の悪い例
<img src="orange.png" alt="bp212">Alt属性の良い例
<img src="orange.png" alt=""広島県産の名物果物 「ネーブルオレンジ"」>見出し、リンクの要素は必ずalt属性を指定
検索エンジンに見出しの要素・リンクの要素はテキストとして情報を伝えないといけないため、必ずalt属性を記述するようにしましょう。
<a href="https://example.co.jp/orange/">
<img src="orange.png" alt=""広島県産の名物果物 「ネーブルオレンジ"」>
</a>
なお、アンカーテキスト・見出し・ナビゲーションなどはページにとって重要な要素となるため、検索エンジンが正確にクロールされるよう、画像ではなくテキストでの表現が好ましいです。
alt属性にキーワードを詰め込みすぎない
画像内に多数のキーワードを詰め込みすぎると、画像の内容が伝わりにくく検索エンジンにとっても不正行為・スパム行為と認識される可能性があるため、避けましょう。
<img src="orange.png" alt="果物 オレンジ Orange おれんじ 広島県 fruits 人気 ">画像の周辺ワードの文脈についても意識
alt属性を付与されたテキスト情報は、その画像の周辺にある文脈情報も参考にしています。各都道府県の天気予報を表すグラフ画像の場合、alt属性は天気予報のグラフ情報を端的に表す内容を記述してあげ、その画像の近くに天気予報の説明を記述することによって、検索エンジンは画像の内容をより認識できます。
<img src="orange.png" alt=""各都道府県毎の今週の天気予報グラフ">
<p>今週、関東・甲信越では晴れ間が続きますが、週末にかけて天気は下り坂になっていくでしょう。</p>画像へのアンカーテキストの指定について
画像に向けられたアンカーテキストは、Googleへ画像の内容を提供していることとなります。そのため、画像に向けられたリンクを設置する場合は、alt属性同様に、画像を的確に表すリンクテキスト記述するようにしましょう。
<a href="orange.png">
画像を拡大する
</a>
<a href="orange.png">
広島県産の「ネーブルオレンジ」拡大画像はこちら
</a>
画像のファイル名も内容を表すワードに
画像のファイル名についてもGoogleが画像内容を理解する1つの要素となっています。そのたえ、ファイル名も「img1.jpg」といった連番画像の内容にせず、画像内容を表す文字列に設定しましょう。
<img src="img01.jpg" alt="青森県産 りんご">
<img src="aomori-apple.jpg" alt="青森県産 りんご">
画像情報を検索エンジンに正確に伝えることで、コンテンツの内容をより正確にGoogleに伝えることができ、画像検索結果にもコンテンツの画像が表示されやすくなり新しい集客につながるため、できる限りalt属性やファイル名などの意識をして実施することをおすすめします。
