WordPressで記事を書くたび、右側のサイドバーにひっそりと現れる「代替テキスト」という入力欄。この空欄を見るたびに、少しだけ胸がざわつきませんか？

「これ、毎回しっかり埋めないとSEOで不利になるのかな？」
「でも、何を書けばいいんだろう。タイトルと同じでいいの？」
「面倒だから空欄のままにしちゃってるけど、いつかペナルティを受けるんじゃ……」

そんなモヤモヤを抱えたまま運用を続けている担当者の方は、実はとても多いのです。

最初にその不安を少し軽くしましょう。代替テキストは、無理に埋める必要はありません。しかし、「誰のために書くのか」さえ理解すれば、これほどサイトの価値を育ててくれるツールもありません。

代替テキストの本質は、Googleへのアピール（SEO）ではなく、「画像が見えない人への親切心（アクセシビリティ）」です。

この記事では、曖昧になりがちなalt属性（代替テキスト）の正解を、具体的な事例と判断基準（フローチャート）でお渡しします。今日から、「ここは書く、ここは書かない」と迷わず即断できる状態を、一緒に整えていきましょう。

そもそも「代替テキスト（alt属性）」とは？3つの役割を整理

「代替テキスト」や「alt（オルト）属性」という言葉は、Web制作の現場でよく使われますが、その定義を正確に把握している人は意外と少ないものです。

これらを専門用語として覚える必要はありません。シンプルに「画像が表示されない時に、代わりに表示される言葉」と考えてみてください。

そしてこの機能には、大きく分けて3つの役割があります。ここを整理すると、自然と「何を書くべきか」が見えてくるはずです。

altは「見えない人・機械」に中身を伝える唯一の手段です。

①画像が見えない状況での「通訳」としての役割

私たちが普段何気なく見ているWebサイトですが、すべての人が「目で画像を見ている」とは限りません。

例えば、電波の悪い地下鉄の中でサイトを開いた時、画像の部分が「？」マークや空白になり、そこに文字だけが表示されていた経験はないでしょうか。あるいは、視覚に障がいのある方が、画面の情報を音声で読み上げるソフト（スクリーンリーダー）を使ってWebを利用しているシーンを想像してみてください。

この時、代替テキストが設定されていない画像は、単なる「謎の空白」として無視されるか、あるいは「画像、IMGの1234ドットジェイペグ」といった無機質なファイル名として読み上げられてしまいます。これでは、伝えたい情報がまったく伝わりません。

代替テキスト（alt属性）とは、こうした「画像が見えない状況」において、情報の欠損を防ぐための「命綱」のようなものなのです。Webの世界におけるバリアフリー（アクセシビリティ）を実現するための、最も基本的で重要な機能と言えます。

②Googleとスクリーンリーダーにはどう見えているか

では、実際に機械たちにはどう見えているのでしょうか。

iPhoneの「VoiceOver」やAndroidの「TalkBack」といった音声読み上げ機能（スクリーンリーダー）は、画像に差し掛かるとalt属性に書かれたテキストを読み上げます。

もしaltに『日向ぼっこをしてあくびをする茶色の猫』と書いてあれば、ユーザーは脳内でその情景を描くことができます。しかし、もし空欄（かつ適切な処理がされていない）場合、ソフトによっては「画像」とだけ読み上げたり、ファイル名をそのまま読み上げたりして、ユーザーを混乱させてしまいます。

Googleの検索ロボット（クローラー）も同様です。近年のAI技術の進化により、Googleは画像の中身をある程度認識できるようにはなったものの、まだ完璧ではありません。

彼らは、画像そのものの解析データと合わせて、このalt属性に書かれたテキストを「画像の内容を理解する決定的な手がかり」として利用しています。

つまり、altを適切に記述することは、目の見えないユーザーにとっても、Googleにとっても、あなたのコンテンツを正しく理解するための「補助線」を引く作業なのです。

③「Googleへの手紙」ではなく「ユーザーへの親切」と捉える

多くのSEO解説記事では、「検索順位を上げるためにaltを設定しましょう」と書かれています。もちろん間違いではありませんが、順序が少し逆かもしれません。

