WordPressのブログやウェブサイトで扱うアイキャッチ画像やそのファイル名に対して、みなさんはどれくらいSEO対策していますか？
実は画像関連で出来るSEO対策はいくつかあります。その1つが、「画像にalt属性でテキストを追加」すること。しかも割と簡単！
効果の程は微々たるものかとは思いますが、それだけに軽視している人も多く、競合に差を付けやすい所でもあります。
とは言え実際のところ、正しく理解している人は意外と少ないようです。
今まであまり意識してなかった方は是非、やってみて下さいね。
この記事の目次
そもそもalt属性とは
サイト上で上手く画像が表示されなかった時の為に、その代替手段としてテキストを表示させる必要があります。その代替テキストを入れる所が「alt属性」です。
「代替テキスト」とも呼ばれ、HTMLのimgタグで指定出来るものです。
HTMLが分からない人でも、WordPressを使っているなら管理画面の「メディア」から画像を選んで入力出来ますし、「投稿」の記事編集画面から画像を選んだ時にも入力出来ます。
HTMLが分かる人なら以下ですね。imgタグの中にある「alt=””」の所ですね。
何のためにテキスト入れるの？
大きく分けると２つ。
- 画像の代替
- 検索エンジンに適切に画像情報を伝える
① 画像の代替手段としてのテキスト
アイキャッチや商品画像、あるいはイベントの様子など、ブログやウェブサイトで画像を載せる事があると思います。訴求力があるので画像は大事ですよね？
でも、何らかの理由で画像が上手く表示出来ない事もあります。
その場合、本来画像が表示されるエリアが真っ白になります。ユーザーは「ん？」ってなりますよね。
それだと困るので、もしも画像が表示されない時は、ユーザーを困らせない為にもテキストを入れて情報を伝えましょうって事です。
目の不自由な方が使うスクリーンリーダーや通信回線によっては画像を確認できないユーザー向けの補助機能として役立ちます。
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テキストを入れたり、キーワードを並べたりするのは止めましょう。
画像ファイル名も実は大事！
ブログでWordPressを使っているなら画像のURLは整理されていると思います。しかし、画像ファイル名は投稿者が考える必要があるので、「img01」や単なる数字の羅列のままの様に適当な名前を付けてはいけません。
画像ファイル名も画像の内容が分かる名前にします。意味のない数字の羅列などは変更しましょう。
② 検索エンジンに適切に画像情報を伝える
画像ファイル名を最適化すると、Google画像検索でも画像を適切に理解されやすくなります。
Googleはalt属性への代替テキストだけでなく、画像周辺のテキストも見ています。例えば、キャプションや、画像に関連するテキスト、ファイル名などです。
画像検索で上手く表示されれば、そこからのアクセスも期待出来ますね。
たとえば、IMG00023.JPG よりも、my-new-black-kitten.jpg の方がテーマを判断するために役立ちます。
alt属性の注意点
実は画像のalt属性はimgタグにしか設定できません。画像の指定方法は、HTML側とCSS側での２つの方法があります。
imgタグはHTML側で指定するものです。
画像の使い分け HTML側とCSS側で何が違うの？
出来るだけ意味のある重要な画像はHTML側のimgタグで指定します。
レイアウトの兼ね合いでCSS側での指定になる事もありますが、基本的な考え方は「意味のある重要な画像か？そうでないか？」です。
また、HTML側で意味のない装飾目的の画像を使うときは「alt=””」の様に属性の中身を空の状態で指定します。空だとしてもalt属性自体は必要なのでこの様にしています。
まとめ
画像を指定する時は「altもセットで指定する」と考えておけば、代替テキストの入れ忘れも無くなります。
検索エンジンとユーザー双方にメリットのある設定ですので、きちんと設定して少しでも競合に差を付けましょうね。
読んで頂きありがとうございました。以下も参考になりますのでどうぞ
note
]HTMLに不慣れでも出来るよ！ついでにファイル名の付け方も見てね。