画像で出来るSEO対策 alt属性の正しい設定!やらないと損だよ

画像:画像で出来るSEO対策 alt属性の正しい設定!

ブログやウェブサイト上で扱う画像やそのファイル名に対して、みなさんはどれくらいSEO対策していますか?

実は画像関連で出来るSEO対策はいくつかあります。その1つが、「画像にalt属性でテキストを追加」すること。しかも割と簡単!

効果の程は微々たるものかとは思いますが、それだけに軽視している人も多く、競合に差を付けやすい所でもあります。
とは言え実際のところ、正しく理解している人は意外と少ないようです。

HTMLに不慣れでも出来るよ!ついでにファイル名の付け方も見てね。
制作の現場でも放置される事が多いよね。コーダーが気を利かせてテキスト入れてる。

今まであまり意識してなかった方は是非、やってみて下さいね。

そもそもalt属性とは

サイト上で上手く画像が表示されなかった時の為に、その代替手段としてテキストを表示させる必要があります。その代替テキストを入れる所が「alt属性」です。
「代替テキスト」とも呼ばれ、HTMLのimgタグで指定出来るものです。

HTMLが分からない人でも、WordPressを使っているなら管理画面の「メディア」から画像を選んで入力出来ますし、「投稿」の記事編集画面から画像を選んだ時にも入力出来ます。

画像:altテキスト入力画面の説明

HTMLが分かる人なら以下ですね。imgタグの中にある「alt=””」の所ですね。

何のためにテキスト入れるの?

大きく分けると2つ。

  • ①画像の代替
  • ②検索エンジンに適切に画像情報を伝える

① 画像の代替手段としてのテキスト

アイキャッチや商品画像、あるいはイベントの様子など、ブログやウェブサイトで画像を載せる事があると思います。訴求力があるので画像は大事ですよね?

でも、何らかの理由で画像が上手く表示出来ない事もあります。
その場合、本来画像が表示されるエリアが真っ白になります。ユーザーは「ん?」ってなりますよね。
それだと困るので、もしも画像が表示されない時は、ユーザーを困らせない為にもテキストを入れて情報を伝えましょうって事です。

目の不自由な方が使うスクリーンリーダーや通信回線によっては画像を確認できないユーザー向けの補助機能として役立ちます。

Googleの情報サイトによると、

  • 悪い例(代替テキストがありません): <img src=”puppy.jpg”/>
  • 悪い例(キーワードの乱用): <img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
  • 良い例: <img src=”puppy.jpg” alt=”子犬”/>
  • 最も良い例: <img src=”puppy.jpg” alt=”投げたものを取ってくるダルメシアンの子犬”/>
写真の内容がより詳細に分かるような説明が良いんだね。

スパムと見なされるような長すぎるaltテキストを入れたり、キーワードを並べたりするのは止めましょう。

簡潔でわかりやすいaltテキストを使用する。ファイル名も!

ファイル名とaltテキストは短くてわかりやすいものが適しています。

大事なことは、画像が表示されなかったとしても、ユーザーが困らない様にする為のテキストであるという事。

② 検索エンジンに適切に画像情報を伝える

画像ファイル名を最適化すると、Google画像検索でも画像を適切に理解されやすくなります。

Googleはalt属性への代替テキストだけでなく、画像周辺のテキストも見ています。例えば、キャプションや、画像にや関連するテキスト、ファイル名などです。

画像検索で上手く表示されれば、そこからのアクセスも期待出来ますね。

たとえば、IMG00023.JPG よりも、my-new-black-kitten.jpg の方がテーマを判断するために役立ちます。

参考:Google 画像検索に関するおすすめの方法

alt属性の注意点

実は画像のalt属性はimgタグにしか設定できません。画像の指定方法は、HTML側とCSS側での2つの方法があります。
imgタグはHTML側で指定するものです。

画像の使い分け HTML側とCSS側で何が違うの?

出来るだけ意味のある重要な画像はHTML側のimgタグで指定します。
レイアウトの兼ね合いでCSS側での指定になる事もありますが、基本的な考え方は「意味のある重要な画像か?そうでないか?」です。

また、HTML側で意味のない装飾目的の画像を使うときは「alt=””」の様に属性の中身を空の状態で指定します。空だとしてもalt属性自体は必要なのでこの様にしています。

まとめ

画像を指定する時は「altもセットで指定する」と考えておけば、代替テキストの入れ忘れも無くなります。

検索エンジンとユーザー双方にメリットのある設定ですので、きちんと設定して少しでも競合に差を付けましょうね。

読んで頂きありがとうございました。以下も参考になりますのでどうぞ

画像:画像軽量化ツールTINY PNGでサイト表示速度改善

SEO効果あり 画像軽量化ツールTINY PNGでサイト表示速度改善