画像・イメージ検索のSEO対策についてまとめました
Contents
画像・イメージのSEO対策についてまとめました
Webでは、SEOを意識したコーディングやライティングが求められますが、ついつい忘れがちなのが画像関係のSEO。しかし画像がメインのサイトでは、画像周りのSEO対策も重要です。上手に最適化することで、画像検索からのアクセスも見込めるため、適切なSEOを施しましょう。
1.ファイル名は簡潔に
ファイル名が長すぎると、クローラーの読み込みにかかる時間が長くなってしまいます。また、長いファイル名は管理上でも分かりづらいもの。画像の内容が分かるような簡潔なファイル名にしましょう。
2.検索エンジンによるalt属性の扱い
HTMLの文法上、画像の代替テキストをalt属性に記述する必要があります。
<img src="image.jpg" alt="画像の内容を表すテキスト" width="200" height="150" >
alt属性は、画像が表示されない場合の代替として表示されるテキストです。画像検索で上位を狙おうと、キーワードをずらずらと並べるような使い方をされてきたこともありますが、現在では検索の評価につながることはありません。簡潔なファイル名が望ましいのと同様に、alt属性もまた、画像の内容を端的に表したテキストが求められます。
具体的に検索エンジンは、alt属性を下記のように扱います。
・加点に使用することはない（meta要素のdescriptionやkeywordsと同様）。
・リンクを設定した場合には、アンカーテキストとして扱う。
ただし、場合によっては通常のテキストとして扱うこともあり、検索エンジンによるalt属性の扱いは曖昧な部分があります。いずれにせよ、あくまでもユーザーにとって分かりやすいテキストを記述することを心がけましょう。
3.検索エンジンによるtitle属性の扱い
title属性に画像のタイトルを入れておくと、そのタイトルで検索された際、Google画像検索の結果に表示されるようになります。つまり、キーワードを入れることで、アクセスアップの可能性があるということです。
ただし、画像と無関係なキーワードを詰め込むのはもちろんNG。検索をかけた際に表示される画像として適切かどうか、慎重に判断して記述しましょう。
4.a要素に画像を使用する場合
alt属性に代替テキストを入れることで画像でも問題なくクローラーに認識させることはできますが、写真などにリンクを貼っても、その画像がリンクかどうかは見た目で判断することができません。したがって、ユーザービリティを考えるとテキストリンクを使うのがベストな選択です。また、単にデザイン上の問題で文字を画像にしたものであれば、テキストをそのまま記述してCSSで整形したほうが良いでしょう。
5.aサイズに気をつけて
ランディングページでありがちですが、大きな画像をそのまま用いていることがあります。最近のPCでは回線の問題などはほとんど念頭には入れられませんが、スマートフォンやタブレットなどでは読み込みに時間がかかり、アクセシビリティ上問題となる場合があります。
サイズの大きな画像を使う場合は、下記のようなツールを使用し、サイズダウンすることをおススメします。
TinyPNG
https://tinypng.com/
ブラウザ上にPNG画像ファイルをドラッグ＆ドロップするだけで、最大70％まで圧縮することができます。画質をほとんど落とすことがなく、安心して使えます。
JPEGmini
http://www.jpegmini.com/
こちらはJPEG画像のファイルサイズを減らしてくれるツール。変換後とオリジナルを見比べることができて便利です。