画像SEOとアクセシビリティを両立するaltテキスト設計｜画像内テキストを避ける実装ポイント

画像SEOでは「検索順位」だけでなく情報への到達しやすさが問われる

Webサイトに掲載する画像は、ページを見やすくする装飾要素であると同時に、商品やサービスの特徴、データの傾向、操作方法などを伝える情報要素でもあります。

しかし、画像の意味が視覚だけに依存していると、視覚障害のある人やスクリーンリーダーの利用者には情報が伝わりません。通信環境によって画像が表示されない場合や、検索エンジンが画像とページの関係を判断する場合にも、テキストによる説明が必要です。

その役割を担うのが、HTMLのimg要素に設定するalt属性です。

Googleは、altテキスト、ページ本文、画像の周辺テキスト、コンピュータービジョンなどを組み合わせて画像の内容を理解すると説明しています。また、画像を関連する本文の近くに配置し、短く説明的なファイル名を使用することも推奨しています。Google画像SEOの公式ガイド

したがって、画像SEOはalt属性へキーワードを入れるだけの施策ではありません。

• 画像の役割に合ったaltテキスト
• 画像と本文の文脈的一致
• わかりやすいファイル名
• 高品質な画像と表示速度
• 検索エンジンが取得できる画像URL
• スマートフォンでも意味が変わらない実装
• スクリーンリーダーでの確認

これらを一体として設計する必要があります。

altテキストとは何か

altテキストとは、画像が表示されない場合や、画像を視覚的に認識できない利用者に対して、画像が伝えている情報または機能を代替するテキストです。

重要なのは、「画像に何が写っているか」を機械的に説明するのではなく、「このページで、その画像が何を伝えているか」を記述することです。

同じ人物写真でも、採用ページでは働く環境を伝え、製品ページでは商品の使用場面を説明し、会社案内では企業の雰囲気を伝える場合があります。画像の用途が異なれば、適切なaltテキストも変わります。

W3Cも、altテキストは画像の内容だけでなく、利用される状況や目的に応じて決める必要があるとしています。W3C Images Tutorial

altテキストに一律の文字数制限はない

altテキストについて「125文字以内」「日本語では80文字以内」といった目安が紹介されることがあります。しかし、GoogleやW3Cが、すべての画像に共通する厳密な上限文字数を定めているわけではありません。

大切なのは文字数そのものではなく、画像の意味や機能を、重複や不要な説明を避けて簡潔に伝えることです。

短すぎて意味が伝わらないaltテキストは不十分ですが、画像の細部をすべて列挙した長文も、利用者の負担になります。周囲の本文ですでに説明している内容を、altテキストでそのまま繰り返す必要もありません。

次の基準で確認すると判断しやすくなります。

• 画像を見られなくても要点を理解できるか
• 画像がページ内で果たす役割を伝えているか
• 周囲の本文と完全に重複していないか
• 不要な形容詞や検索キーワードを並べていないか
• 読み上げたときに自然な日本語になっているか

「画像」「写真」「イラスト」という言葉も、通常はスクリーンリーダー側で画像要素であることが伝わるため、毎回入れる必要はありません。ただし、図表、地図、イラスト、画面キャプチャなど、形式自体が理解に関係する場合は明記しても構いません。

画像の役割別にaltテキストを書き分ける

W3Cは、画像の目的を情報画像、装飾画像、機能画像、文字画像、複雑な画像などに分類しています。すべての画像へ詳しい説明を設定するのではなく、役割に応じて処理を変えることが重要です。

情報を伝える画像

商品、人物、設備、作業風景など、画像自体がページの理解に必要な場合は、画像が伝える中心的な情報を簡潔に記述します。

悪い例

<img src="towel.jpg" alt="タオル">

改善例

<img src="woman-drying-hair-with-towel.jpg"
     alt="白いタオルで濡れた髪を包む女性">

商品の色、形、使用方法などが購入判断に関係する場合は、その情報も含めます。ただし、本文の商品説明をそのままコピーする必要はありません。

装飾だけを目的とする画像

区切り線、背景模様、意味を持たないイメージ画像などは、空のalt属性を設定します。

<img src="decorative-line.png" alt="">

alt属性自体を省略するのではなく、alt=""と明示する点が重要です。これにより、スクリーンリーダーはその画像を読み上げずに通過できます。

情報を持たない画像へSEOキーワードを入れると、検索エンジンと利用者の双方に不要なノイズを与えます。W3Cも、純粋な装飾画像には空の代替テキストを使用するよう案内しています。W3Cのalt判断ツリー

リンクやボタンとして使う機能画像

リンクやボタンの画像では、見た目ではなく、操作した結果を記述します。

<a href="/document.pdf">
  <img src="download-icon.svg" alt="資料をダウンロード">
</a>

「下向き矢印のアイコン」ではなく、「資料をダウンロード」とすることで、利用者は操作の目的を理解できます。

画像リンクのaltテキストは、Googleにとってアンカーテキストとしても利用されます。リンク先や操作内容を具体的に記載することは、内部リンクの理解にも役立ちます。Googleのリンクに関するベストプラクティス

グラフやインフォグラフィックなどの複雑な画像

複雑な図表の情報を、alt属性だけですべて説明しようとすると長くなりすぎます。

altテキストには図表の主題と重要な結論を記載し、詳しい数値や項目は、画像の直後に本文またはHTMLの表として掲載します。

<img src="ai-training-results.png"
     alt="AI研修後、資料作成時間が全部門で減少したことを示す棒グラフ">