Googleは「ユーザーにとって有益で、使いやすいサイト」を評価したいと考えています。

Google の自動ランキング システムは、検索エンジンでのランキングを操作することを目的として作成されたコンテンツではなく、ユーザーにメリットをもたらすことを目的として作成された、有用で信頼できる情報を検索結果の上位に掲載できるように設計されています。

引用元：Google Search Central「SEOの基礎：有用で信頼性の高い、ユーザーを第一に考えたコンテンツの作成」

つまり、目の見えないユーザーにも情報が伝わる親切な設計（アクセシビリティの確保）をしているサイトを、結果として高く評価するのです。

「SEOのためにキーワードを入れなきゃ」と考えると、どうしても不自然な文章になりがちです。そうではなく、「この画像が見えない人に、どう伝えれば親切か？」という視点に切り替えてみてください。それが結果として、Googleにも評価される「本質的なSEO」につながります。

代替テキストは、Googleへの媚びた手紙ではなく、見えないユーザーへの誠実な手紙なのです。

SEOに影響するって本当？順位との正しい付き合い方

「そうは言っても、やっぱり検索順位への影響は気になる……」というのが本音ではないでしょうか。ここでは、alt属性が具体的にどのようにSEO（検索エンジン最適化）に関わってくるのか、そのメカニズムと誤解を解き明かします。

最初に断っておきますが、altを書いたからといって、検索順位が直接的に上がる（ランキング要因として加点される）わけではありません。

順位を直接上げる魔法ではないが、サイト評価の土台となる。

検索エンジンは画像を「ファイル名とalt」で読んでいる

Googleの公式ドキュメント『検索セントラル』の「Google 画像検索 SEO ベスト プラクティス」には、明確にこう記されています。

Google は、画像のキャプションやページタイトルなど、画像が掲載されているページのコンテンツから画像に関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。

画像に関してより多くのメタデータを提供するうえで最も重要な属性は、代替テキスト（画像について説明するテキスト）です。代替テキストは、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。

引用元：Google Search Central「Google 画像検索 SEO ベスト プラクティス」

Googleのロボットは、ページ全体のテキスト情報は簡単に理解できますが、画像の中に何が描かれているかを完璧に読み取るのはまだ苦手です。

そこで、私たちが設定するaltテキストを頼りにします。「この記事には『iPhone 15のバッテリー交換手順』の画像があるんだな」と理解できれば、その記事は「バッテリー交換について詳しく書かれた有益な記事だ」と判断されやすくなります。

さらに言えば、これからのAI検索（SGEやChatGPTなど）の時代において、altは「画像の意味をAIに正しく学習・引用させるための一次情報」としても、その重要性を増しています。

つまり、altを適切に設定することで、記事全体のテーマ性が検索エンジンやAIに正しく伝わり、ページの評価を底上げする効果が期待できるのです。

キーワードの詰め込みが「逆効果」になる理由

ここで注意したいのが、一昔前のSEOテクニックとして流行した「キーワードの詰め込み」です。

例えば、猫の写真に対して

alt="猫 おすすめ ペットショップ 安い かわいい"

のように、検索されたいキーワードを羅列する行為です。これは現在、Googleによって「スパム行為（不正な操作）」とみなされるリスクが高まっています。

Googleは文脈を理解します。記事の内容と関係のないキーワードの羅列や、あまりにも不自然な詰め込みは、「ユーザーの利便性を無視している」と判断され、かえって評価を下げる原因になりかねません。

「SEO対策」という言葉に踊らされて、ユーザー不在の記述をすることは避けましょう。あくまで「画像の説明」に徹することが、現代のSEOにおける正解です。

画像検索からの流入という「意外な集客経路」

もう一つ、見逃せないメリットがあります。それが「Google画像検索」からの流入です。

商品名、図解、レシピ、インテリア、観光地などのジャンルでは、ユーザーは通常の検索だけでなく「画像検索」を頻繁に利用します。altテキストに具体的な内容（例：『北欧風 木製ダイニングテーブル 4人掛け』）が入っていると、画像検索の結果に表示される可能性が高まります。

