Column

コラム

alt属性の適切な書き方とコツ!【初心者必見】

2021/05/18
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属性を設定することで、クローラーが画像の内容を適切に理解し、画像検索に表示されるようになります。

そして、適切な書き方をすれば画像検索からホームページへの流入を見込むことができ、通常の検索でも上位を狙うことができるようになります。

alt属性を設定しなければ、こういった検索結果にも掲載されることはありません。
機会損失を防ぐためにも、画像やイラストなどの内容に沿った適切なテキストを入力することが大切です。

alt属性の書き方

先程も触れたように、alt属性はSEOに影響する重要な要素です。

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

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

写真やイラストの場合

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

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

眠っている柴犬

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

好ましい例 <alt="フローリングの上で眠っている柴犬"/>

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

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

画像化した文字の場合

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

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

装飾画像の場合

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

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

alt属性を書く際の注意点

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

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

画像の内容を詳しく説明しようと長文になってしまうと、どうしてもalt属性に含まれるキーワードが増えがちです。

また、キーワードや単語を入れ過ぎはかえって検索エンジンから悪い評価を受けてしまいます。

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

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

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

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

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

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

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

極端に長いテキストは、検索エンジンが誤って認識したり、ユーザーが勘違いをしたりしてしまう可能性があります。

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

まとめ

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

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

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

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

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

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

会社概要

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

無料相談・無料見積り受付中!

1,000社以上の制作実績があり、様々な業種のお客様の結果を出してきました。
集客・求人に結びつくホームページを制作します!

0120-983-828

9:00~18:00(土日祝日は除く)