【HTML】imgタグのalt属性（代替テキスト）とは？必要性やSEOの影響について解説！

imgタグには、alt属性（代替テキスト）を指定できるのですが、意味や使い方をご存知でしょうか？

alt属性はWEBアクセシビリティ向上に関して重要な役割を担っています。
※WEBアクセシビリティとは、高齢者や障害者を含め、誰もがストレスなく情報や機能を利用できることを指します。

今回の記事では、alt属性意味や必要性、SEOの影響について解説していきます。

alt属性とは、何らかの理由で画像が表示されなかった場合、代わりとして表示されるテキスト（代替テキスト）を指定できる属性です。

WEBサイト上で、下記のようなものを見たことがある方は、多いと思いますが、このテキストの部分を設定できるのが、alt属性となります。

このalt属性を正しく設定することで、何らかの理由で画像が表示できなかった場合でも、その情報を閲覧者に伝えることができます。

お悩みさん

そもそも、alt属性を指定する方法が分からない・・

指定方法がよく分からないと言う方の為に、簡単ですがご紹介をしておきます。指定するには、HTMLタグのimg要素に以下のように記述をします。

<img src="画像のパス" alt="画像の代わりになるテキストを入力">

上記のaltの、「””」の間に画像の代わりになるテキストを入力する形になります。

結論から言うと、「声で読み上げても意味が伝わるか」が重要となります。では実際に、店内の案内図を例として出してみます。

どんなテキストを設定するかで、伝わり方が違うのがご理解いただけたでしょうか？左は、店内の案内図が入ることがしっかりと伝わりますが、右は、何の図が入るのかイマイチ伝わっていません。

alt属性を指定する場合は、適当にテキストを入力するのではなく、声で読み上げても意味が伝わるかどうかが重要です。

・声で読み上げても意味が伝わるかどうかが、良い判断基準になる

先ほど、「声で読み上げても意味が伝わるか」が重要であると解説しましたが、それはalt属性で指定したテキストは、音声読み上げ機能で読み上げられるからでもあります。視覚障害を持っている方や、高齢の方は、WEBサイトの内容を理解する為に音声読み上げ機能を利用するのが一般的です。

身体的な理由や、何らかの原因で画像が見れない方の為にも、alt属性の指定は必要不可欠であると言えます。

お助け猫

WEBアクセシビリティの観点からも、意識したいポイントです。

alt属性で指定した代替えテキストは、検証ツールで確認すれば、簡単に確認出来てしまう点にご注意ください。
※検証ツールとは、WEBページのHTMLやCSSの構造を簡単に確認できる便利なツールの事。

なので、alt属性をメモ代わりに使用（あまりいないと思いますが）するのは、NGです。

・検証ツールを使えば、指定した代替えテキストは簡単に確認出来る
・alt属性を、メモ代わりに使用しない事！

alt属性を指定する事の重要性は理解していただけたと思います。しかし、サイト内全ての画像に指定すべきかと言われるとそうではありません。例えば、サイトの装飾の為に使用している画像やアイコン等は、alt属性の値を「alt=””(空白)」にしておけば大丈夫です。

お助け猫

サイト内で、「意味を持つ画像」には積極的にalt属性をつけるという認識で問題ありません。

一般的にですが、alt属性を指定することで、検索結果の画面の順位を上げるという点では、直接的なSEOの効果は無いと言われています。

しかし、画像の内容をクローラーに正確に伝えられる為、画像検索で上位表示を狙えるようになると言われています。なので、SEOに全く効果がないとは言い切れません。

※クローラーとは、検索エンジンが検索の順位を決めるための要素を、サイトを巡回して収集してくるロボットの事です。

alt属性は、しっかりと指定すべき意味がある事を理解していただけたと思います。特に何も意識する事なく指定していたと言う方は、この機会に見直してみてはいかがでしょうか？