SECTION 01

alt属性とは何か｜SEOとアクセシビリティの基礎

alt属性の役割（代替テキスト・読み上げ・SEO）

altは alternative（代替）の略で、imgタグに指定するHTMLの属性です。<img src="hero.jpg" alt="熊本市中央区の美容室の外観"> の形式で、altが画像の内容を説明するテキストとなります。役割は大きく三つ。ブラウザが画像を表示できないときの代替表示、スクリーンリーダーによる読み上げ、Googleのクローラーが画像の内容を理解するための手がかりです。読み上げユーザーと検索エンジンの双方に配慮した書き方が自然と求められます。

alt属性を空欄にするとどうなるか

altが空欄のまま公開された画像は、国内の中小企業サイトを診断すると半数以上のページで見つかります。空欄の画像はスクリーンリーダーがファイル名をそのまま読み上げる挙動に落ち、「DSC04583.JPGのJPG」のような無意味な音声が届きます。SEO面でも画像検索インデックスの登録精度が下がります。ただし「装飾目的のみの画像」の場合はあえて alt="" の空文字を指定するのが正解で、空欄放置と空文字明示はまったく別の意味です。

title属性との違い

altと混同されがちなtitle属性は、画像にマウスを乗せたときに出るツールチップを制御する属性で、altとは役割が異なります。スクリーンリーダーがtitleを読み上げない実装もあり、SEOへの寄与もaltと比較すると極めて小さい項目です。実務上はaltを正しく書けていればtitleは未指定で問題ありません。

alt属性は画像SEOの基礎であり、Googleと生成AIの両方にとって「画像が何か」を伝える最も重要な手がかりです。

SECTION 02

alt属性の書き方5原則

altの書き方には絶対の正解はありませんが、Googleの画像SEOガイダンスとWCAG（ウェブアクセシビリティ基準）、そして生成AI時代のマルチモーダル評価を総合すると、実務で守るべき原則は5つに集約できます。以下、原則ごとに実装レベルで解説します。

原則1：自然な日本語で80文字以内

altの推奨文字数はおおむね40〜80文字が実務上の目安です。読み上げの可聴限界とGoogle画像検索のスニペット表示範囲の双方を満たすラインとなります。構成のコツは「対象＋属性＋場所や状況」の3要素。例として「美容室の外観」では不足ですが、「熊本市中央区上通の美容室Brickの外観、木目調ファサードと黒い看板」とすれば対象＋属性＋場所が揃い画像の個性が伝わります。

原則2：キーワードを詰め込まない

「熊本 美容室 熊本 美容室 上通 美容室」のようなキーワード羅列は、キーワードスタッフィングとして検索品質評価上マイナスに作用します。キーワードを含めるのは構いませんが、文章中に自然に1〜2回までとし、残りは具体描写で埋めるのが安全です。

原則3：装飾画像は alt="" 空文字を使う

背景の模様や区切り線など、本文の理解に直接関係しない画像には空文字 alt="" を指定します。属性自体を省略するのとは違い、空文字は「読み上げ不要」と明示的に伝える役割です。判定基準は「この画像が見えなくても本文の意味が変わらないか」。一方、意味を補強するアイコン（例：ハンバーガーメニュー）には alt="メニューを開く" のような説明が適切です。

原則4：ファイル名もSEOに影響する

画像のファイル名自体もGoogleの画像クロール評価に影響します。DSC04583.JPG やIMG_0001.png のような連番は、画像の内容をまったく伝えません。

原則5：文脈に合わせた説明を書く

同じ画像でも記事の文脈によってaltの最適解は変わります。美容室の外観写真も、施工事例の記事なら設計意図を、アクセス案内の記事なら目印情報を優先するのが正解です。altは「画像の中に写っているもの」＋「この記事におけるこの画像の役割」の2階建てで書くと、検索エンジンと読者の双方に通じます。

自然な日本語で80文字以内、キーワードを詰め込まず、画像の内容を具体的に説明するのがalt属性の基本原則です。

SECTION 03

WordPressでalt属性を設定する実装手順

WordPressでは、alt属性の設定はメディアライブラリの「代替テキスト」欄、あるいは投稿画面の画像ブロックから行います。手順自体は難しくありませんが、意外と多くのサイトが空欄のまま放置されているため、運用手順として標準化することが重要です。

メディアライブラリでの個別設定

WordPress管理画面の「メディア」→対象画像をクリック→右側サイドバーに「代替テキスト」「キャプション」「説明」の3項目が表示されます。代替テキストに入力した内容がそのままalt属性としてHTMLに出力されます。メディアライブラリで設定したaltは、今後どの記事に挿入しても初期値として引き継がれるため、頻出画像は最初に一度設定すると運用の手間が大きく減ります。

投稿画面からの一括編集

既存記事のaltをまとめて見直す場合は、記事の編集画面で各画像ブロックをクリックし、右サイドバーの「代替テキスト」欄を更新します。投稿画面で個別設定したaltが最優先、次にメディアライブラリのalt、最後に空欄の順に適用されるため、記事ごとに異なるaltで運用したい場合は投稿画面での上書き設定が有効です。

プラグインで全画像のalt欠落を検出する方法

100記事・300記事と蓄積されたサイトで、全画像のalt状況を手動チェックするのは非現実的です。alt欠落を一覧化するには、Accessibility系のWordPressプラグイン（例：Accessibility Checker、WP Accessibility など）を導入して全投稿をスキャンする運用が効率的です。Screaming Frog や Ahrefs などの外部SEOツールでも、クロール結果にaltの有無が含まれます。画像そのものの撮影・選定の考え方は、ホームページの写真で集客が変わる｜プロに頼まず自分で撮る場合のコツとNG例が補完関係にあります。

