alt属性とはWEBサイトの画像内容をテキストで表したもので、何らかのエラーで画像が表示されないときに代替テキストとして機能します。画像に使用するHTML要素の一種で、altタグや代替テキストと呼ぶこともあります。

WEBサイトの運営にあたってalt属性は重要です。Googleは画像検索を視野に入れて画像を最適化することを推奨しています。しかしその反面、不適切な記述ではユーザビリティを低下させるほか、検索エンジンからスパムとして認識される可能性もあるため注意が必要です。そこでこの記事ではalt属性の役割や適切に記述する方法と注意点をご説明します。

alt属性とは

alt属性は代替テキストのことです。alt（オルト）とは、代替を意味する英語であるalternative（オルタナティブ）の略であり、その名のとおり画像に代わって文字で画像の内容を伝えることができます。

alt属性を記述することで期待できる効果には次のようなものがあります。

なお情報通信アクセシビリティとは、年齢や身体的特徴といった理由を問わずすべての人が容易に情報通信にアクセスできることを意味します。

ユーザビリティを高める

alt属性が設定してあれば、たとえ何らかのエラーが原因で画像を表示できない場合でも、画像の内容をテキストによってユーザーに提示できます。これによってユーザビリティの低下の防止が可能です。

画像が表示できなくなる具体的なケースとしては、通信状況の影響で画像が表示できない場合や、リンク切れで画像が表示できないケースが考えられます。

通常は画像が表示されるため、alt属性に設定したテキストがユーザーの閲覧する画面に表示されることはありません。しかし、画像が表示されない状態になった場合に限り、alt属性に記述したテキストが画像の代わりに表示されます。これによってユーザーは画像を閲覧できなくても、画像が伝える予定であった情報を受け取ることが可能です。

alt属性はさまざまな条件からユーザーがアクセスしても必要な情報を入手できるよう、サポートするツールといえます。

情報通信アクセシビリティを高める

ブラウザの音声読み上げ機能は、WEBサイト内のテキスト情報を取得して読み上げています。しかし、画像のデータはテキストのように読み上げることができません。画像の内容をテキストで記述することで、音声読み上げ機能が画像の内容を判読できるようになります。

例えば、視覚の不自由なユーザーや高齢のユーザーの場合、WEBサイトの情報を視覚からではなく、聴覚から情報を入手するケースがあります。このとき、音声読み上げ機能が判読できるようにalt属性を記述すれば、ユーザーの特性に関わらず分け隔てなく情報を提供することが可能です。情報通信アクセシビリティへの配慮は総務省も推奨する考え方です。

検索エンジンに画像の内容を伝える

検索エンジンは画像の情報をalt属性に記載したテキストを介して把握しています。Googleはユーザビリティ向上の目的でWEBサイト内の画像を最適化することを推奨しており、alt属性はGoogleが推奨する画像最適化の方法の1つです。

SEOの評価にalt属性の記述が直接的に影響するわけではありません。しかし、検索エンジンが画像の内容を理解できれば、コンテンツの内容をより正確に把握する手助けになります。ユーザーが必要とする情報を的確に提供することにつながり、自社サイトのアクセス数を増やすことも可能です。

画像検索に有益

alt属性で検索エンジンに画像情報を正確に伝達することは、画像検索からの流入につながります。

Googleの報告によれば、2016年から2018年の2年間でスマートフォンから画像検索された割合は60％以上増加しました。WEBコンテンツにおける画像の重要性が増していることは明白です。

画像引用：Marketing Strategies（Think with Google）

検索エンジンが画像データを正確に把握できるようになれば、画像検索による自社コンテンツへの流入率アップにつながる可能性も高まります。

alt属性の記述方法

alt属性は次のように記述します。

重要なのは「画像の説明」部分の記述を適切におこなうことです。画像の説明に記述したテキストは画像が表示されない場合にユーザーの目に触れるほか、音声読み上げ機能で読み込まれ、検索エンジンにも認識されます。

alt属性に記述する際に重要なポイントは次の3つです。

alt属性は検索キーワードを含めた最小限の語句で、簡潔かつ具体的でありながら誰もがわかるように記述してください。

具体的かつ簡潔に書く

alt属性には、画像が示している内容を端的に表す語句を記述します。

例えば、次の画像の場合では、alt=”地面に寝そべってくつろぐ黒い猫”と記述してください。画像を見られなくても「地面に寝そべってくつろぐ黒い猫」という代替テキストから、屋外で手足を投げ出し地面に寝転がっている黒い猫の様子を思い描くことができます。

このときalt=”動物”と記述したのでは、簡潔ですが具体性に欠けています。またalt=”猫”やalt=”黒い猫”でも、画像の猫の様子を説明するには不十分です。

画像の内容が誰にでもわかるように書く

alt属性は誰もがわかりやすい文言で記述してください。

次の画像であれば、alt=”扉が開いたドラム式洗濯機の中でくつろぐ黒い猫”となります。

適切ではない記述の例も挙げておきます。

例えばalt=”黒い猫と暮らす 昼下がりの光景 “と記述しても、代替テキストだけではどのような画像なのか理解できません。

alt=”洗濯されちゃったのかな 黒猫 かわいい 大きくなったね”のように個人的な感想を記述するのも、代替テキストの役割を果たしておらず不適切です。

検索キーワードを含める

alt属性の文言に検索キーワードを含めることは、検索エンジンにWEBサイトの情報を正しく伝える上で欠かせません。