文字だけの検索結果では埋もれてしまっても、魅力的な画像と適切なaltの組み合わせによって、新しい層のユーザーをサイトに呼び込むことができるのです。これは、altを設定する明確な実利と言えるでしょう。

【事例で解説】代替テキストの正しい書き方・悪い書き方

理屈はわかったけれど、具体的にどう書けばいいのか。ここからは、実践的な事例を見ていきましょう。悩んだ時に使える「魔法の質問」と、シーン別のOK/NG例を紹介します。

基本ルール：「電話でその画像を説明できますか？」

何を書くか迷ったら、この問いかけを自分に問いかけてみてください。

「もし、電話相手にこの画像の内容を伝えるとしたら、何と言いますか？」

「ほら、あの猫の写真だよ」では伝わりませんよね。「茶色い猫が、窓際で日向ぼっこをして寝ている写真だよ」と伝えるはずです。あるいは、グラフであれば「右肩上がりの折れ線グラフで、2023年に急激に伸びている図だよ」と説明するでしょう。

この「電話での説明」をそのまま文字に起こしたものが、最も理想的な代替テキストです。難しく考える必要はありません。見たまま、伝わるままを書けばいいのです。

Case 1：具体的な写真・イメージ画像の場合

ブログ記事などでよく使う、情景を表す写真の場合です。

• 画像：公園で子供たちがサッカーをしている写真
  
  
• 悪い例 🚫
  alt="子供"　（情報不足）
alt="子供 サッカー 教室 習い事 おすすめ"　（キーワード詰め込み）
  
  
• 良い例 ✅️
  alt="晴れた公園でサッカーの練習をしている小学生くらいの子供たち"

ポイントは「解像度」です。単語一つではなく、情景が浮かぶ短い文章にすることで、視覚障がいのあるユーザーにも記事の雰囲気が伝わります。

ただし、長すぎる小説のような描写は不要です。記事の文脈に必要な情報に絞りましょう。

Case 2：グラフ・図解・文字入りバナーの場合

ここが最も重要です。画像の中に「文字」や「データ」が含まれている場合、その情報は必ずaltに含めてください。W3C（ウェブの標準化団体）のガイドラインでも強く推奨されています。

• 画像：「キャンペーン期間：1月31日まで」と書かれたバナー
  
  
• 悪い例 🚫
  alt="バナー"
alt="キャンペーン画像"
  
  
• 良い例 ✅️
  alt="新春キャンペーン 期間は1月31日まで"

画像内の文字情報をaltに入れないと、音声読み上げユーザーや検索エンジンにとって、その情報は「存在しない」のと同じになってしまいます。画像内のテキストは、基本的にすべて書き起こすのが原則です。

Case 3：装飾アイコン・背景画像の場合（あえて書かない勇気）

意外に思われるかもしれませんが、「何も書かない（空欄にする）」ことが正解となるケースがあります。それは、意味を持たない装飾用の画像です。

• 画像：見出しの横にある小さなアイコン、区切り線、背景の模様
  
  
• 良い例 ✅️
  alt="" （空にする）

もしこれらに

alt="チェックマーク"
alt="青いライン"

などと律儀に入れてしまうと、音声読み上げユーザーは「チェックマーク、見出し、青いライン、本文……」と、コンテンツと関係のないノイズを延々と聞かされることになります。これは非常にストレスフルな体験です。

HTML5の仕様やアクセシビリティの観点からも、純粋な装飾画像はaltを空（alt=””）にして、支援技術に無視させるのが正しいマナーです。

Case 4：リンク付き画像（クリックできる画像）の場合

画像がリンクとして使われている場合、alt属性は「画像の説明」ではなく「クリック後に得られる行動や情報」を書くのが原則です。

• 画像：無料相談ページへのリンク画像
  
  
• ❌ 悪い例
  alt="パソコンを操作する人物"
  
  
• ✅ 良い例
  alt="無料相談でサイトの健康診断を受ける"

音声読み上げユーザーにとって、リンク画像は「ボタン」と同じ役割を持ちます。見た目ではなく、押した結果が分かる文章を書くことが、最も親切な設計です。

迷った時の判断フローチャート：書くべき？空欄でいい？

「事例はわかったけど、自分の目の前の画像がどれに当てはまるかわからない」

