COLUMN
コラム

alt属性とは?

alt属性とは

alt属性は、ページに画像を表示するために必要となるHTMLタグの要素の1つです。ホームページを作成する上で知っておきたい項目のうちの1つでもあります。

また、検索エンジンが画像を認識する際にalt属性が必要なため、alt属性を適切に設定しておくことが重要になります。

そこで今回は、alt属性とは何なのか、必要性や書き方、注意点をまとめてみました。

alt属性とは?

alt属性とは、ホームページに表示する画像(写真・イラストなど)の内容を説明するためのもので、検索エンジンに認識してもらうために設定する代替テキストのことを意味しています。

また、「代替テキスト」「altテキスト」「altタグ」とも呼ばれています。属性とは、HTMLの画像埋め込み要素のことを差し、コンテンツの含まれている画像にどのような意味があるかをユーザーや検索エンジンに伝える役割をもっています。

なぜalt属性の設定が必要なのか

画像や動画などの非テキストコンテンツに対してalt属性を設定する理由としては、主に次の3つがあります。

画像が表示されなかった場合に、画像の代わりにテキストが表示される

ホームページ内にある画像がネットワーク上の問題などの問題で表示されなかった場合にalt属性が表示されます。

alt属性が設定されていることにより、画像が読み込めなかった場合にもユーザはどのような内容の画像なのかを理解することができます。

補助テキストとして使用される

目の不自由の方はパソコンを利用する際にスクリーンリーダーというソフトウェアや音声ブラウザを利用し、読み上げられた音声でコンテンツの情報を理解します。

これらは、テキストを読み上げることはできても、どのような画像であるかを認識できないため、音声で画像の内容を伝えることはできません。
そういった場合に、補助をする働きを持つものがalt属性です。

スクリーンリーダーや音声ブラウザは、画像の内容をユーザーに伝えるためにalt属性を読み上げてくれます。

そのためユーザーが画像や動画の内容を理解できるテキストをalt属性に登録することが重要になります。

検索エンジンに画像の情報を伝える

検索エンジンも画像だけでは、画像の内容を正確に理解することはできません。

画像にalt属性を設定することで、クローラーが画像の内容を理解し、画像検索などに表示されるようになります。そうすることで画像検索からの流入を期待することができます。
そのため、画像の内容に合わせた意味のキーワードを入力することが大切です。

ユーザーに分かりやすいホームページを作成ようにクローラーにとっても分かりやすいホームページにすることでSEO強化に繋がるともいえるでしょう。

alt属性はSEOに効果的なのか?

SEO

スクリーンリーダーや音声ブラウザと同様に、検索エンジンも画像の内容を正確に理解することができません。

しかし、画像にalt属性を設定することで、クローラーが画像の内容を適切に理解し、画像検索などに表示されるようになります。

そして、適切な書き方をすれば画像検索からホームページへの流入を見込むことができ、通常の検索でも上位を狙うことができるようになります。
そのためは画像の内容に沿った適切なテキストを入力することが大切です。

ユーザーに分かりやすいホームページを作成するように検索エンジンにも分かりやすいホームページにすることで、SEO強化に繋がるともいえるでしょう。

alt属性の書き方

alt属性はSEOに影響する重要な要素です。alt属性を適切に記述すればSEOに良い効果をもたらしますが、alt属性を不適当に記述してしまうとSEOに悪影響を与える可能性もあります。

では、具体的にどういったalt属性を設定すれば良いかを紹介します。
基本的には、次の3パターンに分けることができます。

写真やイラストの場合

写真やイラストなどの画像に対して、どのような内容の画像、イラストなのかを具体的に文章でも分かるようなalt属性を書くことが必要です。

具体的な例として下の写真を参考に適切なalt属性を考えてみます。

眠っている柴犬

好ましくない例 <alt="犬、昼寝、フローリング、家"/>

好ましい例 <alt="眠っている柴犬"/>

上記の2つはどちらもどういった画像なのか理解する事はできますが、「好ましい例」の方が具体的にどういう状況なのか想像をしやすいと思います。

また、alt属性は画像を説明できる簡潔なテキストを設定したほうが好ましいといわれています。

画像化した文字の場合

画像内にテキストが明記されていた場合、画像と同じテキストをalt属性に書くことが適切です。

画像の目的や意味をユーザーが理解できるように分かりやすいテキストを設定しましょう。

装飾画像の場合

ホームページのデザインの一部でラインマーカーや背景画像などの装飾目的で使われる画像を使用することがあります。

コンテンツとして特に意味をもたない場合は、alt属性を空欄にします。

alt属性を書く際の注意点

alt属性を記述するときに注意するポイントを3つ紹介します。

キーワードを詰め込みすぎない

詳しく画像の内容を説明しようとし過ぎて長文になると、どうしてもalt属性に含まれるキーワードが増えがちです。キーワードや単語、文章を入れすぎてしまうと、かえって検索エンジンから悪い評価を受けてしまいます。

キーワードを絞って、シンプルで分かりやすい記述を心掛けましょう。

画像に合ったテキストで記述する

テキストを入力する時には画像と関係ある内容を設定することが大切です。

画像と関係ないテキストを入れてしまうと何の画像があるのか、表示されるべきだったのかが全く分からず、ユーザーに伝わりにくいホームページになってしまいます。

ユーザーの混乱を避けるためにも画像の目的や意味を適切で分かりやすいテキストに設定することを心掛けましょう。

極端に長いテキストは避ける

検索エンジンやユーザーから画像を正しく認識、理解してもらうために、シンプルで分かりやすい画像の説明が好まれます。

詳しく画像の内容を説明しようとし過ぎて長文になると、どうしてもalt属性に含まれるテキストが増えがちになり、検索エンジンが誤って認識したり、ユーザーが勘違いしてしまう可能性があります。

画像の内容を具体的に端的に説明すること重要になるのです。

まとめ

alt属性は、ページに画像を表示するために必要となるHTMLタグの要素の1つです。

また、ユーザーや検索エンジンが画像を認識する際にalt属性が必要なため、適切なテキストを設定しておくことが重要になります。

ユーザーや検索エンジンに画像の目的や意味を正確に伝えるために、シンプルで分かりやすいテキストの設定を心掛けましょう。

株式会社TLマーケティング

株式会社ティーエルマーケティング

SEO対策に必要な機能や設定がされたホームページを制作しており、多種多様な業種のホームページ制作実績が1000社以上あります。
SEO検定1級やライティング検定1級、ウェブ解析士などの資格取得者が在籍し、集客・求人に関する課題を解決しています。

会社概要

この記事のタイトルとURLをコピーする