例えば、キーワードが「猫」と「おもちゃ」で作成した記事に掲載する次の画像のalt属性なら、alt=”おもちゃ遊びに飽きた黒い猫と肉の形のおもちゃ”となります。

このときalt=”猫 おもちゃ”とキーワードを並べただけの記述では、代替テキストだけで画像の意味を伝えるという観点から不十分です。

alt属性の記述が必要なケース

画像の内容を検索エンジンやユーザーに伝えなければならないときは、必ずalt属性を設定してください。alt属性を記述する画像には次のようなものがあります。

alt属性を記述しないケース

WEBサイトの画像に欠かせないalt属性の記述ですが、装飾が主たる目的の画像では記述しません。装飾が目的の画像はコンテンツに直接関わるものではないためです。

alt属性を記述しないケースには次のようなものがあります。

これらのケースでは画像の内容がわからなくてもコンテンツ情報の理解に影響しないため、alt属性を設定しません。

ただし記述しないのは画像に関するテキストのみで、alt属性のHTMLソースコードは記述する必要があります。具体的な記述方法は次のとおりです。

テキスト部分は空欄にしてHTMLのソースコードのみ記述してください。空のalt属性としてHTMLのソースコードだけを記述することで、重要な要素ではないことを表明できます。

alt属性を記述する際の注意点

alt属性の記述に際して注意したいのが次の点です。

SEO対策にalt属性の情報は必須ですが、不自然な記述をすると検索エンジンにスパムと認識される可能性もあります。

画像と無関係な内容を記述しない

alt属性のテキストには、画像と無関係な文言やキーワードを記述してはいけません。ユーザーや検索エンジンに対して誤った情報を伝える原因になります。

コンテンツとは直接的に関係のないイメージ画像であれば、alt属性は空欄で設定してください。

キーワードを羅列しない

alt属性にはキーワードを設定しますが、不自然に羅列したり画像と無関係なキーワードを書き並べたりしてはいけません。Googleは検索キーワードの羅列は避けるべきと明言しています。SEO効果を期待してキーワードを詰め込むことは控えてください。

極端に長い記述をしない

不自然に長いテキストや本文をコピー＆ペーストする記述の仕方を、Googleは好ましくないとしています。

何文字まで記述できるといった具体的なルールは設けられていませんが、意味が伝わる範囲における必要最小限の語句で、簡潔にまとめることが大切です。

画像をリンクとして使用する場合

画像をリンクとして使用する場合は、リンク先のページについてGoogleが理解しやすくなるように、alt属性のテキストに転送先の情報を記述してください。

モバイルサイトでも必ず設定する

alt属性はモバイルサイトでも必ず設定してください。スマートフォン向けサイトの重要性の高まりは加速の一途です。

また、alt属性は画像検索からのアクセスを増やすための唯一の方法です。alt画像の設定がされていないWEBサイトでは、アクセス数の減少につながる可能性もあります。

空白の設定をする

コンテンツに対して意味を持たない画像ではalt=””と記述します。

意味がない画像だからといってHTMLソースコードを記述しないのは誤りです。また無関係な語句を記述することも避けてください。

WordPressでalt属性を記述する方法

WordPressの場合、画像をアップロードすると「代替テキスト」という項目が表示されます。代替テキスト欄に画像の内容を具体的に記述してください。

alt属性の記述内容を確認する方法

すでに記述済みのalt属性の設定内容を調べる方法は2とおりあります。

Googleの検証機能

Googleの検証機能なら、ツールをインストールすることなくalt属性の内容を調べることができます。

当該WEBページの任意の箇所でマウスを右クリックして「検証」項目を表示し、ページのソースコードを表示させてください。ソースコードから画像に関するalt属性の記述の有無やその内容を確認できます。

Googleの拡張機能

Alt＆Meta viewerというGoogleの拡張機能にある無料のツールなら、クリックするだけでalt属性の記述内容を簡単に調べることができます。拡張機能のダウンロードが必要ですが、利便性が高い方法です。

対象となるWEBサイトの画面でAlt＆Meta vieweのアイコン、「画像のALT表示」の順でクリックしてください。

サイト内の画像に関するalt属性の設定内容が表示され、記述の有無や内容を確認できます。

まとめ

alt属性はWEBサイトの画像情報をユーザーや検索エンジンに伝えるHTMLタグです。画像の情報を検索エンジンに伝えることは画像検索で上位表示させるために有益であり、画像検索からの流入も期待できることから、WEBサイトの画像に欠かせません。Googleが推奨する画像最適化の手法の1つでもあります。ユーザビリティやアクセシビリティを高め、検索エンジンに画像情報を伝達することで検索エンジン最適化が期待できます。しかし、alt属性を効果的に使用するためには、守るべきいくつかのルールがあります。SEOでの効果を狙ってキーワードを羅列したり、画像と関係のない語句や文章を設定したりといった行為はユーザビリティを低下させるほか、検索エンジンにスパムと誤認される可能性があるので注意が必要です。また、テキスト部分を記述しない場合でも、HTMLのソースコードは忘れず記述しなくてはなりません。alt属性を適切に設定すれば画像からの検索流入を増加させ、コンテンツの評価を向上させるためにも有効です。ユーザーと検索エンジンのどちらも理解しやすいalt属性の設定をすることで、WEBサイトを大きく成長させてください。

 

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。