画像の近くに数値表を用意すれば、スクリーンリーダー利用者だけでなく、検索エンジンや生成AIも情報を構造的に理解しやすくなります。

キーワードスタッフィングを避ける

画像SEOを意識するあまり、alt属性へ同じキーワードや関連語を並べることは逆効果です。

悪い例

alt="画像SEO altテキスト SEO対策 画像検索 検索上位
アクセシビリティ alt属性 最適化"

このような記述は文章として意味を持たず、スクリーンリーダー利用者にも不快な読み上げになります。Googleも、alt属性へのキーワード詰め込みはユーザー体験を損ない、スパムと判断される可能性があると説明しています。

狙っている検索語を無理に追加するのではなく、画像に本当に関係する言葉を自然な文章の中で使用します。

改善例

alt="画像の役割に応じたaltテキストの判断手順"

画像内テキストは可能な限りHTMLへ移す

バナーや見出しの文字を、JPEGやPNGの画像へ直接書き込む方法には、次の問題があります。

• スクリーンリーダーが通常の文章として読めない
• 利用者が文字サイズや色、行間を変更できない
• スマートフォンで縮小されると読みにくい
• 翻訳やコピーが難しい
• 見出しやリンクなどのHTML構造を失う
• 画像を差し替えなければ文章を修正できない

WCAG 2.2の達成基準1.4.5では、同じ視覚表現をWeb技術で実現できる場合、文字画像ではなく実際のテキストを使うことが求められています。ロゴ、ブランド名、書体見本など、特定の文字表現が不可欠な場合は例外です。W3C「Images of Text」

ヒーロー画像やバナーでは、背景画像とHTMLテキストを分離し、CSSで重ねる方法が適しています。

<section class="hero">
  <div class="hero__content">
    <h1>画像SEOとアクセシビリティを両立する</h1>
    <p>altテキストと画像内テキストの設計方法を解説します。</p>
  </div>
</section>

この構造なら、見出しは見出しとして認識され、スマートフォンの画面幅に合わせて改行や文字サイズを調整できます。

画像の上へ文字を配置する場合はコントラストを確保する

写真の上へHTMLテキストを重ねる場合は、背景の明暗によって文字が読みにくくならないよう注意が必要です。

対策としては、次の方法があります。

• 背景画像に暗い半透明のオーバーレイを重ねる
• 文字の背後に単色または半透明の帯を置く
• 余白の多い部分へ文字を配置する
• 画像の片側を暗くするグラデーションを使用する
• 画面幅に応じて文字の配置を変更する
• text-shadowだけに頼らず、実際のコントラストを測定する

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5対1以上、大きな文字は3対1以上が基準です。W3C「Contrast Minimum」

画像は表示位置によって色が変化するため、代表的な一点だけでなく、文字が重なる範囲全体を確認する必要があります。

画像SEOはaltテキスト以外も整備する

altテキストが適切でも、画像が重すぎる、取得できない、本文と無関係といった状態では十分な効果を得られません。

公開前には、次の項目も確認します。

• IMG0001.jpgではなく、内容を表す短いファイル名にする
• 画像を関連する見出しや本文の近くに配置する
• WebPやAVIFなどを検討し、表示速度を改善する
• widthとheightを指定してレイアウトのずれを防ぐ
• srcsetやpicture要素でレスポンシブ画像を提供する
• picture要素を使う場合もimg要素とsrc属性を残す
• robots.txtなどで画像を誤って遮断しない
• PC版とスマートフォン版で同等のaltテキストを提供する
• 構造化データやog:imageにページを代表する画像を指定する
• Search Consoleやアクセシビリティ検査ツールで確認する

Googleは、構造化データやog:imageへ指定する画像について、ページを代表する高解像度画像を選び、汎用的なロゴや文字中心の画像を避けるよう案内しています。

WordPressでの実務チェックリスト

画像をアップロードするときは、次の順序で判断すると運用しやすくなります。

1. この画像を削除すると、ページの意味が変わるか
2. 意味が変わらない装飾画像なら、altを空にする
3. 情報画像なら、ページ内で伝える要点を簡潔に書く
4. リンク画像なら、移動先または操作結果を書く
5. グラフなら、結論をaltへ記載し、詳細データを本文へ置く
6. 画像に焼き付けた見出しや説明文はHTMLへ移す
7. 周囲の本文とaltが不自然に重複していないか確認する
8. キーワードの羅列になっていないか確認する
9. 実際にスクリーンリーダーで読み上げを確認する
10. スマートフォン表示とコントラストを確認する

WordPressのメディアライブラリへ登録したaltテキストを、すべての掲載ページで機械的に使い回す方法にも注意が必要です。同じ画像であっても、ページ内での役割が異なれば、適切なaltテキストも変わるためです。

まとめ

画像SEOとアクセシビリティは、別々の対策ではありません。どちらも、画像が持つ意味や機能を、人と検索エンジンが正しく理解できる状態にする取り組みです。

altテキストでは、一律の文字数やキーワード数を追うのではなく、画像の役割と掲載文脈を基準にします。情報画像には簡潔な説明、装飾画像には空のalt属性、機能画像には操作結果、複雑な図表には本文やデータ表による補足が必要です。

また、重要な見出しや説明文を画像へ焼き付けるのではなく、HTMLテキストとして記述し、CSSで画像の上に配置することで、検索性、可読性、更新性、翻訳性を同時に高められます。

画像を「見える人だけの情報」にせず、誰でも、どの端末からでも、検索エンジンからでも理解できる情報として設計することが、これからの画像SEOに求められます。