画像のalt属性には何を書く？SEOだけではない正しい考え方

Webサイトへ画像を掲載するとき、HTMLにはalt属性を設定できます。

制作中に何となく画像ファイル名を入れたり、SEO対策としてキーワードを詰め込んだりしていないでしょうか。

alt属性の役割は、検索順位を上げるためだけのものではありません。画像が見えない状況でも、その画像が伝えている情報を理解できるようにするための代替テキストです。

ただし、すべての画像へ詳しい説明を書けばよいわけでもありません。

今回は、alt属性の役割と、画像の種類に応じた書き方を初心者向けに解説します。

alt属性は画像の代わりになる文章

alt属性には、その画像が表示されない場合に代わりとなる文章を設定します。

通信状況やファイルパスの問題で画像を読み込めなかったとき、設定した文章が表示されることがあります。

また、画面読み上げソフトを利用している人には、画像そのものではなくalt属性の内容が読み上げられます。

つまり、alt属性を考えるときは「この画像が見えなかった場合、何を伝える必要があるか」を考えることが重要です。

画像の見た目を細かく説明するのではなく、そのページ内で画像が担っている情報を文章にします。

同じ画像でもページによって内容は変わる

alt属性は、画像ファイルだけを見て決めるものではありません。

同じ建物の写真でも、使われるページによって役割が異なるからです。

会社概要ページで社屋を紹介しているなら、会社名や社屋であることが重要です。

施工事例ページで外壁塗装の完成状態を紹介しているなら、建物全体よりも施工後の状態が重要になります。

アクセスページで入口の場所を案内しているなら、利用者が入口を見つけるための情報が必要です。

画像に何が写っているかだけでなく、なぜその場所に掲載しているのかを考えて内容を決めます。

情報を伝える画像には内容を書く

文章を補足したり、画像自体が重要な情報を伝えたりしている場合は、内容が分かるalt属性を設定します。

たとえば、次のような画像です。

商品やサービスの写真

施工前と施工後の比較写真

代表者やスタッフの紹介写真

店舗や事務所の外観

操作方法を示す画面

グラフや図表

ボタンの役割を持つ画像

文字が含まれたバナー

施工事例の写真であれば、単に「住宅の写真」とするより、どの部分をどのように施工した写真なのかが分かる方が適切です。

ただし、本文ですでに同じ内容を詳しく説明している場合は、すべてをalt属性へ繰り返す必要はありません。

画像を見られない人にも必要な情報が伝わる範囲で、簡潔にまとめます。

装飾だけの画像は説明しない

Webサイトには、情報を伝えるためではなく、見た目を整えるためだけに使用する画像もあります。

背景の模様、区切り線、光の表現、意味を持たない図形などが代表的です。

このような装飾画像まで読み上げられると、利用者は本文へ到達するまでに不要な説明を何度も聞かなければなりません。

装飾だけを目的とした画像では、alt属性を空にして、読み上げの対象から外す方法があります。

「画像が存在するから必ず説明を書く」のではなく、利用者へ伝える情報があるかどうかで判断します。

近くの文章と同じ内容を繰り返さない

画像のすぐ近くに説明文がある場合、alt属性にも同じ文章を設定すると、読み上げ時に同じ内容が連続することがあります。

たとえば、代表者の名前が見出しやプロフィール文に書かれているにもかかわらず、写真にもまったく同じ名前だけを設定すると、情報が重複します。

画像に追加の意味がなければ、空のalt属性でも問題ない場合があります。

一方、スタッフ一覧のように写真と名前の組み合わせで人物を識別する構成では、名前を設定した方が分かりやすいこともあります。

周囲の文章を含めてページ全体を確認し、同じ情報を不必要に繰り返していないかを考えます。

「画像」「写真」という言葉は基本的に不要

alt属性へ「女性の写真」「会社の画像」のように書くことがあります。

しかし、画面読み上げソフトは、その要素が画像であることを利用者へ伝える場合があります。

そのため、alt属性にも「画像」や「写真」と書くと、「画像、女性の写真」のように重複して読み上げられる可能性があります。

基本的には、画像であることよりも、誰が写っているのか、何を伝える画像なのかを書きます。

ただし、イラスト、地図、グラフなど、表現形式そのものが理解に役立つ場合は、その種類を含めてもよいでしょう。

ファイル名をそのまま使わない

画像をアップロードすると、ファイル名が自動的にalt属性へ入る仕組みや、管理画面上で似た項目として表示されることがあります。

しかし、ファイル名は画像の管理を目的とした情報です。

連番、撮影日、英数字だけの名前などは、利用者にとって意味のある説明にはなりません。

画像を登録したら、自動入力された内容をそのまま使わず、ページ内での役割に合わせて確認します。

ファイル名を分かりやすく整えることは管理や画像検索の手掛かりになりますが、alt属性とは別に考える必要があります。

キーワードを詰め込まない

alt属性は検索エンジンが画像の内容を理解する手掛かりにもなります。

