みなさんこんにちは。takato（@enjoying_free）です！
web制作をしていると、alt属性というのを耳にしたことがあると思います。
サイト内に画像を入れる際必要になるコードです。
ですがalt属性を入れなくてもサイトのビジュアルが崩れることはありません。
ではなぜalt属性が必要なのか、その理由をみなさんに紹介します。
alt属性が必要な理由
alt属性の入力が無くてもビジュアルには何も影響はありませんが、実はSEOに大きく悪影響を与えてしまいます。
サイトを評価するクローラーは、画像のみではその画像が何を意味しているのか把握できません。
alt属性に記入してある文章を元に、画像の内容を判断するのです。
そのためalt属性の記載が無い画像を多く使用すると、クローラーはそのサイト記事全体が何について説明しているのか把握出来ず、サイト評価が下がってしまうのです。
反対にalt属性に画像の説明がされている場合、クローラーはその画像が何を意味しているのか把握する事が出来るため、サイト記事全体の評価が高まります。
つまり、alt属性はクローラーに対して画像の説明を行うために存在しており、alt属性を記入する事でサイト記事全体の評価が高くなるということです。
また、何かしらの不具合で画像が表示されなかった場合、alt属性に記入されていれば、その記載内容が反映されます。
SEOについてはこちらの記事を読んでみてください↓
alt属性の記入方法
alt属性の記入方法はとても簡単です。
使用するコードは「alt=””」のみです。
alt属性は画像の内容を説明するため、imgタグの中で使われます。
<img src="https://aaaaaaaaaaaaaaa.jpeg" class="icon" alt="">上記のように使用します。alt属性は基本的にimgタグの最後に記入することが多いです。
非常に簡単な分、記入し忘れてしまうことが多いので気をつけてくださいね！
サイト制作時のalt属性記入のコツ
実際にweb制作を行なっている僕から、alt属性の記入に関してコツを紹介します。
コーディング時に画像を貼ると思いますが、その際にalt属性も合わせて記入するのはやめた方が良いです！
その理由は、制作途中で画像の張り替え作業が発生することが多々あるからです。
そのため全く違う画像を貼ることになり、その度にalt属性の記入内容も変更しなければいけなくなります。
そうならないためにも、画像を貼ったらalt=“”のみ書いておき、画像が確定した後にalt属性の内容を記入しましょう。
そうすることで無駄な作業を回避する事ができます。
また、alt属性に入力する文字は、単語ではなく文章で説明する方が適切です。
例えば上記の画像をalt属性で説明する場合、「男性、メモをとっている、足組み」のように単語を並べるのではなく、「ソファーに座ってメモをとっている男性」というように文章で説明することを意識してください。
最後に
以上がalt属性の必要な理由と記入方法・記入の際のコツの紹介でした。
alt属性はSEOに直結する大切な要素です。画像を使用する際は必ずalt属性を記入するようにしましょう。