そんな時のために、3秒で判断できるディシジョンツリー（判断の木）を用意しました。SmartHR社のアクセシビリティガイドラインなどを参考に、実務で使いやすい形に整理しています。

「意味があるか」「文字があるか」の2点でシンプルに判断する。

「意味のある画像」と「飾りの画像」の境界線

判断の分かれ目は、「その画像がページから消えた時、情報が欠落するかどうか」です。

例えば、記事の内容を補足する図解やグラフは、消えると困りますよね。これは「意味のある画像」なので、alt必須です。

一方で、セクションの区切りに入れる「フリー素材の風景写真」などは、消えても記事の論旨には影響しません。これは「飾りの画像」に近いので、altは簡潔にするか、場合によっては空欄でも構いません。

ディシジョンツリーを使った実際の判断シミュレーション

では、具体的なケースでシミュレーションを行ってみましょう。

1. 記事のアイキャッチ画像（記事タイトルが入っている）

• 判断
  画像内に文字がある？ → Yes
  
  
• アクション
  記事タイトルをそのままaltに入れます。
  alt="代替テキストの正しい書き方とSEOへの影響"

2. 手順解説の途中で使う「矢印アイコン」

• 判断
  情報や意味がある？ → No（視覚的な誘導のみ）
  
  
• アクション
  飾りなので空欄にします。
  alt=""

3. 商品レビュー記事での「商品を手に持った写真」

• 判断
  画像がなくなると困る？ → Yes（サイズ感などを伝えている）
  
  
• アクション
  具体的な状況を説明します。
  alt="片手で持てるサイズのiPhone 15 Pro。親指が画面端に届く様子"

このようにフローに当てはめれば、もう迷うことはありません。

やってはいけない「altのNG行為」3選

良かれと思ってやったことが、実はユーザーや検索エンジンに嫌われてしまうこともあります。以下では、絶対に避けるべき3つのNG行為をご紹介します。

NG1：キーワードの乱用（スパム判定リスク）

前述の通り、文脈に関係のないキーワードを詰め込むのは厳禁です。

alt="SEO ブログ 初心者 稼ぐ 収益化"

のような記述は、画像の内容を説明していないばかりか、Googleから「検索順位を不正に操作しようとしている」と疑われる原因になります。あくまで「画像の説明」にとどめましょう。

NG2：「〜の画像」「〜の写真」という重複表現

意外とやりがちなのがこれです。

alt="猫の画像"
alt="富士山の写真"

スクリーンリーダー（音声読み上げ）は、imgタグを見つけると自動的に「〜の画像」と付け加えて読み上げることがあります。つまり、altに「画像」と書いてしまうと、「猫の画像の画像」と読み上げられてしまうのです。これでは冗長で聞き苦しいですよね。

文脈上どうしても必要な場合を除き、「〜の画像」という言葉は省略し、

alt="日向ぼっこをする猫"
alt="雪化粧をした富士山"
とシンプルに記述しましょう。

NG3：長すぎる説明（本文に書くべき内容）

alt属性は、あくまで「代替」テキストです。長文のエッセイを書く場所ではありません。デジタル庁の『ウェブアクセシビリティ導入ガイドブック』などでは、スクリーンリーダーでの聞きやすさを考慮し、「80文字程度」を目安にすることが推奨される場合があります。

もし、画像の説明に数百文字も必要なら、それはaltに押し込むのではなく、本文（キャプションや段落）として画像の近くに書くべきです。そのほうが、画像が見えている一般ユーザーにとっても親切な設計になります。

では、代替テキストは何文字くらいが適切？

明確なルールはありませんが、実務上の目安は80〜125文字程度です。スクリーンリーダーで一息で理解でき、かつ情景や要点を過不足なく伝えられる長さがこのあたりになります。

もし120文字を超えても「電話で説明する一文」として自然であれば問題ありません。逆に、説明が長文化する場合は、altに詰め込まず本文やキャプションに分けるのが正解です。

WordPressでの設定方法と確認方法

最後に、実際のWordPress（ブロックエディタ）での設定手順を確認しておきましょう。作業はとてもシンプルです。

WordPressでの代替テキスト（alt属性）設定の流れ