そのため、SEOを意識して地域名やサービス名を何度も入れたくなるかもしれません。

しかし、画像と関係のない言葉や同じキーワードを大量に追加すると、画像の説明として不自然になります。

たとえば、事務所内の写真に、提供しているサービス名や対応地域をすべて並べても、その画像の代わりにはなりません。

検索対策として考える場合も、まず画像の内容を正確に伝えることが基本です。

必要な名称や地域が画像と直接関係していれば自然に含め、関係がなければ本文や見出しで説明します。

文字が入った画像では内容を伝える

キャンペーンバナーや営業時間の案内など、画像内に重要な文字が含まれている場合は、その内容を画像が見えない人にも伝える必要があります。

ただし、画像内に書かれている長い文章を、すべてalt属性へ入れると読みにくくなることがあります。

重要な内容は、できるだけ通常の文章としてページにも掲載します。

通常の文章であれば、文字の拡大、コピー、検索、読み上げなどを利用しやすくなります。

画像はデザイン上の補助として使い、日時、料金、申込条件などの重要情報を画像だけに閉じ込めないことが大切です。

リンク画像は移動先を伝える

画像がリンクとして使われている場合は、画像の見た目よりも、クリックすると何が起きるかを伝えることが重要です。

たとえば、サービス紹介ページへ移動するバナーであれば、そのサービス名や移動先が分かる内容にします。

「青いバナー」や「矢印がある画像」では、リンクの目的が伝わりません。

ロゴをクリックするとトップページへ戻る構成では、サイト名やトップページへ移動することが分かる内容を検討します。

リンク内に画像以外の文章があり、その文章だけで目的が十分に伝わる場合は、画像の説明を重ねなくてもよい場合があります。

グラフや図表は本文でも説明する

グラフや複雑な図表の情報を、短いalt属性だけですべて説明するのは難しいことがあります。

その場合は、alt属性で図の目的や概要を示し、詳しい数値や傾向を本文、表、補足説明などで伝えます。

たとえば、売上の推移を示すグラフであれば、増加していることだけでなく、判断に必要な期間や数値を通常の文章でも確認できる状態にします。

画像を見られなければ内容を理解できない構成にしないことが重要です。

これはアクセシビリティだけでなく、スマートフォンで画像を拡大しにくい利用者や、通信状況が悪い利用者にも役立ちます。

WordPressの代替テキストと説明文を混同しない

WordPressのメディア画面には、代替テキスト、タイトル、キャプション、説明など、複数の入力欄があります。

それぞれ役割が異なるため、同じ文章をすべての欄へ入力すればよいわけではありません。

代替テキストは、画像の代わりに内容や役割を伝えるためのものです。

キャプションは、必要に応じて画像の近くへ表示する補足文です。

タイトルはメディアを管理するために使用されることがあり、テーマや機能によって扱いが異なります。

alt属性を設定したい場合は、代替テキストの欄へ入力します。

また、メディアへ一度入力した内容が、すでに記事へ挿入済みの画像へ自動反映されるとは限りません。変更後は実際のページでも確認する必要があります。

AIで自動生成しても最終確認は必要

画像認識を使って、AIに代替テキストを作成してもらう方法もあります。

大量の商品画像や記事画像を扱う場合、作業のたたき台として役立ちます。

しかし、AIは画像に写っているものを説明できても、その画像がページ内で何の役割を持っているかまでは正確に判断できないことがあります。

人物や商品を誤認したり、不要な見た目の説明を長く書いたりする可能性もあります。

自動生成した文章はそのまま使用せず、周囲の文章との重複、事実関係、ページ内での目的を確認して調整します。

alt属性を考えるときの確認ポイント

画像を掲載するときは、次の順番で考えると判断しやすくなります。

この画像は情報を伝えているか

画像がなくても周囲の文章だけで理解できるか

見えない場合に不足する情報は何か

装飾だけなら空にできないか

近くの文章と内容が重複していないか

ファイル名がそのまま入っていないか

関係のないキーワードを追加していないか

リンクの場合は移動先が分かるか

重要な文字情報を画像だけにしていないか

実際のページで正しく設定されているか

「何を書けばSEOに有利か」から考えるのではなく、「画像を見られなくても目的を理解できるか」から考えることが大切です。

まとめ

alt属性は、画像が見えない状況でも、その画像が持つ情報や役割を伝えるための代替テキストです。

情報を伝える画像には必要な説明を設定し、見た目を整えるだけの装飾画像は読み上げの対象から外します。

同じ画像でも、掲載するページや周囲の文章によって、適切な内容は変わります。

ファイル名をそのまま使ったり、SEO目的でキーワードを詰め込んだりするのではなく、画像がページ内で何を伝えているかを考えることが重要です。

alt属性は、入力欄を埋めるための作業ではありません。

画像を見られない利用者にも同じ目的や情報が伝わるかを考えることで、より多くの人が利用しやすく、内容も理解されやすいWebサイトになります。