alt属性とは?代替テキストの役割と設定方法を解説します
alt属性とは、webサイトに画像をアップロードする際、HTMLソースコード上に記述する、img要素のプロパティ(属性)ことで、画像の代わりとなるテキストを指します。webサイト上で、テキストだけでは伝わりにくいことを画像で表現する際、同時にその画像に、「alt属性」という代替テキストを設定する必要があります。本記事では、alt属性とはどういったものなのか、その重要性や具体的な書き方を解説します。

alt属性とは?
alt属性とは、webサイトに画像をアップロードする際、HTMLソースコード上に記述する、img要素のプロパティ(属性)ことで、画像の代わりとなるテキストを指します。
alt属性は、裏側のHTMLソースコード上で持っているものになるため、webサイト上の視覚的に表示されるものではありませんが、alt属性が書かれていないことで、
・検索エンジンが画像の意味を認識できない
・音声読み上げができない
などクロールとユーザーのどちらからも正しく認識してもらえない可能性があります。
>「Semrush」altの抜け漏れ・内部診断・競合調査までSEO改善がこれ一つで!
なぜ alt属性が重要なのか?3つの理由
alt属性をなぜ設定しなくてはいけないのか、その重要性を4の観点から解説します。
1画像の情報を検索エンジンのクローラーに正しく伝えるため
2通信障害時でも画像の情報を理解できるようするため
3視覚障害者の方が画像の情報を理解できるようするため
画像の情報を検索エンジンのクローラーに正しく伝えるため
alt属性は、画像の情報を検索エンジンのクローラーに、正しく伝える手助けになります。
GoogleやYahoo!など検索エンジンがwebサイトをクロールする際に、テキストデータであれば正確にその意味を認識できますが、画像データの場合正確に認識できないことがあります。
近年、画像処理の技術が発達してきたGoogleですが、100%ではないため、補完的な意味でも、画像にしっかりとalt属性が書かれていれば「この画像は〇〇についての画像ですよ」と、検索エンジンがクロールする際に画像の意味を正確に認識する手助けになるのです。
通信障害時でも画像の情報を理解できるようするため
alt属性は、通信障害時に画像の情報を理解する手助けになります。
通信障害が発生した場合、webサイトの読み込みがうまく行われないために画像が表示されなくなってしまうことがあります。
通信障害が発生した場合であっても、alt属性がしっかりと設定されていれば、画像が表示されるべき場所にalt属性に書かれているテキストが代わりに表示されるため、ユーザーの利便性が損なわれることなく画像の意味を伝えることができます。
視覚障害者の方が画像の情報を理解できるようするため
alt属性は、視覚障害者の方がWebサイトを理解する上で、手助けになります。
視覚に障害がある方がwebサイトを見ようとした際には、一般的に音声読み上げ機能を使用しますが、画像は音声にならないため伝わりにくくなってしまいます。
そういった場合にalt属性が漏れなく設定されていれば、そのテキストが読み上げられるため、視覚障害者の方でも画像がどういうものなのかを理解できるようになるのです。
alt属性の記述方法
ここでは具体的に画像をアップロードする際、その画像に対してどのようにalt属性を設定すればいいのか紹介します。