SECTION 04

業種別・alt属性の書き方100文例

altの書き方は、業種ごとに「画像に写っている要素」「読者が知りたい情報」が違うため、業種別のテンプレを持っておくと運用がぐっと楽になります。ここでは5業種×20文例の合計100文例を、実際のWordPressに貼り付けられる形で提示します。自社の画像に合わせて固有名詞と数値だけ差し替えてご活用ください。

飲食店（メニュー写真・店内写真）20文例

美容室・サロン（ヘアスタイル・施術写真）20文例

整体院・クリニック（院内・施術器具）20文例

建設・工務店・リフォーム（施工事例）20文例

士業・コンサル（執務風景・資料イメージ）20文例

以上100文例は、それぞれ40〜70字の範囲に収め、キーワードを過剰に含めず、具体描写と文脈情報のバランスを取った書き方で統一しています。自社サイトに合わせて地名・人数・設備名などを差し替えて即運用できる構成です。

altは「画像の中に写っているもの」＋「この記事におけるこの画像の役割」の2階建てで書くと、検索エンジンと読者の双方に通じる。

SECTION 05

AI検索時代の画像最適化｜マルチモーダルLLMへの対応

2024年以降のChatGPT・Gemini・Claudeといった生成AIは、テキストだけでなく画像を直接認識できるマルチモーダル機能を標準搭載するようになりました。ただし、AI検索のインデックス（つまり検索のために画像をクロールし、意味を把握して記憶する工程）においては、今のところalt属性・ファイル名・画像周辺のキャプションが主要な情報源となっています。

GPT-4V・Gemini・Claudeの画像認識

マルチモーダルLLMはユーザーが画像を直接アップロードした場合には画像を見て回答できますが、Web検索の裏側で動く画像インデックスは、容量と処理コストの観点からalt属性・ファイル名・画像URL・周辺テキストといったメタ情報を優先的に索引化しているのが実態です。「AIが画像を見てくれるからaltは適当でいい」という考え方は現時点では成立しません。AIが画像の意味を把握する最初の手がかりは依然としてaltであり、画像そのものの分析は必要に応じた二次工程という位置付けです。

クロール段階でLLMが見る情報（alt・ファイル名・キャプション）

Googlebot-Image と、OpenAIやPerplexityなどの生成AIが採用する画像クロールは、概ね次の順序で画像の意味を推定しています。

ImageObject 構造化データの書き方

画像の意味を構造的にAIへ伝える方法として、schema.org のImageObjectスキーマがあります。記事ごとの主要画像（アイキャッチや解説図）に対して、以下のようなJSON-LDを追加すると、AI検索における画像の理解精度が向上します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/image.webp",
  "name": "熊本市中央区の美容室Brickの外観",
  "caption": "黒い看板と木目調ファサードが目印",
  "creditText": "撮影：株式会社CREVIA",
  "width": "1600",
  "height": "900"
}
</script>

ImageObjectはArticleスキーマの内部に埋め込むこともでき、記事のメイン画像として関連付けるなら Article.image に@type: ImageObjectを指定する書き方が推奨です。構造化データ全体の考え方は、構造化マークアップとは？SEOとAI検索（GEO対策）への効果と全体像を解説が補完関係にあります。

また、Googleビジネスプロフィール経由で評価される画像の扱いは、Googleビジネスプロフィールの写真・動画がAI検索の評価に与える影響で詳しく扱っており、サイト内画像とGBP画像の2本立てで画像評価を強化するのが実践的です。

SECTION 06

画像SEOを一段引き上げる周辺施策

altの整備と並行して取り組むと効果が大きいのが、画像フォーマットの最適化、遅延読み込みの制御、画像サイトマップの提出の3点です。いずれも表示速度やクロール効率の改善を通じて、結果的にSEOの総合評価を押し上げます。

WebP 変換と Core Web Vitals への影響

WebPはGoogleが推進する次世代画像フォーマットで、JPEG・PNGと比較して同じ画質でファイルサイズを30〜50%削減できます。画像枚数の多いサイトほど効果が大きく、LCP（Largest Contentful Paint）の改善に直結します。WordPressではプラグイン（Converter for Media、EWWW Image Optimizer）で既存画像を一括WebP変換できます。古いiOS Safari対策として<picture>要素で従来JPEGへフォールバックする書き方が安全です。表示速度全体の考え方は、Core Web Vitals 2026年版｜表示速度がAI検索・SEOに直結する理由と改善手順をご確認ください。

lazyload と LCP の関係

遅延読み込み（lazyload）はビューポート外の画像を後回しで読み込み、初期表示を早める仕組みです。HTML標準の loading="lazy" で実装可。ただしファーストビューの主役画像（LCP要素）にlazyloadを付けると表示開始が遅れるため、アイキャッチやヒーロー画像には loading="eager" を明示するか属性を指定しない形が推奨。lazyloadは記事本文の途中画像・フッター付近に限定し、ファーストビューは即時読み込みを守るのが鉄則です。

画像サイトマップ（image sitemap）の提出

XMLサイトマップに画像URLを組み込んだ画像サイトマップをSearch Consoleで送信すると、Googlebot-Imageのクロール効率が上がります。Yoast SEO・Rank Math・All in One SEOなど主要プラグインが標準で生成します。効果が特に大きいのは、JavaScriptで遅延描画した画像やCSS背景画像をインデックスさせたいケース。EC・不動産・採用サイトなど画像自体が価値を持つ業態で顕著です。SEO全体の優先順位はSEO対策とは？内部SEO・コンテンツSEO・費用相場を中小企業向けにわかりやすく解説もあわせてご確認ください。

SECTION 07

よくある質問