画像の「代替テキスト・キャプション・タイトル・説明とは?」効果的な使い方

画像の「代替テキスト・キャプション・タイトル・説明とは?」効果的な使い方 | Eyecatch-Image

WordPressで画像を入れるときに

  • 「タイトル」
  • 「キャプション」
  • 「代替テキスト」
  • 「説明」

という4つの設定箇所があります。挿入する画像のデータです。

WordPressの画像情報を見てみましょう。

タイトル・キャプション・代替テキスト・説明

これらの設定箇所は何となくわかっているようで、わかっていないという方も多いのではないでしょうか。

Googleのクローラーは画像を見ることができません。このような画像のデータを適切に設定しておくことで、どのような画像なのかしっかり伝わりますし伝える必要があります。

また、読み込みが遅く画像が表示されないときの代わりに表示したり、読み上げ機能を使用しているユーザーにもどのような画像なのか伝える役割があります。

どの項目がどう作用するのか、またはどの項目が重要なのかしっかり把握しておくための記事をまとめてみました。
それでは、始めていきましょう。

目次

タイトル

タイトルはHTMLでいうところの「title属性」にあたります。マウスを画像にあわせた際にツールチップとして表示する情報です。

例えば「example.jpg」というWordPressのメディアから画像を挿入するとタイトルだけが自動的に「example」と表示されます。

タイトルはクローラーの見た目やWEBページの検索結果にはさほど影響がないといいます。

キャプション

キャプションはWordPressに備わっている入力機能です。試しに画像を挿入するとき、キャプション内に入力してみましょう。

「お洒落なカフェ」というデータを入れました。以下のように表示されます。

お洒落なカフェ

キャプションもタイトルと同様、クローラーやWEBページの検索結果にさほど影響ありません。そういった影響というよりは画像下に画像の説明を入れるという、訪問ユーザーへを意識した項目となるでしょう。

代替テキスト

代替テキストはHTMLでいうところの「alt属性」になります。

こちらの代替テキストはWEBページの検索結果に影響を与える項目なのでしっかり記入したい項目です。Googleサーチコンソールのヘルプでは代替テキストについてこのように言及しています。


alt 属性は、画像ファイルのコンテンツを説明するために使用されます。この属性は、次のような理由から重要です。


Google にとって代替テキストは、画像の題材についての有用な情報です。Google はこの情報を使用して、ユーザーのクエリに最適な画像を判断します。
視覚障害がある、スクリーン リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。
適切ではない例:


<img src=”puppy.jpg” alt=””/>
適切な例:


<img src=”puppy.jpg” alt=”子犬”/>
最適な例:


<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬”>
次のような記述は避けてください。


<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん
小さな子犬 レトリーバー ラブラドール ウルフハウンド
セッター ポインター ジャックラッセル テリヤ
ドッグ フード ドッグフード 安い 子犬の餌”/>
alt 属性に多数のキーワードを指定する(「キーワードの乱用」)と、ユーザーの利便性が低下し、サイトがスパムとみなされる可能性があります。キーワードを多用するのではなく、情報に富んだ有用なコンテンツの作成に力を注ぎ、キーワードは文脈に合わせて適切に使用してください。Lynx などのテキスト ブラウザを使用してコンテンツを確認することをおすすめします。


出典 : support.google.com

このように、代替テキストは読み込みが遅く画像が見れないときののデータを判断するための重要な要素となります。登山をしたときの画像であれば「登山風景」「富士山」といった画像の内容と代替テキストが一致する内容を記入しましょう。
ただし効果が見込める要素だからといってワードを詰め込み過ぎるとスパムとみなされてしまう可能性があるので注意しておきたいところです。

Google画像検索

WEBページへの検索流入は何も通常検索からだけではありません。Google画像検索から入ってくることもあります。

私自身、Google画像検索は多様しますし使う人はわりと多いと思います。

このGoogle画像検索で画像を上位表示させるためにはしっかりとした画像データの設定が求められます。Googleウェブマスター向け公式ブログでこの件について言及している記事があるので見てみましょう。


しかし、Google はどうやってこれらの画像が紅茶ではなくコーヒーであることを認識しているのでしょうか?Google のアルゴリズムは画像をインデックスに登録するとき、その画像が見つかったページのテキストを見て、画像に関する情報を得ています。それ以外にも、ページのタイトルや本文も見ています。画像のファイル名や、リンク先を示すアンカーテキストや「alt 属性のテキスト(英語)」から情報を得ることもあれば、コンピューター ビジョンを用いて画像情報を得たり、ページ上にキャプション テキストが存在するときは 画像のサイトマップ に含まれているキャプションの情報を用いることもあります。


画像をインデックスに登録しやすくするために、下記の点を守ってください。


・画像が埋め込まれている HTML ページと画像そのもの、どちらも Google がクロールできるようにしておくこと
・Google が対応している形式の画像であること(BMP、GIF、JPEG、PNG、WebP、SVG)


さらに、下記のようにしておくこともおすすめします。
・画像のファイル名が画像の内容に関連した名前になっている
・画像の alt 属性が、人間が読んで分かるような画像説明になっている
・加えて、HTML ページのテキスト コンテンツと画像近辺のテキストを、画像に関連した内容にしておくことも有効です。


出典 : webmaster-ja.googleblog.com

代替テキストを元に画像の情報を得ているとしっかり名言しています。Google画像検索に表示させるためにはファイル形式・ファイル名も重要で、代替テキスト以外にもキャプションから得ることもあるようです。

とはいえ代替テキストがGoogle画像検索に上位表示させる上で重要な役割を果たしているというのがわかります。

説明

こちらはHTMLにもWEBページ上にも表示されない項目です。画像のメモとして使用する程度なので特に気にする必要はないかと思います。

まとめ

画像を挿入するときの「タイトル」「キャプション」「代替テキスト」「説明」の項目について紹介しました。一番重要なのが「代替テキスト」、続いて「キャプション」です。

画像のデータというとファイル名のように英語で書いた方がいいような気がしますが、日本語でも認識するようなので、無理に英語で書く必要はありません。日本語で問題ないでしょう。

WEBページのコンテンツ評価を上げるためには、文章やHTMLだけでなく画像にも気を配る必要があります。「キャプション」、「代替テキスト」これらの項目に適切なデータを入力しましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次