alt属性とは？メリットと適正な記述方法、確認方法について徹底解説！

インターネットの普及に伴い、現在ではほとんどの人がインターネット経由で様々な情報に接し、また多くのWebサイトを閲覧しています。

各サイトには、内容ももちろんのこと、写真や画像、動画など、様々なツールを活用して装飾が施されています。

そして、普段何気なく見ている画像には「alt属性」というテキスト情報の設定がされています。

この記事では、alt属性の意味とメリット、記載方法や確認方法などについて詳しく解説します。

alt属性とは？

alt属性とは、HTMLにおけるimg要素やinput要素で画像や写真を表示する際に、当該画像の代替としてテキストを指定することを意味します。

altは、別名を代替テキストとも呼び、発音上はアルトではなく「オルト」と呼びます。

この代替テキストを指定することにより、仮に画像の表示が出来ないブラウザなどを使用して当該サイトにアクセスした際、画像の代わりに内容がテキスト形式で表示されます。

また、alt属性を記述することにより、検索エンジン上のクローラーに画像の内容を伝えることが可能となります。

title属性との違いは

alt属性とよく似た言葉に、title属性というものがあります。

両者の違いは、alt属性が画像の代替テキストであるのに対して、title属性は画像に対して助言的な説明をする点にあります。

簡単に言えば、alt属性は画像そのものを示すのに対し、titleは補足説明を示すものです。

もう一つの違いは、alt属性が画像以外に設定できないのに対し、title属性は画像やテキストなどすべての要素に設定すること可能な点です。

alt属性のメリットは

alt属性のメリットについて解説します。

主なメリットとしては、alt属性を適切に記述することで、検索エンジンとユーザー両方に優しいサイトに近づくことが挙げられます。

一方、alt属性を適切に記述しても、直ちに掲載順位が上がることはありません。

alt属性の機能は、あくまでも検索エンジンに適切な画像内容を伝えることであり、それによってコンテンツの理解度を高めるものです。

以下に、主なメリットについてみていきます。

検索エンジンの画像理解

検索エンジンが画像だけで内容を完全に理解するのは困難ですが、画像理解を促すためにalt属性を活用します。

alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられるメリットがあり、画像検索で上位表示を狙う際にはには重要な要素となります。

また、画像検索結果で上位に表示されることで、新たな集客が出来るのもメリットです。

画像の代替

alt属性は、検索エンジンに加えてユーザーの役にも立つメリットがあります。

例えば、通信状態が悪くて画像が正しく表示されない場合など、テキストで画像の内容を補完したり、音声読み上げ機能を使用して読み上げテキストとして利用できます。

こうした機能は、視覚障害の方や高齢者に有効であり、通信環境に関わらず利用できるメリットがあります。

SEO効果

alt属性によるのSEO効果を一言でいえば、検索エンジンのクローラーに画像の内容を伝えられる点にあります。

alt属性には、検索結果の画面で「直接」検索順位を上げるSEO効果はありませんが、alt属性を記述することで、画像の内容を検索エンジンのクローラーに正しく伝えられるメリットがあります。

本来、クローラーはテキストの内容だけを理解しますが、alt属性を記述することで、画像の内容を理解することが可能となります。

ユーザー側のメリット

alt属性を設定することによるユーザー側の主なメリットとしては、画像の代替効果の項で述べたとおり、ユーザーが音声読み上げ機能を活用して読み上げが可能となる点と、通信状態が悪い場合に画像の内容を補完できる点が挙げられます。

alt属性の画像代替機能により、alt属性を記述すればテキストを音声で読み上げることが可能となるので、ユーザーは画像内容の理解が容易になります。

また、Webサイトを閲覧中のユーザーの通信状態が悪い場合、alt属性の記述によって文字列が表示されるので、画像の内容を補完することが可能となります。

alt属性の適正な記載方法とは

alt属性の記載方法は次のとおりです。

<img src=”画像のURL” alt=”画像の説明”>　

上記の「alt=””画像の説明”」の部分がalt属性となります。では、具体的に、画像の説明部分をどのように記述すれば良いのでしょうか？

alt属性を適正に記述することで、検索エンジンの画像理解を高めますが、その一方、誤った記述方法をすると検索エンジンが画像の内容を間違って理解する危険性があります。

以下に、alt属性を記載する時のポイントを解説します。

具体的な内容を記述

alt属性は、ユーザーの通信環境などによって画像が表示されない場合に、テキストとして画像内容をユーザーに伝達します。

このため、画像を見なくても提載している画像がどのようなものなのかが理解できるよう、具体的な記述を行う必要があります。

画像の内容に沿っており、ユーザーが理解しやすい具体的なテキストの記述がポイントとなります。

キーワード数も適正に

alt属性のキーワード数を適正に保つことが大切です。キーワードを詰め込み過ぎると、逆に画像の内容が伝わりにくくなります。

さらに、検索エンジン側から「スパム行為」と認識され、ペナルティを受ける可能性もあるので、画像と関連しないキーワードの記述は避けるべきです。

alt属性を設定する際には、画像の内容に沿った適正なキーワード数を意識しましょう。

単なる画像の場合

alt属性は、基本的には記述した方が良いですが、全ての画像に対して記述する必要はありません。

記述の必要がない例としては、意味をもたない、単なる装飾目的で使われる画像が挙げられます。例えば背景画像やラインマーカーがこれに該当します。

意味をもたない画像の場合は、alt属性は記述せずに空白のままにしておきます。

alt属性の確認方法

alt属性が適切に記述されているかを確認する方法としては、Googleの検証機能を使う方法と、Googleの拡張機能を使う方法があります。

それぞれについて解説します。

Google検証機能

まず、Googleの検証機能を使ってalt属性を確認する方法があります。

検証機能の使い方は簡単で、最初に調査したいページ上で右クリックし、その後に｢検証｣をクリックします。

すると、画面上にページのソースコードが表示されるので、その中から確認したい画像の部分をクリックすることで、alt属性の記述を確認できます。

Google拡張機能

次に、Chromeの拡張機能「Alt＆Meta viewer」という無料ツールを使用すればalt属性を確認できます。

Chromeウェブストアから「Alt＆Meta viewer」と検索し、次に「CHROMEに追加」をクリックするとインストール可能となります。

このツールを使用することで、alt属性とtitle属性を「ツールチップ」として表示できます。

alt属性が確認できない場合

alt属性が、ブラウザが原因で表示されない場合があります。具体的には、スマートフォンやIE11・IE8のブラウザなどで表示されない状況です。

上記以外の場合で、PC上でもうまく表示されない場合には、正しい記述になっているかどうか確認が必要です。

まとめ

alt属性の意味やtitle属性との違い、alt属性のメリットや、適正な記載方法と確認方法について詳しく解説しました。

alt属性は、画像の代わりに表示されるテキスト情報であり、alt属性を記述することによって、画像検索の際に上位表示できる可能性が高まります。

一方、やみくもにalt属性を記述するだけでは大きな効果が得られません。

alt属性における記述の意味やメリットをよく理解し、自サイトで記述する際に参考としていただければ幸いです。