alt属性が大切?画像検索最適化の重要性とその方法について

区切り線

alt属性

画像検索の効果

画像検索は主に、見た目の情報から自分の得たい情報を探す際に使用されることが多いかと思います。

例えば、「黒いリュックサック」が欲しいと思った場合、リュックサックの取り扱いがあるアパレル関係のブランドサイトを探すよりは、「リュック ブラック メンズ」等の検索ワードで画像検索をすることで、数ある黒のリュックサックの中から、自分の好みのデザインのリュックサックを探し出すことが出来るでしょう。

「リュック ブラック メンズ」画像検索結果

このようなユーザーの検索意図を考えると、画像検索からの流入も考えるべきではないか?という興味が出てきます。

ある日の私の実際にあった例

私は先日、リュックサックが欲しくてショップを渡り歩いていたのですが、その中で一つ気に入ったリュックがありました。結局その場での購入には至らず、家に帰ってからだんだん欲しくなってきたので、ウェブ検索をしようと思ったのですが、ブランド名がわかりませんでした。
そこで、その時入ったお店の名前をなんとか思い出し、「店舗名 リュック」と画像検索をして、その店舗のブログに行き着くことが出来ました。
結果、お店の運営するオンラインショップにて、購入することが出来ました。

この例から考えられること

実際に私が自分の見た物の色や形等から商品を判別したことからも、見た目の情報を頼りに検索を行ったことは明確です。

オンラインショップのページに直接アクセスできていれば、より購入までのプロセスは短かったかもしれませんが、ブログで使用感やファッションについて触れられていたため、より詳しい情報を知ることが出来、特に何の煩わしさを感じることもなく、気が付けばオンラインショップに移動し、購入に至ったのでした。

これは、何もアパレル関係のサイトに限らず言えることで、料理のレシピや不動産物件、楽器や車等、見た目の情報が重要なサービスであれば大いに関係しているのではないでしょうか。

画像検索に最適化する方法

1.正しくalt属性を設定する

画像検索を考える上で最も意識されている部分の一つです。

alt属性は画像が何のコンテンツなのかを説明する役割を持つので、より具体的に記述することが大切です。

良い記述例

<img src="dog.jpg" alt="犬">

もちろんこれでも悪くはありませんが、どんな犬かがわかりません。
最適な例としては下記になります。

<img src="papillon.jpg" alt="走っている老犬のパピヨン">

「走っている老犬の」という文字を足して、犬種名を具体的に記述しましたが、これだけで、写真に何が写っているのか十分説明出来るかと思います。
この際に、画像のファイル名もわかりやすい物にしておくと、よりわかりやすくなるかと思います。

悪い記述例

<img src="papillon.jpg" alt="犬 老犬 パピヨン トイ・スパニエル スピッツ チワワ リス犬 立ち耳">

このようなキーワードの羅列のような書き方は、Googleの公式でも非推奨とされており、ユーザーの利便性を損ねる可能性があることが指摘されています。

参考:https://support.google.com/webmasters/answer/114016?hl=ja

2.画像の前後に、画像に関連する十分な情報を掲載する

実際に、画像をサイト上に掲載する際の多くは画像の前後に画像に関連したテキストの情報も掲載されることになるかと思うので、alt属性の中に無理やりキーワードを詰め込んだりせず、前後の説明の中で、適切な内容として書くことで、より画像検索で表示されやすくなります。

画像が中心のWebサイトの場合は、テキストを記述することが難しい状況が考えられますが、テキストを掲載するスペースを設ける設計をすることも画像検索最適化を考える上では、重要かと思われます。

3.画像は見栄えの良い物を使う

画像の見栄えを考える上で、画質はとても大切です。

検索ワードに沿った内容の画像が表示されることからも、類似した画像が多くなることが想定されますが、その中でもやはり見栄えが良い物がクリックされやすくなります。

反対に、画質が悪くて見えづらい物や、何が写っているのかよくわからない物、画像が小さすぎる物等は画像自体の訴求力に問題が生じ、クリックしてもらえなくなることが考えられます。

「コーギー-ブリーダー」検索結果

上記は「コーギー ブリーダー」での検索結果の一部です。
赤枠で囲った画像は比較的画質が良いので、クリックされやすいことが考えられます。

ページの表示速度に影響を与えない範囲で、出来るだけ高画質な画像を使うことで、画像検索からのクリック率に影響する物と思われます。

4.sitemap.xmlに画像情報を記述する

画像情報をサイトマップ(sitemap.xml)に追加することで、画像に関する情報を適切に検索エンジンに伝えることが可能となります。

下記は、ページ内に2枚の画像を使用していた時の記載例です。

</?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image01.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/image02.jpg</image:loc>
    </image:image>
  </url>
</urlset>

こちらについては、手書きだと大変なので、「Screaming Frog SEO Spider」を使うと簡単に作成することが出来ます。

Screaming Frog SEO Spider
Webサイト情報を一括取得 Screaming Frog SEO Spiderの使い方

画像検索の流入を確認するには?

画像検索からの流入を確認する方法では、SerchConsoleを使います。
SerchConsoleへの登録が終わっていない方は、こちらの記事を確認してください。

サイト改善に必須!Googleサーチコンソールの使い方と登録方法【2017年度版】
サイト改善に必須!Googleサーチコンソールの使い方と登録方法【2017年度版】

SerchConsoleの検索トラフィックから検索アナリティクスを表示し、検索タイプのフィルタから「検索タイプでフィルタ」を選択。その中から「画像」を選択すると、画像検索のトラフィック状況を確認することが出来ます。

SerchConsole画像検索トラフィック

画像検索最適化を行い、流入が見込める場合は、是非こちらも確認してみてください。

まとめ

個人的にも画像検索を使う機会が多く、通常ウェブサイトの検索をするべきワードであっても、何らかのヒントを得るために画像検索を利用したりすることもあります。

画像で視覚的に情報を得られることは、テキストで情報を得るよりも効率的である場面もたくさんあります。
サイト内に画像を掲載する際には、画像検索からの流入も考えることで、画像に対する意識も変わるのではないでしょうか?

クオリティの高いストック写真はたくさんありますが、多くのサイトで使い回されていることも事実です。

画像自体の品質もさることながら、その画像がオリジナルの物であるかどうかも、画像に対する興味を引く一つの要素となり得るかと思うので、情報を伝える大きな手段の一つである「画像」を今一度見直してみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。