目次を見る08

画像のalt属性の正しい書き方|キーワード詰め込みが逆効果になる理由

Wemiro編集部読了目安 13
代替テキスト画像SEO画像検索

「altにキーワードを入れれば上がる」という思い込みを、まず外す

自分のサイトの記事に画像を入れるとき、alt属性(オルト属性=画像の代わりに読まれる説明テキスト。代替テキストとも呼びます)の欄に、そのページで狙っているキーワードをそのまま貼り付けていないでしょうか。

「画像1枚ごとにキーワードを入れられる=評価を足せる枠が増える」という発想は、いっけん合理的に見えます。しかし Google の公式ドキュメントを読むと、この考え方は効かないどころか、サイトがスパムとみなされる要因になりうる書き方だと分かります。

この記事では、Google公式の説明にそって「代替テキストは何のためにあるのか」を押さえたうえで、自分のサイトの画像を写真・図解・リンク画像の3パターンで書き分ける手順を紹介します。読み終えたら、自分の記事を1本開いて、そのまま直せる状態を目指します。

代替テキストは「検索エンジン向けの入力欄」ではない

まず前提を正します。Google公式では、代替テキストについて次のように説明されています。

  • 画像に関してより多くのメタデータ(画像の情報)を提供するうえで、最も重要な属性は代替テキストである
  • 代替テキストは、スクリーンリーダー(画面の文字や画像の説明を読み上げる音声ブラウザ)を使うユーザーや、低帯域幅のネットワークを使っているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立つ

つまり代替テキストは、もともと「その画像を見られない人に、画像の内容を伝えるための文章」です。検索エンジンがそれを手がかりにしているのは、あくまで「人に伝わる説明はGoogleにも伝わる」という順番であって、逆ではありません。

もう1つ大事なのが、Googleは代替テキストだけを見ているわけではないという点です。公式には、Googleは代替テキストに加えて、コンピュータビジョン(画像認識)のアルゴリズムやページのコンテンツを使用して、画像のテーマを理解すると説明されています。さらに、画像のキャプションやページタイトルなど、画像が掲載されているページのコンテンツから画像に関する情報を抽出するとも書かれています。

ここが、キーワード詰め込みが割に合わない理由の核心です。画像の中身と周りの文章から、その画像が何なのかはすでに推測されています。そこに無関係なキーワードだけを書き足しても、辻褄の合わない情報を1つ増やすだけになります。

「関連するテキストの近くに置く」ほうが先

Google公式のSEOスターターガイドには、分かりやすい例が載っています。ロンドンの毛糸店を評価しているページであれば、毛糸店の住所・説明・クチコミ情報を記述した部分にその毛糸店の写真を埋め込むことは理にかなっている、という説明です。そうすることで、Googleとユーザーが画像をテキストに関連付けることができ、何に関するページなのかという背景を理解しやすくなるとされています。

Search Consoleヘルプでも同様に、可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置することが推奨されています。

alt属性の文言をひねる前に、その画像が本文の適切な位置に置かれているかを見直すほうが先、ということです。記事の冒頭にとりあえず入れた「なんとなくのイメージ画像」は、どんなにaltを工夫しても、関連付ける相手のテキストがそもそも近くにありません。

キーワードの詰め込みが「逆効果」になる、公式の根拠

Search Consoleヘルプは、代替テキストの書き方をこう説明しています。

代替テキストを設定するときは、適切にキーワードを使用して、ページのコンテンツの内容に沿った、情報に富む、役に立つものになるようにします。

注目したいのは、キーワードの使用そのものは否定されていないことです。禁じられているのは「羅列」のほうです。同じ公式ヘルプに、こう続きます。

alt 属性にキーワードを羅列すること(キーワードの乱用とも呼ばれます)は避けてください。ユーザー エクスペリエンスが低下するだけでなく、サイトがスパムとみなされる要因となる場合もあります。

では「キーワードの乱用」とは何か。Googleのスパムポリシーでは、Google検索結果のランキングを操作する目的で、ウェブページにキーワードや数字を詰め込むことと定義されています。そして、乱用には不自然にリストやグループの形式を使ったり、関連性のない場所でキーワードが記載されたりする傾向があると説明されています。

具体例として挙げられているのは次のようなものです。

  • 実質的な付加価値のない電話番号の羅列
  • ウェブページが特定の都市や地域に関する検索結果の上位に掲載されるようにするための、都市名や地域名を羅列したテキストのブロック
  • 同じ単語や語句を不自然なほど繰り返すこと

