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

2016年12月23日2023年4月22日

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