Webページにおける画像のalt属性について具体的に理解していない方もいるはずです。
単なる画像のタグだと考えている方も中にはいますが、実際にはSEO対策として重要な役割を担っています。
不適切なalt属性を設定すればSEO評価が下がる可能性もあります。
そこで今回は、alt属性についてお伝えすると共に、メリットや効果的な書き方、設定のポイントなどを解説していきます。
画像認識AIを活用する利点についても解説していくので、Webサイトの評価を上げて上位表示を狙っている方は、ぜひ参考にしてみてください。
alt属性の役割
まずは、alt属性とは何なのかを解説していきます。
alt属性とは
Web上で画像が表示できない時に、画像の代わりとして表示されるテキストを指定する際に活用されるのがalt属性です。
検索エンジンは、Web上に添付されている画像内容を把握できません。
そのため、alt属性を活用して「何が写っているのか」「写っているものが何をしているのか」などの情報を検索エンジンに伝えるため、alt属性と呼ばれるタグをつけます。
alt属性はHTMLタグなので通常はユーザーが目にすることはありません。
しかし、以下のような場合に必要となります。
・Webの読み込みが遅い時に画像代わりにテキストが表示される
・音声読み上げ機能を使う際に、alt属性が読み上げられる
・画像をリンクにした際にアンカーリンクテキストとなる
・検索エンジンのクローラーにどういった画像なのか伝えられる
title属性との違い
alt属性と似ているものとしてtitle属性があります。
大きな違いとしては「設定対象」です。
alt属性は、画像そのものを表現するため、画像のみに設定できます。
しかし、title属性は画像に補足を加えることが役割です。
そのため、画像以外にもテキストなど、全ての要素に設定できる点が特徴です。
実際のWebページ上では、カーソルを対象物にあてるとコメントチップと呼ばれる吹き出しが表示されます。
この吹き出しに記載されている画像の補足情報がtitle属性によって生み出されるのです。
title属性に関しては、必ず記述が必要なタグではありません。
画像に関して補足で説明したい内容があれば有効ですが、入れ過ぎには注意しましょう。
入れ過ぎてしまうと、ユーザーがカーソルを動かすたびに吹き出しが出てくるので、Webサイトが見にくくなってしまいます。
ユーザー離れを引き起こす要因にもなり得るので気を付けましょう。
alt属性のSEO効果
alt属性によって得られるSEO効果は、検索エンジンのクローラーに画像内容を伝えられる点です。
本来、クローラーはテキストの内容のみしか理解できません。
しかし、alt属性を記述すれば画像内容をクローラーに伝えられるので、画像内容を理解できます。
そのため、alt属性に画像内容のキーワードを設定することで、画像検索で上位表示を狙えるようになるのです。
検索結果画面で検索順位を上げるという意味では、alt属性には直接的なSEO効果はありません。
しかし、画像検索で上位表示できればSEOにもいい影響を与える可能性があります。
検索エンジンからの評価をアップさせたいのであれば、alt属性の記述を検討してみてください。
alt属性を設定するメリット
ここからは、alt属性を設定することで得られるメリットを解説していきます。
情報を提供する側、ユーザー側それぞれに利点があるので、その内容を理解するために役立ててください。
通信状況が悪い時でも内容を理解しやすい
環境によっては通信状況が悪い場合もあります。
その際、Webページ上に画像があったとしても、表示できないので内容を理解できません。
しかし、alt属性を設定していれば画像部分に設定した内容がテキストによって表示されるので、ページの内容を理解するために役立ちます。
画像がなければ伝わらない情報や意図をユーザーは把握できるので、通信状況が悪い時でも提供する側はユーザビリティ向上を狙えるようになります。
視覚障害のあるユーザーへの配慮
視覚障害を持っているユーザーは、スクリーンリーダーといった支援技術を活用してWebページを閲覧しています。
alt属性が適切に設定されていれば、画像内容が音声によって読み上げられるので、視覚に頼ることなく情報が得られるようになります。
もし、alt属性が未設定であれば、画像情報が全く伝わりません。
意味のない内容が設定されていれば、誤解を招く可能性もあります。
しかし、最適化したalt属性が記述されていれば、欲しい情報を手に入れることが可能です。
提供側は、満足のいく体験を幅広いユーザーに提供できるようになります。
alt属性を設定すれば、誰もが平等にWebサイトを利用できます。
alt属性によってアクセシビリティが向上すれば、検索エンジンが重視しているユーザビリティやユーザー体験にも直結するため、SEO評価向上が期待でき、尚且つ幅広いユーザー層の獲得に役立ちます。
alt属性の書き方
SEOに強いWebサイトを作るためにも、正しい記述のやり方を理解しておきましょう。
ここからは、alt属性の書き方やポイントをご紹介していきます。
記述のやり方
alt属性を書く際には、ユーザーだけではなく検索エンジンにも分かりやすく伝える必要があるため、画像内容や意味、役割を適切に表現しなければいけません。
記述方法としては以下の通りです。
<img src=”画像ファイル名” alt=”画像の説明”>
「alt=”画像の説明”」の部分がalt属性となります。
例えば、猫の画像にalt属性を記述する場合、「alt=”画像の説明”」の部分には「2匹並んで丸まって眠る猫」「座ってあくびをしている猫」など、画像の様子を細かく伝えるようにします。
設定のポイント
alt属性を書く際に注意すべきポイントをご紹介していきましょう。
簡潔に説明することが大切
alt属性では簡潔な説明が求められます。
回りくどい説明が表示されれば、ユーザーの離脱を促す可能性があります。
例えば、「白い猫の画像」でalt属性を設定する際には、「座っている白い猫」といったように、状況を簡潔に説明するのであれば問題ありません。
しかし、「毛色は基本的に白色だが足先やお腹部分に黒色の毛が混じっている猫が座っている」といったように長文で記載してしまうと、情報を詰め込み過ぎているのでわかりにくさを与えてしまいます。
見るのをやめてしまうユーザーも中にはいるので、ユーザビリティが損なわれてしまえば検索エンジンからの評価をダウンさせてしまう原因です。
短いフレーズやキーワードを使用して簡潔に説明するようにしましょう。
ただし、「画像」「バナー」「写真」といったフレーズは、SEO効果が得られにくいので避けるようにしてください。
ユーザーにも正しい情報が伝わらないので、魅力のないWebサイトだと判断されてしまいます。
キーワードの詰め込み過ぎに注意する
2つ目の注意点は、キーワードの詰め込み過ぎです。
ユーザーに画像内容を伝えるために有効なalt属性ですが、キーワードを適切に使用すればSEO対策にも良い影響を与えます。
例えば、カフェを運営している企業が自社のWebサイト上にカフェの写真を貼り付けたとします。
その場合、alt属性ではカフェの店名を含めるのであれば問題ありません。
しかし、「○○（お店の名前） 落ち着いて過ごせる コーヒー スイーツ 人気」などと多くの対策キーワードを羅列すると、画像内容が伝わりにくくなってしまいます。
alt属性を適切に設定したいのであれば、画像に合わせた必要最低限のキーワードを含めて記述するよう心掛けてください。
装飾が目的の画像には設置しない
背景画像といった装飾を目的としている画像には設置しなくても構いません。
装飾画像は、Webページのデザイン性を良くするだけではなく、記事を読みやすくする目的があります。
そのため、コンテンツとしての意味を持っていません。
ユーザーにとっては内容を理解する必要がなく、仮に記述しても音声読み上げ機能を活用しているユーザーにとっては邪魔になってしまう可能性があるので注意が必要です。
装飾が目的の画像を設置する際には、alt属性のHTMLソースコードは残しておくようにし、alt属性は記述せずに「alt=””」と空白のままにしておきましょう。
空のalt属性を設ければ、SEOとアクセシビリティの両方に配慮した設計が可能となります。
空白にすべきalt属性は以下の通りです。
・アイコン
・ラインや背景画像
・ユーザーにとって意味のない画像
・情報伝達を目的としていないデザイン要素
画像認識AIを活用してalt属性を自動生成
alt属性の内容は、自分で考えて設定していきますが、画像認識AIを活用して自動生成することも可能です。
大量の画像を取り扱っているWebサイトの場合、全て設定するには多くの労力や時間が必要です。
しかし、画像認識AIであれば効率的にalt属性の最適化が可能です。
一貫性のある高品質なalt属性を生成でき、他の国の言葉にも対応できます。
画像内の細部にまで認識が可能となっているので、適切なalt属性を設定することにつながるはずです。
ただし、中には不自然にキーワードが盛り込まれた情報が記述されるケースもあります。
そのため、画像認識AIを活用した際には必要に応じて人間によるレビューを実施して、微調整をすれば品質向上に役立ちます。
効率的に作業を進めたいのであれば、画像認識AIの活用を検討してみてください。
今回は、alt属性について解説してきました。
alt属性は、WebサイトのSEO効果を高めるために有効な手段です。
画像の内容を検索エンジンのクローラーに正確に伝えられるので、画像検索で上位表示を狙えるようになります。
検索エンジンからの評価を上げたいのであれば、alt属性を記述するようにしましょう。
ただし、キーワードを無意味に羅列するだけのalt属性やダラダラと長い文章を盛り込むなど、避けるべきポイントがあります。
ご紹介した内容を参考にして、alt属性の設定を進めてみてください。
また、画像認識AIを活用すればalt属性を自動生成できるので、効率的に作業を行えます。
パフォーマンス向上に役立ててみましょう。