「関連性のない場所でキーワードが記載される」——これは、画像の中身と関係のないキーワードをaltに入れる行為が、まさに当てはまりやすい説明です。altという欄は本文より目立たないぶん、無自覚に「関連性のない場所」になりやすい、と考えたほうが安全です。

公式が挙げる2つの「悪い例」

Search Consoleヘルプは、子犬の画像を題材に、悪い例を2種類示しています。

  1. 悪い例(代替テキストがない)<img src="puppy.jpg"/>
  2. 悪い例(キーワードの乱用):キーワードを羅列した代替テキストを付けたもの

ここが実務上とても大事なところです。「書かない」も「詰め込む」も、どちらも悪い例として並べられています。つまり目指すべきは、その中間にある「情報に富む、役に立つ説明」であって、どちらかの極端ではありません。

自分のサイトの画像を直す5ステップ

ここからは手を動かす順番です。記事を1本選んで、上から順にやってみてください。

  1. その記事に何枚の画像があるかを数える。まず対象を確定させます。多くの記事は「思っていたより画像が少ない/多い」のどちらかです。
  2. 1枚ずつ、画像の役割を1語で分類する。「説明のための図解」「実物の写真」「クリックできるリンク画像」「本文と関係のない飾り」のどれか。ここを飛ばして文章を考え始めると、全部同じ調子の文になります。
  3. その画像を電話で相手に伝えるつもりで、口に出して説明する。出てきた言葉をそのまま書くと、たいてい「情報に富む、役に立つ」文章になります。うまく説明できない画像は、alt以前にその画像を置く意味があるかを疑ってください。
  4. 書いた文にページのキーワードが自然に含まれているかだけ確認する。含まれていなければ、それで構いません。入れるために文を壊すのが詰め込みです。ここは「入れる作業」ではなく「確認するだけの作業」だと割り切ります。
  5. 画像が本文の関連する記述の近くにあるかを確認し、離れていれば移動する。前述のとおり、Googleは周りのテキストからも画像を理解します。altを直すより効くことがあります。

CMS(記事を書く管理画面)を使っている場合、HTMLを触る必要はありません。Google公式も、img要素のalt属性を使ってHTMLに追加できるが、CMSでは画像をサイトにアップロードする際にその説明を指定する簡単な方法が用意されている場合があると説明しています。画像の詳細設定にある「代替テキスト」欄がそれにあたります。

ワークスルー:同じ記事の3枚を実際に書き分ける

抽象論だけでは動きにくいので、架空の記事「新入社員向け 経費精算システムの使い方」に載っている3枚の画像で、実際に書いてみます。3枚とも同じページにありますが、役割が違うので書き方も変わります

1枚目:操作画面のスクリーンショット(説明のための画像)

経費精算システムの申請画面を撮ったものです。

代替テキスト
避けたい書き方経費精算 システム 経費精算 使い方 経費 申請 経費精算システム おすすめ
惜しい書き方スクリーンショット
推奨する書き方経費精算システムの申請画面。上部に「新規申請」ボタン、中央に日付・金額・用途の入力欄が並んでいる

避けたい書き方は、同じ単語を不自然なほど繰り返す形そのもので、公式が挙げる乱用の例に重なります。「惜しい書き方」は詰め込みではありませんが、画像を見られない人に何も伝わりません。推奨する書き方は、電話で説明したときに出てくる言葉に近く、しかも結果的に「経費精算システム」「申請画面」という語が自然に入っています。

2枚目:グラフ・図解(要点を伝える画像)

「経費精算にかかる時間が導入前後でどう変わったか」を示した棒グラフです。

図解でつまずきやすいのは、画像内の文字をすべてaltに書き写そうとすることです。軸の目盛りも凡例もすべて詰め込むと、読み上げても意味が取れない長文になります。ここはそのグラフが何を示しているか(結論)を1文で書くのが実用的です。

  • 避けたい書き方:グラフ 経費精算 時間 導入前 45分 導入後 12分 棒グラフ 比較 経費精算システム
  • 推奨する書き方:経費精算1件あたりの所要時間が、導入前の45分から導入後は12分に短縮されたことを示す棒グラフ

同じ数字を使っていても、文になっているかどうかで伝わり方がまったく変わります。

3枚目:リンクになっているバナー画像

「申請マニュアルを見る」ページへ飛ぶバナーです。ここだけは、他の2枚と考え方が変わります。

Google公式には、画像の代替テキストは、画像をリンクとして使用する場合にアンカーテキスト(リンクが設定されている文字)として使用できると明記されています。

