alt属性とは？重要な理由や正しい書き方、記述例を紹介

alt属性とは

alt属性（オルト属性）とは、Webページ上の画像が表示できないときに、代わりに表示されるテキストを指します。alt属性の「alt」は「alternative（代わりのもの）」を略した言葉で、「代替テキスト」と呼ばれることもあります。

alt属性は、Webページを構成するHTMLタグのimg要素として以下の内容を記述します。
Webページの作成に使用するCMSによっては、画像の挿入時にalt属性を同時に設定できるものもあります。

<img src="画像のパス（〇〇.jpeg など）" alt="画像の内容を説明するテキスト">

alt属性で入力されたテキストは、画像の代わりに表示されるだけでなく、ブラウザやデバイス音声読み上げ機能やスクリーンリーダーなどでも読み上げられます。

そのため、「購入する」「詳しく見る」などのテキストが入ったボタン画像などは、画像が表示されない状況下でもユーザーの購買機会を失わないよう、alt属性にも「購入する」とボタンのテキスト内容を記載するとよいでしょう。

また、ページ内のメニューなどをアイコン画像のみで表示している場合は、画像が表示されなくなった際にユーザーがどこをクリックすればよいか戸惑ってしまいます。そのため、「サービス内容」「採用情報」「検索」などのalt属性を各アイコン画像に設定しておくことをおすすめします。

このように、alt属性はユーザーの可読性を高めるうえで重要な役割を果たします。

alt属性を設定する重要性

alt属性は、ユーザーがWebページを読む際の補助的な役割を果たすだけでなく、SEOにも効果をもたらすことがあります。

検索エンジンは、Webページの内容を確認する際に、クローラーと呼ばれるロボットを使用します。そのため、ページ内の画像やテキストの内容がわかりやすく整理できていない場合、クローラーが正しくページ内容を理解できず、検索結果での上位表示ができなくなるリスクがあります。

特に、画像単体ではクローラーがコンテンツとの関連性を把握しづらいため、画像にalt属性を設定して画像の内容を説明することで、クローラーの理解を促します。alt属性を適切に設定することで、画像検索での結果にも反映されやすく、上位化が狙えます。

ほかにも、画像の前後に記述したテキストや画像のファイル名などを工夫し、設置した画像がテキストと関連性が高いものであると示すことで、検索エンジンからも有益な情報をわかりやすく提供しているコンテンツとして評価をもらいやすくなります。

alt属性の設定が必要ない画像もある

alt属性は、すべての画像に必ず入れなければならないわけではありません。

例えば、Webページの背景に挿入した背景画像や、ラインなどの画像は装飾として追加しているため、コンテンツ内で意味を持たない要素になります。このように、単に装飾目的や読みやすさを考慮して挿入された画像や写真に関してはalt属性の設定は必須ではありません。

ただし、alt属性を設定しない場合も、HTMLを記述する際は「alt=""」と空欄のalt属性のタグが必要になります。手入力でimg要素を記述する際は、「alt=""」の記述を忘れないようご注意ください。

ページ内の画像のalt属性を確認する方法

ページ内の画像にalt画像が適切に設定されているかを確認したい場合、Webブラウザ「Google Chrome」の拡張機能や検証機能を使って調べられます。

拡張機能を使って調べる方法

Google Chromeの拡張機能である「Alt＆Meta viewer」を利用することで、簡単にページ内の画像のalt属性が調べられます。
Alt＆Meta viewerのインストール方法と使い方は、次のとおりです。

１．Alt＆Meta viewerのダウンロードページへアクセスする

２．「Chromeに追加」をクリックし、インストールする

３．検証したいページを開く

４．画面右上の拡張機能アイコン（パズルピースのアイコン）をクリックし、Alt＆Meta viewerを起動する

このとき、ピンのマークをクリックすることでツールバーにピン留めされ、ワンクリックで拡張機能を起動できるようになります。

５．「画像のAlt表示」右側のフキダシのアイコンをクリックする

６．alt属性を確認する

検証機能を使って調べる方法

Google Chromeの検証機能を使って調べる方法は、次のとおりです。

１．Google Chromeで検証したいページを開く

