alt属性とは？効果と設定方法を解説
この記事をご覧のみなさん、alt属性はどのようなものかご存知ですか？
alt属性というIT用語については、一度は耳にしたことがあっても、詳しい意味や内容まで理解できている人は多くありません。
そこで今回は、「alt属性とは？効果と設定方法を解説」と題して、alt属性の定義を明らかにするとともに、alt属性を設定する理由・効果も解説させていただきます。
alt属性とは？
alt属性とは、「通信が不安定であるなど何らかの理由で画像が表示できない時に、代替テキストを指定するために使われるもの」を表します。
alt属性で設定した代替テキストは、音声ブラウザやスクリーンリーダーによって読み上げられます。
HTMLタグのimg要素には、以下のように記述します。
〈img scr=“/img.pngなどの画像のパスを記述します” alt=”画像の代わりとなるテキストを入力します” /〉
そもそもalt属性という用語は、「代替テキスト」を意味する「alternative text」に由来していて、「オルト属性」と読みます。
W3C（WEBで利用される技術の標準化をすすめる国際的な非営利団体）には、下記のように定義がされています。
「画像をWEBサイトに掲載する場合は、その画像が何を表しているのかをalt属性に指定すること。また、注意点としては画像の視覚的な特徴までは必要ないが画像と同じ内容を設定する。」
このようにalt属性は、非テキストコンテンツの代替テキストのWebアクセシビリティ対応として、特に高齢者や視覚に障害のある方向けに活用されます。
そして正しく記述することで、コンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。
Webアクセシビリティ対応とSEO対策を両方とも行いたいとお考えの企業の方は、alt属性で画像の代替テキストを設定するようにしましょう。
また、ここで言うアクセシビリティ(accessibility)とは、WEBサイト上における、情報やサービスへのアクセスのしやすさのことです。
アクセシビリティが向上することで、サイト運営者やユーザーにとって、いくつかのメリットがあります。それは、WEBサイトが年齢や性別、障害の有無、さらには利用環境の状況にかかわらず、誰もが利用しやすいものになるということです。
これが結果として、新規顧客の獲得や利益の増加などにつながります。
このように、WEBサイト上でアクセシビリティが確保されていると、より多くのユーザーに情報発信をすることができ、多方面に便益が生まれます。
一方、いくつかデメリットもあります。それは、ページのデザインがシンプルになり過ぎてしまったり、テキストが平素になってしまうことです。
他にも、アクセシビリティを検証するのに時間とコストがかかるということが問題点として挙げられます。
しかし、現代にはアクセシビリティが確保されているか否かをチェックする便利なツールがあります。
ツールを上手く活用することで、WEBサイトのアクセシビリティがきちんと高められているかどうか検証することができるようになり、誰もがアクセスしやすいWEBサイトを構築することができます。
そしてalt属性には、よく似た概念としてタイトルタグというものがあります。
alt属性が画像の代替テキストであるのに対し、title属性は画像以外のテキストなどを補足説明します。
そんなタイトルタグ（Title tag）は、WEBサイト名や各WEBページのタイトル部分を記述するHTMLタグのことです。
HTMLのソースでは以下のように表されます。
〈title〉○○〈/title〉
上記のように、タイトルを〈title〉〈/title〉で囲んで記述すればタイトルタグを設定することができます。
○○の部分が検索エンジンの検索結果画面で、説明文の上部に表示されるタイトルに該当します。
そんなタイトルタグは一番目に付く場所に位置するため、ユーザーにサイトをアクセスしてもらえるかどうかを左右します。
それだけでなく、Googleを始めとする検索エンジンによってサイトが上位に表示されるかどうかに大きく影響します。
そのため、タイトルタグを設定する際には幾つかの注意点に気を付ける必要があり増す。以下の通りです。
・長すぎて「・・・」と表示されないように、文字数を30字前後に収める。
・タイトルタグが重複しないようにする。
・ユーザーの検索意図を考慮する。
このようにタイトルタグは、ユーザーと検索エンジンの両方にページの内容を伝える役割を担います。
そのため、ユーザーの利便性とSEOの両面で最適化したいとお考えのサイト運営者は、重要なキーワードや訴求したい内容をタイトルの中に盛り込むようにしましょう。
alt属性を設定する理由・効果
alt属性とは？何かが明らかになったところで、続いてalt属性を設定する理由と効果について見ていきましょう。
alt属性で画像の代替テキストを設定するべき理由は大きく３つあります。
1.通信速度が不安定なことが原因で正しく表示されない画像の意味を正しく伝えるため。
2.視覚障害のある方や高齢者にも画像の意味を正しく伝えるため。
3.検索エンジンのクローラーに画像の意味を正しく伝えるため。
このようにalt属性は、画像の内容を検索エンジンとユーザーの両方に正確かつわかりやすく伝える役割を担います。
そんなalt属性を設定すると、Webアクセシビリティが向上してSEO効果につながります。
そもそもSEO(Search Engine Optimization)とは、「検索エンジン最適化」とも呼ばれます。
Googleを始めとする検索エンジンにおいて、検索結果ページの上位表示の順位に、自社のWEBサイトが表示されるように工夫することで、そのための技術やサービスを言います。
そんなSEOには幾つかメリットがあります。以下の通りです。
・無料または低コストで始められる。
・サイトが上位に表示されると、ブランディング効果を得られる。
反対にデメリットもあります。以下の通りです。
・一定の効果が現れるまでに時間がかかる。
・検索エンジンのアップデートやアルゴリズムに左右セットされる可能性がある。
そしてSEOは大きく2種類に分類されます。以下の通りです。
・内部施策 Webサイト内を最適化して修正すること。代表例はコンテンツマーケティング。
・外部施策 Webサイトの被リンクの質と量を増やして向上させること。
このようにSEOで成果を上げるためには、内部施策と外部施策を講じる必要があります。その中でも特に、ユーザーの目線に立って良質なコンテンツを提供し続けることが何より大切です。
その際、SEO対策したい検索キーワードを文脈に沿った形でコンテンツに含ませると効果的です。実際にGoogleもそうしたWebサイトを高く評価します。
同時にユーザーには、自社の商品やサービスを知ってもらう機会を与え、最終的には見込み顧客をファン化させることができます。
Webサイトを検索順位の上位に表示させることで、集客効果を得たりコンバージョン数を増やしたりしたいとお考えのサイト運営者は、SEO対策を講じるようにしましょう。
alt属性の設定方法
alt属性を使った代替テキストは、アクセシビリティ対策の一つとして、画像を始めとする非テキストコンテンツを代替テキスト対応させる必要があります。
その際、コンテンツ全体の文脈において意味が通るように入力する必要があります。
そもそも、代替テキスト（Alternate text）とは、WEBサイト内に含まれている動画、画像などが何らかの原因で表示されなかった時、音声ブラウザを使用する時に代わって表示するテキストのことです。
そんな代替テキストの用途は、ブラウザやテキストブラウザ、点字ディスプレイ、クローラーなど多岐にわたります。
特に「スクリーンリーダー」を活用すると、コンテンツが音声に変換され、代替テキストが読み上げられます。
これは実際に、視覚障害のある方や接続の問題でWebページの画像を見ることができないユーザーの役に立っています。
また代替テキストは、画像テキストのアンカーテキストとしても機能します。
HTMLのタグにalt属性を追加することで設定します。
<img src=”example.png”alt=”○○”>であれば、○○の部分に代替テキストを記述します。
その際にはいくつかの注意点があります。以下の通りです。
・キーワードを盛り込まない。
・正確に記述する。
・簡潔にまとめる。
これらを一切気に留めず、画像の内容に合わない代替テキストを記述すると、スパムと認識されてしまいます。
また代替テキストは、Webページにある全ての画像に追加する必要はありません。
このように、代替テキストはあらゆる分野で有用性が高く、SEO対策としても重要視されます。正しい記述の方法によって、適切な代替テキストを追加することが求められます。
その上で、画像には幾つか種類があります。以下の通りです。
・テキスト画像
・写真
・アイコン画像
・グラフ画像
このように、alt属性の種類は多岐にわたります。
また、正しく記述することでコンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。
画像の意味を正しく伝えつつ、最終的にSEO効果へつなげたいとお考えのサイト運営者は、alt属性を設定するようにしましょう。
まとめ
今回は、alt属性の定義を明らかにするとともに、alt属性を設定する理由・効果、設定方法まで解説させていただきましたが、いかがでしたでしょうか。
alt属性は、「何らかの理由で画像が表示できない時に、代替テキストを指定するために使われるもの」だということがわかりました。
主に、非テキストコンテンツの代替テキストのWebアクセシビリティ対応として、特に高齢者や視覚に障害のある方向けに活用されます。
そして正しく記述することで、コンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。
Webアクセシビリティ対応とSEO対策を両方とも行いたいとお考えの企業の方は、alt属性で画像の代替テキストを設定するようにしましょう。
GTM（Googleタグマネージャ）とは？活用メリットや機能・導入方法を紹介
【株式会社セレクト・ワン】
東京本社：03-5953-7160
株式会社セレクト・ワンの社員によってオススメ情報を執筆している【編集チーム】です。”初心者の方にもわかりやすく”をモットーに、記事を読んだら直ぐに実践できるWEBマーケティング関連の情報を紹介しています。
また、弊社の実績や導入事例から見る・コンテンツマーケティング・SEO対策・WEB制作など、様々な最新情報やノウハウも発信していきます。
