- 公開日： 最終更新日：
alt属性とは？訪問者のメリットやSEO効果、記述法、確認法を解説
alt属性とは、画像の説明を記述するテキストのことを言います。
画像にalt属性を設定することで、訪問者がホームページを閲覧しているときに通信環境が悪くなると画像ではなくalt属性が表示されるようになったり、Googleにその画像が何かを明確に伝えることができます。
当ページでは、alt属性とは何かや、訪問者のメリット、SEO効果、記述法、alt属性に書くテキストのコツ、確認法を解説します。
目次
alt属性とは
alt属性とは何かを解説します。
alt属性とは
alt属性は、オルト属性と読み、htmlに記述されるタグのことで、altと省略されたり代替テキストと呼ばれることがあります。
alt属性を画像に入れることで、訪問者の通信環境が悪く画像が表示できなかった場合に代替としてalt属性が表示されたり、Googleは画像を解析することはできますが、完ぺきではないので、alt属性を参考にしてどんな画像なのかを判断しています。
つまり、alt属性は訪問者とGoogleの両方に重要なタグと言えます。
title属性との違い
alt属性と似た言葉にtitle属性と呼ばれるタグがあり、alt属性とtitle属性は、言葉は似ていますが、まったく異なる役割があります。
title属性とは、画像を見ている訪問者にその画像の補足説明が行えるタグになります。
上記がtitle属性を入れたときの見栄えになり、画像をマウスオーバーすると、「成果にこだわるホームページを制作」という吹き出しが表示され、訪問者がその画像が何かを明確に知ることができます。
もちろん、吹き出し内の文言は自由に設定することができ、title属性は訪問者に深くホームページの内容を理解してもらうのに役立ちます。
alt属性を設定した訪問者のメリット
画像にalt属性を設定したときの訪問者のメリットを解説します。
画像が表示されない場合にalt属性が表示される
画像にalt属性を設定することで、画像が表示されない場合にalt属性が表示されるようになります。
画像が表示されない場合というのは、主にスマートフォンで通信環境が悪い場所でホームページを見ているときに、画像は容量が大きいので、ブラウザで表示されない場合になります。
画像を見ないと、その下にあるテキストの意味が分かりづらい場合に高い効果を発揮して、訪問者がより深くホームページの内容を理解できるようになります。
音声読み上げソフトを利用しているとalt属性が読まれる
視覚障害や高齢者の方は、ホームページを閲覧する際に、音声読み上げソフトを利用していることがあります。
音声読み上げソフトは、テキストは読み上げてくれますが、画像の内容を読み上げてくれることはないので、そういった場合に、alt属性が役立ちます。
alt属性が入った画像は、alt属性が読み上げられるようになるので、視覚障害や高齢者の方であってもホームページの内容を十分に理解することができます。
alt属性のSEO効果
alt属性のSEO効果を解説します。
検索順位が高くなる
alt属性は、画像の内容をGoogleに伝える役割があるので、alt属性を設定することで、そのページが、よりページタイトルに対して詳しいページへと成長します。
Googleは、ページタイトルに対して詳しいページの検索順位を高めているため、適切に設定されたalt属性はSEOに必須と言っても良いでしょう。
画像SEOの効果が高まる
画像SEOとは、Googleの画像検索で上位表示を狙う対策のことを言い、alt属性を適切に設定することで、狙ったキーワードで画像が上位表示されるようになります。
Googleの画像検索からの流入数は、決して低いとは言い難いものになり、BtoBやBtoCはもちろん、特にネットショップでは適切にalt属性を記述することで、より多くの見込み顧客を集客できるようになります。
alt属性の記述法
alt属性の記述法を解説します。
HTMLタグで記述
HTMLタグにalt属性を記述する方法は以下です。
<img src="画像のURL" alt=”画像の説明“>
画像のURLに記述ミスがあると、ブラウザでホームページを見たときに画像が表示されていないのですぐに気が付きますが、alt属性はブラウザでは確認ができないので、記述した後に見直すことをおすすめします。
WordPressで記述
WordPressでホームページを制作した場合の記述法を紹介します。
WordPressに画像をアップロードしたら、右に代替テキストの入力欄が表示され、そこにalt属性を記述します。
1枚の画像を複数ページで利用する場合は、alt属性は1枚の画像につき1つになるので、似た画像であったとしても、ページごとに画像のアップロードを行い、それぞれのページで最適なalt属性を入力しましょう。
alt属性に書くテキストのコツ
alt属性に書くテキストのコツを解説します。
画像の説明文を詳しく書く
alt属性には画像の説明文以外は不要です。
各ページで上位表示を狙っているキーワードがあると思いますが、そのキーワードも利用する必要はなく、画像の説明文をできる限り短い文章でテキスト化するようにしましょう。
テキスト化する際のコツは、画像だけを見たときに説明文になっているかどうかです。
例えば、上記写真のalt属性は、「犬」としてはならず、もっと詳しく「砂浜で遊ぶゴールデン・レトリバーの写真」や「散歩中に嬉しくてビーチで飛び跳ねる愛犬のゴールデン・レトリバーの太郎の写真」というように、具体的で分かりやすいalt属性を付けることがコツになります。
具体的で分かりやすいalt属性であれば、訪問者はもちろん、Googleもより理解しやすい画像になるので、ホームページのコンバージョン数やSEO効果に良い影響を与えます。
装飾画像にはalt属性を書かない
ホームページで利用しているすべての画像にalt属性は不要です。
例えば、上記の画像にあるページ上部に戻るボタンなどは装飾画像に当てはまるのですが、装飾を目的とした画像にalt属性を入れる必要はありません。
何が装飾になるかの判断ですが、音声読み上げソフトをイメージすると分かりやすく、音声読み上げソフトで読み上げが不要な画像にはalt属性を入れない方が良いでしょう。
入れてしまうと、SEOにマイナス影響はありませんが、音声読み上げソフトを利用している訪問者は、意味が分からないページと認識してしまう恐れがあるので、コンバージョン率の低下を招く恐れがあります。
alt属性にキーワードを詰め込まない
よくやってしまう事例として、alt属性にキーワードを詰め込むケースがありますが、これはキーワードスタッフィングと呼ばれるSEOスパム行為です。
alt属性にキーワードを無理やり詰め込んでしまうと、Googleにバレた段階で、画像だけではなく該当ページも大きくSEO効果を落としてしまうので、絶対に辞めましょう。
本文に関連した画像やalt属性であれば、高いSEO効果を得ることができるので、Webマスターはalt属性にキーワードを詰め込む必要はないと認識しましょう。
alt属性の確認法
alt属性を確認する方法を解説します。
ソースコードから確認する法
alt属性を確認したいページのソースコードを開きましょう。
ソースコードを開いて、キーボードのCtrl＋Fを叩くとブラウザ検索ができるので、そこに「alt」と入力すれば、ソースコードのaltと記述された箇所に色が付くので、そこからalt属性を確認することができます。
Google Chromeの拡張機能を使った確認法
Google Chromeに無料のAlt＆Meta viewerという拡張機能があります。
Alt＆Meta viewerを有効化すると、alt属性と画像サイズを確認することができるので、自社サイトだけではなく、ライバルサイトの確認も効率的に行えます。
alt属性のまとめ
alt属性とは何かを解説しました。
alt属性を設定することで、訪問者対策としてホームページのコンバージョン率、Google対策としてSEO効果の向上を実現することができます。
alt属性って何？やalt属性って必要？とお思いの方の参考になれば幸いです。