1. 画像を選択
   編集画面で、設定したい画像をクリックして青枠で囲まれた状態にする。
   
   

2. 右サイドバーを確認
   画面右側の設定パネル（「ブロック」タブ）を見る。
   
   

3. 代替テキスト入力欄
   上部に「代替テキスト（alt text）」という項目があるので、そこに入力する。

補足：Next.jsやヘッドレスCMSの場合のalt実装ポイント

Next.js やヘッドレスCMS（microCMS / Contentful など）でも、考え方は同じです。

altは「フロント側で考えるもの」ではなく、「コンテンツとして管理するもの」。

• CMS側に alt 用のフィールドを必ず用意する
• 画像コンポーネント（<Image> など）では alt を必須にする
• 装飾画像のみ alt=”” を明示的に指定する

技術が変わっても、「この画像が消えたら意味が欠けるか？」という判断軸は変わりません。

過去記事の修正は必要？優先順位の付け方

「過去に書いた100記事、全部空欄だ……全部直さないとダメ？」と絶望した方もいるかもしれません。

心配はいりません。今からすべての過去記事を修正する必要はありません。

優先順位をつけましょう。

1. 現在、アクセスが多い重要な記事
2. 今後、検索順位を上げたい勝負記事

まずはこのあたりから、リライト（記事の手入れ）のついでに少しずつ設定していけば十分です。Webサイト運用はマラソンのようなもの。息切れしないペースで、少しずつ「親切なサイト」に育てていきましょう。

まとめ：代替テキストは「ユーザーへの思いやり」

小さな親切の積み重ねが、Googleからも愛される強いサイトを育てる。

代替テキスト（alt属性）は、決してSEOのための「裏技」や「義務」ではありません。

その本質は、「どんな環境の人にも情報を届けたい」というWebサイト運営者の思いやり（アクセシビリティ）そのものです。

今日から、画像を入れるたびに一瞬だけ立ち止まって考えてみてください。

「この画像が見えない人に、電話でどう伝えようか？」

その小さな想像力の積み重ねが、あなたのサイトをより強く、より優しく、そしてGoogleからも愛されるサイトへと育てていくはずです。

よくある質問（FAQ）

Q. ファイル名（IMG_1234.jpgなど）は日本語に変えたほうがいいですか？

A. 基本的には半角英数字（例：cat-sleeping.jpg）が推奨されます。日本語ファイル名はサーバー環境によってはエラーの原因になることがあるためです。ただし、わかりやすい英単語を使うことはSEO的にもプラスになります。

Q. キャプション（画像下の説明文）と代替テキストは同じでいいですか？

A. 役割が異なります。キャプションは「全ての読者に見せる補足情報」、代替テキストは「画像が見えない人への説明」です。内容が重複しても問題ありませんが、キャプションがある場合は、代替テキストを少し簡潔にするなどの工夫をするとより親切です。

Q. AIが自動でaltを入れてくれるプラグインは使っていいですか？

A. 補助として使うのは便利ですが、最終確認は必ず人間が行うことを推奨します。AIは画像の表面的な特徴（「猫」など）は認識できますが、文脈までは正確に理解できないことが多いからです。ただし、ECサイトで数万点の商品を扱う場合や、ユーザー投稿型（UGC）サイトなど、すべてを人力でカバーできない規模であれば、AIによる自動設定は「何もない（空欄）」より遥かに有効な手段となります。

参考文献・出典

• Google 画像検索 SEO ベスト プラクティス｜Google Search Central（2024）
• 達成基準 1.1.1 非テキストコンテンツ (WCAG 2.1 解説書)｜W3C / WAIC（2023）
• ウェブアクセシビリティ導入ガイドブック｜デジタル庁（2024）
• アクセシビリティ 画像の代替テキスト｜SmartHR Design System

この記事を書いた人

嶺 利久

Webコンサルタント（グロースパートナー）

Webマーケティング歴15年。中小企業を中心に300社以上のWebサイト制作・マーケティング支援に従事。「ローカル企業をGROWTHする」をモットーに、SEOやコンテンツマーケティング戦略を得意とする。近年はAIO（AI検索最適化）の研究にも注力している。