例えばこの自転車の画像をwebサイトにアップロードした場合には、以下のようにalt属性を書きます。
<img src="〇〇.png" alt="自転車">
このように、imgタグの中の「alt=""」部分にその画像の意味を記載します。imgタグを設定する場合、alt属性もセットであると覚えることで、設定を忘れることを防げるでしょう。
>「Semrush」サイト診断・順位計測・キーワード調査などSEO対策にフル活用!
alt属性が必要な4つのケース
webサイトにアップロードする全ての画像に対してalt属性が必要なわけではありません。
alt属性が必要な4つのケース
・本文の説明を目的に画像を設置している場合
・画像にリンクを設置している場合
・タイトル・見出しを画像としている場合
・表やグラフを画像で表現している場合
を解説します。
本文の補完を目的に画像を設置している場合
画像を本文の補完目的に設置している場合、alt属性を設定する必要があります。
この場合、画像もページの一部とあるため、クローラーやユーザーが正しく認識できるよう、記述する必要があります。
画像にURLリンクを設置している場合
たとえばバナー画像のように、画像そのものに他ページ誘導のURLリンクが設置されている場合は、alt属性を設定する必要があります。
通常、webサイト内にリンクを設置する場合は、リンク先のページについて説明する「アンカーテキスト」が必要ですが、画像の場合は設定できません。
そのため、リンク先がどういったページなのかを示すアンカーテキストの代わりとして、記述する必要があります。
タイトル・見出しを画像としている場合
画像をページ内のタイトルや見出しにしている場合も、alt属性は必須です。
タイトルや見出しはページ内で比較的重要な存在であるため、alt属性が未設定の場合、検索エンジンに認識されない可能性があります。
検索エンジンにタイトルや見出しの意味を正しく理解してもらうためにも、alt属性は必要不可欠なのです。
表やグラフを画像で表現している場合
表やグラフは視覚的表現に適しており、本文を説明するコンテンツであることが多いため、alt属性を設置しましょう。
設置する際は、「何についてまとめている表やグラフなのか」をalt属性に設定します。
表やグラフの場合、alt属性が長くなってしまいがちですが、なるべく端的に分かりやすくまとめましょう。
alt属性が不要な2つのケース
alt属性は不要な画像についても紹介します。
・画像をデザイン目的で使用している場合
・本文中で画像の説明がされている場合
画像をデザイン目的で使用している場合
webサイトを更新する際に、デザイン目的で背景画像をアップロードすることがあります。
背景画像はそれ自体に意味はなく、単にデザイン目的で存在するため、そのページの中で重要な意味を持つことはありません。
そういった場合は「alt=""」というように、alt属性を空にしたままで大丈夫です。
本文中で画像の説明がされている場合
画像とは別にすでに前後で写真の説明を行っている場合があります。そういった場合は、改めて画像のalt属性上で、画像の説明は不要になります
alt属性の不要な具体例
アップロードする画像の種類ごとに、alt属性が不要な具体例を解説します。
alt属性を記述するべきか分からない場合に参考にしてください。
・写真
・イラスト
・アイコン
写真
風景や人物などの写真をアップロードする場合、その前後にその写真を説明する文章が記載されていれば、写真での説明は不要ため、alt属性は不要です。
例えば、「〇〇へ行って写真を撮ってきました」と紹介して写真を掲載する場合は、alt属性は不要です。
イラスト
サイトの装飾やトンマナを整えるためにイラストをアップロードする場合は、単にデザイン目的の画像使用に該当するためalt属性は不要です。
アイコン
webサイトの装飾目的で、電球マークや虫眼鏡などのアイコンを表示することもあるでしょう。このようにデザイン目的で使用されるアイコンにはalt属性は不要です。
>「Semrush」競合調査・キーワード調査・効果検証までSEO改善がこれ一つで!
alt属性を書くときの4つの注意点
画像に対してalt属性を書く場合には、以下の4つの注意点があります。
1端的にわかりやすいく画像を説明する
2複数のキーワードを詰め込まない
3長文にならないようにする
4コピペではなくオリジナルの文章にする
1端的にわかりやすいく画像を説明する
alt属性を書く場合は、長くなりすぎないように、短く分かりやすくその画像がどういったものかを説明できるテキストをalt属性として設定します。
上記の画像の場合は「壁際に置かれている黒い自転車」という説明は長くて伝わりにくいため、シンプルに「自転車」と表しましょう。
2複数のキーワードを詰め込まない
alt属性に複数のキーワードを書いてしまうと、その画像の意味が正しく伝わらない可能性があります。
先程の画像を例に挙げると「自転車 黒 壁際 古い」などのように複数のキーワードが書かれていると、検索エンジンが混乱してしまいます。
その画像を端的に表す単一のキーワードを、alt属性として設定するようにしましょう。
3長文にならないようにする
alt属性に含めるテキストが長くなりすぎても、正確に意味を伝えることができなくなってしまいます。
目安としては、alt属性が10文字以上になってしまう場合は短くまとめるように意識しましょう。
4コピペではなくオリジナルの文章にする
alt属性はなるべくオリジナルな文章で設定してください。
ページ内に似たような画像があった場合に、コピペで同じ文章を設定してしまうと検索エンジンに「これらの画像は同じ画像だ」と認識されてしまいます。
alt属性が正しく設定されているか確認する方法
alt属性はwebサイトの表側に表示されないため、抜け漏れなくalt属性が正しく設定されているかどうかをチェックすることが大変です。
そういった場合には以下のツールを利用して、設定されているかどうかを確認しましょう。
Alt &Meta viewer
Google Chromeの拡張機能である「Alt &Meta viewer」はクリックするだけで、ページ内の画像にalt属性が抜け漏れなく設定されているかどうかを瞬時にチェックできます。
また、ページ内の画像の中にalt属性が未設定の画像の数も同時に確認できるため、非常に便利なツールです。
無料の拡張機能なので、webサイトを更新する機会が多い方は、Google Chromeにインストールしておきましょう。
Semrush

SEOツールのSemrushを利用すると、サイト内部のエラーチェックからalt属性の抜け漏れなどを、一括で洗い出してくれます。
▼無料7日間トライアル実施中▼
http://semrush.web.oro.co.jp/lp/seo/top.html
alt属性を正しく設定し検索エンジンの評価を高めよう
alt属性はwebサイトの表側には表示されない要素であるため、あまり重要ではないと思う方も多いかもしれません。
しかしalt属性が正しく設定されないと、検索エンジンに対して画像の意味を正しく伝えられなかったり、視覚障害者の方が画像の意味を認識できなかったりしてしまうため、漏れなく設定するようにしましょう。
端的に分かりやすく画像がどういったものかを示すalt属性を書くことで、検索エンジンに対して正確に画像の意味を示せるため、webサイトの評価向上につながります。
alt属性の抜け漏れチェックに有効なツール
記事内紹介のSEOツール「Semrush」をいますぐお試し!