はじめに：画像SEOは「見た目」だけでなく「伝わり方」の設計で決まる
Webサイトに掲載する画像は、ページの印象を左右するだけでなく、検索エンジンが内容を理解する手がかりにもなる。特に、商品画像、導入事例の写真、図解、バナー、アイキャッチ画像は、ユーザーの理解を助ける重要な情報要素である。
一方で、画像の中に文字を埋め込んだままにしたり、altテキストをキーワードの羅列にしたりすると、SEOにもアクセシビリティにも悪影響が出る可能性がある。Googleは画像の近くに関連テキストを配置し、説明的なaltテキストを設定することを推奨している。また、W3Cのアクセシビリティ指針でも、画像の役割に応じて適切な代替テキストを判断する考え方が示されている。
本記事では、画像SEOとアクセシビリティを同時に高めるために、altテキスト、画像内テキスト、CSSによるテキスト配置、SVGの扱いまでを実務向けに整理する。元資料では、画像の役割分類や「画像内テキスト」から「画像上のHTMLテキスト」へ移行する考え方が整理されている。
画像SEOとは何か｜altテキストだけでは完結しない理由
画像SEOというと、altテキストを入れる作業だけを想像しがちである。しかし実際には、画像ファイル名、周辺テキスト、キャプション、見出し、ページ本文、リンク構造、モバイル表示、読み込み速度などが複合的に関係する。
GoogleのSEOスターターガイドでは、画像を関連するテキストの近くに配置し、説明的なaltテキストを追加することが推奨されている。つまり、検索エンジンは画像単体だけでなく、その画像がページ内でどのような文脈に置かれているかも見ている。
さらに、AI検索やAI Overviewsのような生成AI型の検索体験でも、基本となるのはクロール可能で、意味が伝わるコンテンツである。Googleは、生成AI機能もコアの検索ランキングや品質システムに基づいていると説明しているため、画像SEOも「AI向けの裏技」ではなく、ユーザーと検索エンジンの双方が理解しやすい情報設計として考えるべきである。
altテキストの基本｜画像の役割ごとに書き分ける
altテキストは、画像が表示されない場合やスクリーンリーダーで閲覧する場合に、画像の意味を伝えるための代替テキストである。ただし、すべての画像に詳しい説明を入れればよいわけではない。大切なのは、その画像がページ内でどの役割を持っているかを判断することである。
W3Cのalt Decision Treeでは、画像の目的や文脈に応じてalt属性の扱いを決める考え方が示されている。装飾目的の画像であれば空のalt属性を使い、情報を伝える画像であれば内容を簡潔に説明し、リンクやボタンとして機能する画像であれば「見た目」ではなく「操作後に何が起こるか」を説明する。
たとえば、背景の飾りや区切り線のような装飾画像は、alt="" としてスクリーンリーダーに読み上げさせないほうがよい。逆に、商品画像であれば「今治産の白いフェイスタオルを畳んで重ねた写真」のように、ユーザーが画像から得るべき情報を自然に書く。ボタン画像の場合は「右向き矢印の画像」ではなく「次のページへ進む」と書くのが適切である。
良いaltテキストの書き方｜キーワードよりも文脈を優先する
良いaltテキストは、短く、具体的で、ページの文脈に合っている。SEOを意識するあまり、同じキーワードを不自然に詰め込むのは避けるべきである。Googleも、altテキストには有用で情報量のある内容を入れる一方、キーワードの詰め込みはユーザー体験を損ない、スパムと見なされる可能性があると説明している。
悪い例は、次のような書き方である。
「画像 SEO altテキスト アクセシビリティ 対策 Web制作 Google 検索」
これは検索エンジン向けに見えて、実際には画像の内容を説明していない。ユーザーにも役立たない。
良い例は、次のような書き方である。
「画像のaltテキストを確認するWeb担当者の作業画面」
このように、画像の内容とページのテーマが自然につながっていれば十分である。日本語の場合、厳密な文字数ルールに縛られる必要はないが、まずは40〜80字程度を目安に、長くなりすぎない説明に整えると運用しやすい。
画像内テキストはなぜ避けるべきか
バナーやアイキャッチ画像では、画像の中に大きな文字を入れたくなることが多い。しかし、重要なテキストを画像内に埋め込む設計には注意が必要である。
第一に、画像内の文字はHTML上の見出しや本文として認識されにくい。検索エンジンが画像内の文字をOCRで読み取れる場合があったとしても、見出し構造や本文との関係まで正確に伝えられるとは限らない。ページタイトル、見出し、CTA、料金、注意事項など、意味の中心になる情報は、画像に焼き込まずHTMLテキストとして記述するほうが安全である。
第二に、アクセシビリティ上の問題がある。WCAG 2.2の達成基準1.4.5では、技術的に可能な場合、情報伝達には画像化された文字ではなくテキストを使うことが求められている。画像化された文字は、ユーザーが文字サイズ、色、行間、フォントなどを調整しにくいためである。
第三に、セキュリティやプライバシー上のリスクもある。スクリーンショットやPDF内の文字を黒塗りしたつもりでも、元データやメタデータが残っていれば、検索エンジンや支援技術に読み取られる可能性がある。Googleも、公開前にファイル内の情報を完全に削除する重要性を説明している。
画像上のテキストはCSSで重ねる
デザイン上、写真の上にキャッチコピーを重ねたい場合は、文字を画像に直接焼き込むのではなく、HTMLのテキストをCSSで画像上に配置する方法が望ましい。
たとえば、ヒーロー画像の上に「生成AI研修で業務改善を加速する」と表示したい場合、その文字は画像ファイルの一部にせず、h1やpなどのHTML要素として記述する。背景画像の上にCSSで重ねれば、検索エンジンはテキストとして理解でき、スクリーンリーダーも読み上げられる。さらに、レスポンシブ対応や文字サイズ変更にも強くなる。
ただし、画像の上に文字を置く場合は、コントラストの確保が欠かせない。WCAGのコントラスト基準では、通常テキストは少なくとも4.5:1、大きな文字は少なくとも3:1のコントラスト比が求められる。
実務では、次のような方法が使いやすい。
- 写真の上に半透明の暗いレイヤーを敷く
- テキスト周辺だけにグラデーションを入れる
- 文字の背面に帯やボックスを置く
- 文字に薄いシャドウを加える
- スマホ表示時は画像とテキストを上下分離する
特にスマホでは、PCで読みやすかった文字が背景と重なって読みにくくなることが多い。アイキャッチ画像やLPのファーストビューは、PCだけでなくスマホ幅でも確認するべきである。
title属性はaltテキストの代わりにならない
画像のtitle属性とalt属性は混同されやすいが、役割は異なる。alt属性は画像の代替情報であり、画像が見えない環境でも意味を伝えるために使う。一方、title属性は補足情報やツールチップとして扱われる属性であり、すべての環境で安定して伝わるわけではない。
MDNでは、title属性は要素に関する補足的な情報を表すものと説明されている。つまり、画像SEOやアクセシビリティの中心として頼るべきものではない。
実務上は、まずaltテキストを適切に設定し、必要な補足説明は本文やキャプションで伝えるほうがよい。title属性にだけ重要情報を入れる設計は避けるべきである。
複雑な図解・グラフ・インフォグラフィックの扱い
図解やグラフ、インフォグラフィックは、短いaltテキストだけで内容を伝えきれないことが多い。この場合、altテキストには図の概要を入れ、詳細は本文や表で説明する。
たとえば、AI導入のロードマップ図であれば、altには「AI導入を準備、試行、定着の3段階で示したロードマップ」と書く。そのうえで、本文内に各段階の内容をテキストで説明する。これにより、視覚的に見たい人にも、テキストで理解したい人にも伝わる。
インフォグラフィックをSNS用に作る場合も同じである。画像だけで完結させるのではなく、記事本文、投稿文、代替テキスト、必要に応じた説明文をセットで設計することが重要である。
SVG画像は目的によって使い分ける
アイコン、ロゴ、チャートなどではSVGが使われることがある。SVGは拡大しても画質が落ちにくく、コード内にテキスト情報を含められる場合もあるため、アクセシビリティ面で有利に使えるケースがある。MDNでも、SVGのtitle要素はグラフィックの短い説明を提供する要素として説明されている。
ただし、すべてのSVGを同じように扱えばよいわけではない。装飾アイコンであれば読み上げ対象から外すほうがよい場合がある。一方、意味を持つ図解やチャートであれば、titleやdesc、本文での説明、代替テキストを組み合わせて、内容が伝わるようにする必要がある。
SEO流入を期待する画像であれば、通常の画像ファイルとして適切なaltテキストを設定する方法が扱いやすい。インタラクティブな図解や複雑なチャートであれば、SVGのアクセシビリティ対応と本文説明を組み合わせるのが現実的である。
WordPress運用で確認したい画像SEOチェックリスト
WordPressで記事を公開する際は、画像をアップロードして終わりにしないことが重要である。最低限、次の項目を確認したい。
- ファイル名は内容が分かる英数字にする
- アイキャッチ画像にもaltテキストを設定する
- 装飾画像は無理に説明せず、必要に応じて空のaltにする
- 商品画像は色、形、素材、使用場面などを具体的に書く
- 画像のすぐ近くに関連する本文を置く
- キャプションとaltテキストを完全に重複させない
- 画像内に重要な見出しやCTAを焼き込まない
- スマホで文字の視認性とコントラストを確認する
- 図解は本文でも内容を説明する
- 個人情報や社外秘情報が写り込んだ画像を公開しない
特にBtoBサイトや自治体向けサイトでは、画像の意味が伝わることは信頼性にも関わる。単なる装飾ではなく、ユーザーの理解を助ける情報資産として画像を管理することが大切である。
まとめ：画像SEOの本質は、検索エンジンと人に同じ意味を届けること
画像SEOは、altテキストにキーワードを入れるだけの作業ではない。画像の役割を判断し、必要な情報をHTMLテキストとして残し、画像の周辺文脈を整え、アクセシビリティにも配慮する総合的な設計である。
装飾画像には余計な説明を入れない。情報画像には簡潔で具体的なaltテキストを設定する。複雑な図解は本文で補足する。重要な文字は画像に焼き込まず、HTMLとCSSで表現する。この基本を守るだけで、検索エンジンにもユーザーにも伝わりやすいページになる。
AI検索が広がるほど、画像や図解も「機械が読める構造」と「人が理解しやすい表現」の両方が求められる。だからこそ、画像SEOは小手先の最適化ではなく、コンテンツ品質を高めるための設計業務として取り組むべきである。
コメント