つまりリンク画像のaltは、画像の見た目の説明ではなく、リンク先が何かを説明する文として働きます。

  • 避けたい書き方:青いバナー(見た目は説明できているが、リンク先が分からない)
  • 推奨する書き方:経費精算の申請マニュアルを見る

ここを取り違えると、リンクなのに行き先の分からない画像が増えます。「この画像は押せるか?」を分類の段階(ステップ2)で確認しておく理由がここにあります。

よくある誤解と、判断に迷うところ

誤解1:飾りの画像にも、とりあえずキーワードを入れておくべき?

本文と関係のない飾りの画像に、ページのキーワードを当てはめるのは避けるのが無難です。スパムポリシーが挙げる「関連性のない場所でキーワードが記載される」という形に近づくためです。

一方で、公式が「代替テキストがない」ことを悪い例として挙げているのも事実です。空欄にするか詰め込むかの二択で考えず、まず「その飾りの画像は本当に必要か」を先に検討するほうが、実際には近道になることが多いです。説明する中身がない画像は、記事にとっても中身がない可能性があります。

誤解2:文字数の正解があるはず?

「altは○文字以内」という話をよく見かけますが、Google公式の説明にあるのは文字数ではなく、ページのコンテンツの内容に沿った、情報に富む、役に立つものという基準です。数えるべきは文字数ではなく、その文が画像の内容を言い当てているかです。目安が欲しい場合は「電話で説明したら一息で言い終わる長さか」を代わりに使うと、実務では扱いやすくなります。

誤解3:altさえ直せば画像検索から流入が増える?

代替テキストは重要な要素ですが、Googleは前述のとおり画像認識のアルゴリズムやページのコンテンツもあわせて画像のテーマを理解します。alt単体で結果が決まるわけではありません。また、検索結果での見え方は時期や検索した人の状況によって動くこともあるため、altを直したあとに順位や表示が変わっても、その変化がaltだけによるものとは限りません。効果は仮説として扱い、他の変更と切り分けて見るのが安全です。

なお、ファイル名も見直す価値があります。Google公式は、一般的なファイル名の使用は避けること、そしてサイトに数千点の画像がある場合は、画像の名前指定の自動化を検討することを挙げています。IMG_0001.jpg のような名前が並んでいるなら、altとあわせて直す候補です。

自己点検チェックリスト

書き終えた記事を、公開前に次の観点で確認してください。

観点確認することつまずきやすい点
役割の分類画像ごとに「説明/写真/リンク/飾り」を決めたか全画像を同じ調子の文で埋めている
伝わるかその文だけで画像の内容が想像できるか「画像」「写真」「グラフ」で終わっている
詰め込み回避同じ語を不自然に繰り返していないか狙いのキーワードを毎枚コピーしている
関連性画像の中身と無関係な語を入れていないか飾りの画像にページのキーワードを流用
リンク画像押せる画像のaltがリンク先を説明しているか「バナー」「ボタン」など見た目の説明のまま
配置画像が関連する本文の近くにあるか冒頭にイメージ画像だけ浮いている
ファイル名一般的すぎるファイル名になっていないかIMG_0001.jpg のまま

どの記事から手をつけるかは、数字で決める

ここまでの手順は1記事あたり10分ほどで終わりますが、サイト全体の画像となると話は別です。全ページを一律に直すのは、たいてい途中で止まります

現実的なのは、すでに検索結果に表示されている記事から順に直すことです。表示されている記事は、Googleがすでに評価対象にしているぶん、改善が数字に表れるかを確認しやすいためです。逆に、そもそも表示回数がほとんどない記事のaltを磨いても、効果を確かめる材料が手に入りません。

Wemiroは、GA4とSearch Consoleの実データをつないで、どのページが表示されていて、どのページが読まれているかを一画面で把握できるようにします。「まずどの記事の画像から直すか」を、勘ではなく数字で決められるようになります。

直す順番の決め方そのものは「記事リライトの優先順位の付け方」で詳しく整理しています。あわせて、検索結果での見え方を整える話は「クリックされるタイトルと説明文の作り方」もご覧ください。 </content> </invoke>

出典

  1. Google 検索セントラル - Google 画像検索のベスト プラクティス
  2. Google 検索セントラル - SEO スターター ガイド
  3. Google 検索セントラル - Google ウェブ検索のスパム ポリシー
  4. Search Console ヘルプ - Google 画像検索のベストプラクティスについて

NEXT STEP

クライアントへの説明に使える実際の画面を見てみませんか

ご自身の目で、GA4・Search Consoleのデータがどう整理されるかを確認いただけます。

無料デモを見てみる