altタグ(alt属性)とは？タグの役割や使用方法を解説

altタグ(alt属性)とはHTML構文のimg要素内の属性の1つで、画像に設定するテキスト情報です。
こちらはWebコンテンツを作成する際に重要な属性になります。
altタグのことは知っていても、正しい設置方法やSEOとの関連性について知らない方もいるかと思います。
今回の記事ではそんなaltタグ(alt属性)について、概要やSEO対策に活かす方法、設置方法についてご紹介していきます。

altタグ(alt属性)とは

altタグ(alt属性)は「オルトタグ(オルト属性)」と呼びます。HTMLの属性として、imgタグ内にのみ記述することができます。
altタグはWebサイトに表示する画像の代替テキストや説明として用いられます。
画像が通常通り表示されている場合にはaltタグの内容が表示されることはありませんが、画像が表示されない場合に表示もしくは読み上げられることになります。

上記のような、画像が閲覧できない環境でも情報が正しく理解できるようにわかりやすく画像を表したテキストをaltタグに設定しておく必要があります。
Googleのクローラーもどのような画像か理解するためにaltタグを用いているため、正しくコンテンツの内容を伝えるためにもaltタグの設定が必要になります。
そういったことからGoogleの画像検索にもaltタグが用いられています。

altタグの重要性とSEO対策との関連性

画像の代替テキストとして用いられているaltタグですが、なぜaltタグの設定が必要とされていたりSEO対策やコンテンツの最適化として紹介されているのか、
altタグとSEO対策の関連性について解説していきます。

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

Webサイト内に設置した画像がなんらかの原因で表示されない場合にも、altタグを設定しておくことで代替テキストとしてその画像が何なのかをテキストで表示することができます。

そうすることで、サイトを閲覧したユーザーは画像が表示されなくてもどのような画像が表示するはずだったか知ることができます。

デザインされたサイトを作成する際に画像で文字を表現することが良くあるかと思います。
上記の例のようにaltタグに表示されるはずだった文言を設定しておくことで画像が上手く表示されない場合にもユーザーにどのような画像が設定されていたかを知らせることができます。

画像を見ることができない人も音声で内容を理解できる

視覚障がい者の方はPCを利用する際にスクリーンリーダーなどの音声読み上げソフトを利用し、読み上げられた音声でコンテンツを理解します。
スクリーンリーダーなどの音声読み上げソフトはテキストを読み上げることはできても、altの設定のない画像や動画などは基本的に読み上げることができません。

音声読み上げソフトの多くにはaltタグを読むことができる機能が備わっていますので、altタグを設定することで視覚に障がいのある方でもしっかりと情報を伝えることができます。

検索エンジンへ画像を理解させる

検索エンジンに画像だけで内容を正確に理解させることは現在ではまだ難しいとされています。検索エンジンは画像の前後のテキストとその画像に設定されているaltタグの内容から画像が何を表しているのがを理解します。

以上のことからaltタグを画像に設定することによりSEO対策の1つとなり、Googleの画像検索結果などに表示されるようになります。
そうすることで、新しい集客チャネルとなりサイトへの流入が見込めます。

altタグの設置方法

altタグは以下のように記述します。

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

上記のimgタグ内の「alt=”画像の説明”」という部分がaltタグになります。
上述致しましたが、altタグはimgタグ内にしか記述できません。

altタグ設置の際の注意点

altタグは簡単に設置することができますが、間違った設置方法をしてしまうとSEOの逆効果になってしまう可能性があるため、注意が必要です。
以下で注意が必要なポイントを紹介していきます。

キーワードを詰め込まない

altタグがSEO対策の一環だからといって、キーワードをたくさん詰め込むことは絶対にしないでください。
画像に関係ないキーワードを入れたり、キーワードの乱用や、長文をaltタグに設定すると検索エンジンからスパムとみなされる可能性があり、スパムと認定されてしまうとペナルティを受けてしまう可能性があります。

ペナルティを受けると、順位が下がる他、最悪の場合インデックス削除され、2度とインデックスしないこともあるため注意が必要です。

上記の画像を例に悪い設定方法と、良い設定方法をご紹介します。

悪い設定方法

alt="男の子 海 浮き輪 アヒル BBQ 家族 遊ぶ 旅行 夏 安い"

良い設定方法

alt="砂浜で遊ぶアヒルの浮き輪をつけた男の子"

関係のない言葉を入れない

画像と関係のないキーワードの設定は検索エンジンやサイトを閲覧するユーザーを混乱させてしまう可能性があるため、やめておきましょう。
画像に適したキーワードをaltタグに設定するようにしましょう。

意味を持たない画像には空のaltを設定する

altのキーワードはすべての画像に設定しなければいけないことはありません。
ロゴやページ内の装飾など意味を持たない画像には「alt=””」という空のaltタグを設定しておきましょう。

また、同じ画像で同じaltタグを設定したものをサイト内に複数設置することは問題ありません。

altタグ(alt属性)について | まとめ

今回の記事ではaltタグの概要や使い方、使用する際の注意点について解説してきました。

altタグは画像にしか設置できず、画像を言葉で表して適切に設定しましょう。
キーワードを盛り込み過ぎてしまったり関係のないキーワードを入れたりしてしまうと検索エンジンからスパムとみなされ、検索エンジンからペナルティを受けてサイトの順位が落ちてしまう可能性があるのでaltタグを設定する際には注意しましょう。

altタグは画像が表示されない際に表示される代替テキストとしての用途だけではなく、視覚障がい者の方がサイトを閲覧した際にも十分に情報を伝えるための手段としても用いられます。
もちろん、画像の最適化となりSEO対策の施策の1つとしても有効です。

altタグを設置する際には以上のことに注意し設置するのが良いと思います。

SEO対策をお考えの方がいらっしゃいましたら、下記のボタンより弊社にお気軽にお問い合わせください！

無料相談・お問い合わせはこちら