２．画像の上で右クリックし、「検証」をクリックする

３．画像のalt属性（「alt=""」）を確認する

alt属性の正しい書き方

ページ内の画像にalt属性を記述する際、どのように書くことで検索エンジンに理解してもらいやすくなるのでしょうか。ここでは、alt属性の適切な書き方をご紹介します。

画像を見なくても内容が伝わるよう意識する

alt属性を記述する際は、ユーザーが画像を見なくても画像がどのような内容を伝えているのかをわかるように伝えることが大切です。そのため、画像の内容を簡潔に伝えるテキストを記述するのが望ましいです。

例えば、上記の画像には犬と遊ぶ女性を写しています。alt属性には「alt="犬と遊ぶ女性"」と記述するとよいでしょう。

キーワードを含みすぎない

alt属性では画像の内容をわかりやすく伝えることが重要ですが、情報を詳細に伝えすぎることでかえって誤った内容でクローラーに認識される恐れがあるため、必要最低限の情報のみを記述しましょう。

例えば、先ほどの犬と遊ぶ女性の画像において、「alt="犬と遊ぶ女性、青空、トイプードル、白いシャツ、芝生"」など複数のキーワードを詰め込むと、どの要素が重要なのかクローラーが判断できず、正しく画像の内容を認識できない可能性があります。

画像にリンクを設定する場合は必ずalt属性を記述する

「購入する」「問い合わせる」のようなCTAボタンなど、画像にリンクを設定し別のページへ遷移させる場合は、画像がアンカーテキストの役割を果たすため、必ずalt属性を設定しましょう。

アンカーテキストとはリンクとひもづける文章を指し、クローラーはアンカーテキストに設定されたテキストをもとに、リンク先のページの内容やリンク元のページとの関連性を確認します。

画像にリンクを設定した場合、アンカーテキストでリンク先の内容を示せないため、alt属性で示す必要があります。そのため、画像にリンクを設定する際は、画像の内容とリンク先に関連性があることを伝えられるようにalt属性を記述しましょう。

alt属性の良い例・悪い例

ここまで、alt属性の正しい書き方についてご紹介しました。

次に、上記の画像を使い、alt属性の良い例・悪い例をご紹介します。
先述した内容とあわせてぜひご参考にしてください。

良い例

alt属性の良い例としてあげられるテキストは、次のとおりです。

• ノートパソコンを見る男性と女性
• 仕事中の男性と女性
• 男性から仕事を教えてもらう女性
• パソコンの画面を見る男性と女性

コンテンツで使用するキーワードや画像の周辺に記述するテキストの内容も考慮しながら、どの内容を優先して盛り込むかを考えることが大切です。

悪い例

悪い例としてあげられるテキストは、次のとおりです。

• 会議中の大勢の社員（画像とテキスト内容が一致していない）
• パソコンを見る男性と女性、スーツ、ノートパソコン、オフィス、業務効率化（キーワードを詰め込みすぎている）

このように、画像に対して内容が明らかに異なるテキストや、キーワードを乱用したテキストは、ユーザーやクローラーが画像の内容を正しく認識できない原因となるため、記述しないようご注意ください。

なお、alt属性の良い例・悪い例はGoogle 検索セントラルでも提示されているため、あわせてご確認ください。

alt属性が表示されないときに考えられる原因

使用しているブラウザによっては、alt属性が表示されないこともあります。また、スマートフォンでページを閲覧している場合も、alt属性が確認できないことがあるため、念頭に置いておくとよいでしょう。

「ほかのページではalt属性が表示できるのに、自社のページだけ確認できない」といった場合は、HTMLの記述に誤りがある可能性があるため、再度記述内容を確認してみることをおすすめします。

まとめ

この記事では、alt属性とは何かを、重要な理由や正しい書き方、具体的な記述例などとあわせてご紹介しました。

alt属性を適切に設定することで、通信環境が悪く画像を表示できないユーザーや、目が不自由で読み上げ機能を利用しているユーザーの閲覧をサポートできるだけでなく、クローラーが正確にページ内容を理解しやすくなるといったメリットがあります。

記事内でご紹介した例文などを参考に、ぜひ設定してみてください。