サイトを制作する上で必ずといってもいいほど、ページの一部に画像を使用している人は多くいるはずです。
サイトに画像を使用する場合はSEO最適化を計るために、基本的な「img要素」と「alt属性」について知っておく必要があるので覚えておきましょう！
img要素とalt属性について
img要素とは
img要素はhtml上で指定した場所に画像を表示させることができるタグで、閉じタグを必要としないインライン要素です。一般的なブラウザで表示されている画像のフォーマットは、「JPEG・PNG・GIF」がよく利用されています。
他にも、アニメPNGやアニメGIF・SVG・PDFなどをsrc属性の値として指定することができる。
×
○
img要素の属性や値に関する情報はTAG indexを参考にすると分かりやすいです。
alt属性とは
alt属性は、画像が表示されない環境で「画像の代わりとなるテキスト」として表示されます。
その画像がどういった画像なのかをユーザーやGoogleのロボットに伝える役割を果たします。
また、alt属性には画像に関連する適切なキーワードを入れておくと検索結果に表示されるようになります。
例えば、画像がちゃんと表示されていない場合以下のような表示結果になるかと思います。
この時にalt属性にしっかりキーワードが入っていないと、そこに何の画像があるのか分かりません。ですので、その画像がどのような画像なのかをユーザーに分かりやすく示すために必要となるのです。
alt属性を入れていれば、以下のような表示結果となります。
もし、画像が表示されていなくてもそこに何の画像があるのかを示すことができます。
ちなみにちゃんと表示されている場合はこのような画像が表示されます。
alt属性が無いからといってSEOに直接影響があるわけではありませんが、キーワードの詰め込みすぎには注意しなくてはなりません。画像とは全く関係のないキーワードやキーワードを詰め込みすぎるとスパム行為と判断され、検索結果に影響を及ぼす可能性もあります。
また、必ずalt属性にキーワードを入れなくてはいけないわけでもありません。
矢印の画像を例にあげると、文章と関連性がない場合、「alt=””」このように何も入れなくても問題ありません。
画像の前後に位置する画像と関連する文章がある場合はキーワードを入れるようにしましょう。
alt属性の有効な記述方法
以下の5つを守り記述していれば、SEO対策、ユーザビリティ対策、スニペット対策に効果的になります。
- 前後の文章に適切な画像を挿入
- alt属性は自然なキーワード
- alt属性は画像をわかりやすく説明する文章
- alt属性は前後を意識した文章
- 32文字以内
Google webマスターツールのヘルプでも記述方法を詳しく述べているので参考にしておきましょう。