画像のalt・代替テキストの書き方|企業サイトのSEOと伝わりやすさを整える


画像カードと説明文カードをつなぎ、画像の内容を言葉で伝えるイメージ

画像の代替テキストは、画像が伝えている情報や役割を文章で補うものです。SEOキーワードを並べる欄ではありません。「この画像が見えなくても、読み手に何を伝える必要があるか」から考えると、書く内容を整理できます。

北九州の事業者が自社ホームページを更新する場面を想定し、画像の種類ごとの書き方と、WordPressで保存した後の確認方法をまとめます。

画像カードと説明文カードをつなぎ、画像の内容を言葉で伝えるイメージ
画像の意味を言葉で伝えるイメージ(AI生成)。

altとキャプションは役割が違う

HTMLの画像には、代替テキストを指定するalt属性があります。キャプションは画像のそばに見える説明文です。同じ画像について扱っていても、必ず同じ文章にする必要はありません。画像のファイル名も別の情報なので、ファイル名を変えただけでは代替テキストを設定したことにはなりません。

Googleは画像の内容を理解するとき、altだけでなくページの内容なども利用すると説明しています。また、キーワードを詰め込む書き方を避けるよう案内しています。詳細はGoogle公式の画像SEOガイドを確認してください。altだけで順位や画像検索への表示が決まるわけではありません。

書く前に画像の役割を3つに分ける

情報を伝える画像

商品の特徴、入口の位置、操作手順などを伝える画像は、その情報を短く説明します。W3Cの情報を伝える画像のガイドは、見た目の細部を機械的に列挙するのではなく、画像が伝える意味に合わせる考え方を示しています。

例えば実際の店舗入口の写真なら、来店者に必要な「建物の右側にある店舗入口」などの説明が候補です。ただし、現地や写真で確認できない方向・設備は書きません。人物や事例の写真に、未確認の顧客名や実績を付けることも避けます。

装飾だけの画像

本文の理解に必要な情報を持たない飾りは、空のalt属性で扱う場合があります。これはalt属性自体を省略することとは異なります。W3Cの装飾画像のガイドでは、スクリーンリーダーによる不要な読み上げを避けるため、空の代替テキストを使う方法が説明されています。

見栄えのための背景か、商品の色や形を判断するための写真かで扱いは変わります。「写真だから必ず長文」「イラストだから必ず空欄」と決めず、そのページでの目的を確認しましょう。

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

画像だけがリンクになっている場合は、移動先や操作の目的が伝わることを優先します。例えば資料を開く画像なら、見た目の「青い四角」より「サービス資料を開く」の方が役割を説明できます。W3Cの機能を持つ画像のガイドも、外見ではなく機能を説明する考え方を示しています。

同じリンクの中に十分なテキストがある場合は、同じ内容を画像でも重ねて読ませる必要があるかを確認します。画像単体だけでなく、周囲の文字やリンクを含めて判断してください。

企業サイトで使う代替テキストの具体例

以下は書き方を比較するための架空の例です。実際の写真、掲載目的、確認済みの事実に合わせて調整してください。

画像の用途 見直したい書き方 考え方・記載例
入口の位置を案内 店舗、北九州、おすすめ 写真で確認できる場合:「建物右側のガラス扉が店舗入口」
商品の形を説明 商品画像1 本文の判断に必要な特徴を簡潔に説明する
画像だけの資料リンク バナー 「サービス資料を開く」などリンクの目的を示す
見出し横の装飾 紫色の丸い飾り 情報を持たない装飾なら空のaltを検討する
数値の変化を示すグラフ グラフ 短い概要に加え、本文や表で数値・傾向を説明する

グラフや案内図の全情報を、altに長く押し込む必要はありません。W3Cの複雑な画像のガイドでは、短い説明と詳しい説明を組み合わせる方法が示されています。数値表や経路の文章を本文に置けば、画像を拡大できない人も確認できます。

WordPressでは設定欄だけでなく、保存されたページを見る

画像の情報を編集する場所と、本文に挿入済みの画像は分けて確認しましょう。テーマや編集方法によって扱いが異なり、メディア側の入力を変えたことだけでは、すでに挿入したすべての画像への反映を確認できません。

  1. 対象の投稿と画像を特定し、変更前の内容を控える。
  2. 編集画面で画像の代替テキストを確認し、掲載目的に合う文へ整える。
  3. 投稿を保存して再読込し、入力内容が残っていることを確かめる。
  4. プレビューまたは公開ページで、該当画像と実際のalt属性を確認する。
  5. アイキャッチやリンク画像は本文画像とは別に確認する。

HTMLの確認が難しい場合は、更新担当者に「このページの、この画像のaltが保存後にどう出力されているか」を確認してもらうと具体的です。画像のURLだけを見て設定済みと判断せず、掲載箇所ごとにチェックします。

SEO・LLMOのためにやり過ぎないこと

地域名やサービス名は、画像の情報を説明するために必要なときに使います。北九州・福岡などの地名をすべての画像に繰り返す必要はありません。AI生成の説明用イメージに、実際の施工現場や顧客であるかのような説明を付けないことも大切です。

読み手が知りたい答えは、画像だけに閉じ込めず、主見出しと本文にも整理します。これは情報を伝えやすくするための方針であり、AI検索の引用を保証する手法ではありません。全体の考え方はSEOとLLMOの基本ガイドで解説しています。

公開前の確認表とよくある質問

  • 画像の役割が、情報・装飾・操作のどれか分かるか。
  • 本文やリンク内の文章と、不必要に同じ内容を繰り返していないか。
  • 見えない情報、未確認の成果、キーワードの羅列が入っていないか。
  • グラフや図の要点を、本文でも確認できるか。
  • 保存後のページで、対象画像への反映を確かめたか。

何文字にすればよいですか?

このガイドでは一律の文字数を指定しません。画像の目的を伝えるのに必要な短い説明を考え、詳しい情報は本文や表で補います。

すべての画像に同じ説明を付けてよいですか?

画像が違う情報を伝えるなら説明も変わります。同じ画像でも掲載目的が異なることがあるため、そのページで伝える内容に合わせてください。

画像を大量に直す前に何をすべきですか?

まずサービス紹介など重要な1ページを選び、画像一覧と用途を整理します。素材自体の棚卸しにはホームページの原稿・写真の整理方法も役立ちます。

北九州でホームページの画像や情報の見直しを検討している方は、キタデジのお問い合わせページから対象URLと困っている点をお知らせください。

公式資料確認日:2026年9月16日。例文・点検手順は本記事の実務上の提案です。

Categories

Tags

Image name
株式会社goap 代表取締役 相牟田 昂大

福岡県出身、大学生時代からWEBデザインのフリーランスとして活動。 卒業後、WEBデザイン・コンサルティング会社で経験を積み、2013年に独立し「goap」を設立。 WEBデザインやマーケティング、コンサルティング業務を展開し、WEBサイトがホームページ大賞で最優秀賞を受賞。 2023年にAI・メタバース事業を追加した株式会社goapを設立。 現在まで<strong>300社以上</strong>のWEBサイトのデザイン・ディレクション・システム構築に携わらせていただきました。 Web制作・マーケティング業界のプロがお客様の悩みに寄り添って丁寧にヒアリングしますので、初心者の方でも<strong>安心してご相談ください!</strong>