alt属性を適切な書き方で設定することは、画像の内容をGoogleなどの検索エンジンに正確に理解してもらうために重要な対策です。
また、音声読み上げ機能を利用するユーザーにも画像の情報を正しく伝えられるため、WEBアクセシビリティの向上にもつながります。
本記事では、「alt属性とは何か」「なぜ設置が必要なのか」を解説したうえで、SEOに効果的な書き方と具体例を紹介します。
目次
alt属性とは
alt（オルト）属性とは、WEBページの画像ファイルが、通信障害など何らかの理由で表示できないときに、画像の代わりに表示されるテキスト情報です。
「altタグ」や「代替テキスト」と呼ばれることもあります。
また、alt属性は単なる画像の代わりではなく、WEBサイトのSEOにも効果をもたらします。
そのため、SEOに適したalt属性を設定するには、まず基礎知識を理解することが重要です。
alt属性は画像の内容を説明するテキスト情報
alt属性は、画像が表示されないときやスクリーンリーダーを使用したときに、画像の内容を代替するために使用されます。
スクリーンリーダーとは、画面上のテキストを音声に変換して読み上げるツールです。
alt属性は、画像の表示に関する要素「img要素」において、以下のようにHTMLのソースコードを記述します。
<img src=”画像URL”alt=”画像の内容を説明する文章”>
alt属性とtitle属性の違い
alt属性と似た属性に、title属性があります。
title属性は、画像やテキストなどの要素に補足情報を追加するための属性です。
title属性を設定した画像やテキストにカーソルを合わせると、ツールチップとして補足情報が表示されるため、ユーザーにわかりやすく情報を伝えられます。
ツールチップとは、マウスなどでカーソルを重ね合わせたときに表示される注釈や補足説明です。
一方、alt属性は画像に設定できる属性で、音声読み上げ機能にも対応しています。
ただし、画像が正常に表示されている場合や、読み上げ機能を使用しない場合は、設定したテキストは表示されません。
alt属性設定対象となる画像の種類
alt属性を設定できる画像ファイルには、主に以下の種類があります。
- 写真
- 画像テキスト
- アイコン画像
- グラフ画像
画像テキストとは、画像内に埋め込まれた文字のことで、デザイン性を高めたいときに効果的です。
しかし、画像テキストは検索エンジンに画像として認識されてしまいます。
そのため、alt属性を設定していない場合、画像テキストの内容はスクリーンリーダーで読み上げられません。
alt属性が未設定の場合、アイコン画像やグラフ画像も同様の理由で、ユーザーに正しい情報を伝えられなくなる可能性があります。
画像にalt属性の設定が必要な理由
alt属性を設定する主な理由は、次の2つに分けられます。
- ユーザーの利便性を高めるため
- 検索エンジンから適切に評価してもらうため
ユーザーにとって利用しやすいWEBサイトを実現し、検索エンジンに正しく評価されるためには、alt属性の設定は重要です。
ここでは、それぞれの理由をさらに詳しく解説していきます。
ユーザー利便性の向上
画像が表示されない場合でも内容を正しく伝えられる
alt属性を設定するメリットは、通信環境の不具合などで画像が表示されない場合でも、ユーザーにコンテンツの内容を正しく伝えられることです。
特に、画像が重要な役割を持つコンテンツでは、画像が表示されない場合はユーザーが内容を理解しにくくなる可能性があります。
alt属性を適切に設定しておけば、画像が表示されない状況でも、テキスト情報として補完できるため、ユーザーの利便性が向上します。
ユーザー利便性の向上
音声読み上げ時も画像を認識してもらえる
alt属性を設定しておくと、スクリーンリーダーなどの音声読み上げ機能を利用する視覚障害のあるユーザーにも、画像を認識してもらえます。
WEBページを音声で読み上げる際、alt属性を設置していないと画像は認識されません。
スクリーンリーダーでは、ファイル名がそのまま読み上げられてしまうこともあるため、alt属性の未設定はユーザーを混乱させる原因の一つです。
そのため、コンテンツの構成によっては、ユーザーが内容を理解しにくくなることがあります。
コンテンツのWEBアクセシビリティを向上させ、すべてのユーザーにとって利用しやすいWEBサイトを実現するためにも、alt属性の設定は欠かせません。
SEOへの効果
検索エンジンにコンテンツを正しく評価してもらえる
alt属性の設定は、GoogleやYahoo!などの検索エンジンのクローラーにコンテンツを正しく評価してもらうためにも重要です。
検索エンジンは、画像の内容を直接理解することが難しく、alt属性が記述されていない画像は適切に評価されにくい傾向があります。
alt属性を設定することで、検索エンジンのクローラーが画像の内容を把握しやすくなり、コンテンツの正しい評価につながります。
SEOへの効果
画像検索にコンテンツが表示される
適切にalt属性を記述することで、画像検索の結果に表示されやすくなり、上位表示を狙える可能性があります。
alt属性として設定したテキスト情報は、検索エンジンの画像検索アルゴリズムで活用されるためです。
alt属性を設定したからといって、すぐに検索順位に反映されるわけではありませんが、適切なalt属性を記述することで、画像検索からのユーザー流入増加を期待できます。
効果的なalt属性の書き方
alt属性の設定はユーザーの利便性を高め、SEOに効果的な手法です。
しかし、正しい書き方をしなければ、期待する効果を得られないことがあります。
より効果的なalt属性を設定するため、書き方のポイントを解説します。
具体的かつ簡潔に記述する
alt属性は、検索エンジンが理解しやすいように、具体的かつ簡潔に記述することが重要です。
たとえば、山の画像に「綺麗な山」と記述した場合、テキスト情報だけでは山がどのように綺麗なのかがわかりません。
そこで、alt属性に「紅葉で赤く染まる山」と記述すると、画像がなくても山の様子が伝わります。
ただし、「鮮やかな紅葉が山全体を包み込み、燃え立つような深紅に染まった風景」など冗長表現が多い文章は、検索エンジンが内容を理解しにくくなるので注意しましょう。
スクリーンリーダーで読み上げても違和感のない文章にする
alt属性には、音声読み上げ機能を使用した際、視覚障害者などが内容を理解しやすくするメリットがあります。
そのため、読み上げたときに違和感がないように、alt属性を記述することが大切です。
たとえば、「です・ます調」で記載されているコンテンツの場合、画像のalt属性を「だ・である調」で記述すると、違和感を覚えることがあります。
alt属性を記述する際は、読み上げたときに自然に聞こえるように調節しましょう。
対策キーワードを入れすぎない
alt属性はSEOにおいて重要な役割を果たしますが、過剰に対策キーワードを詰め込みすぎるのは避けるべきです。
文脈に合わないタイミングでキーワードを無理に入れたり、羅列したりすると、検索エンジンにスパム行為と認識される可能性があります。
alt属性を記述する際はキーワードを乱用せず、画像の内容を正確に伝えることを優先しましょう。
ページ内の文章をコピペすることは避ける
画像一つひとつに、alt属性を記述するのは手間がかかる作業です。
しかし、WEBページ内の文章をコピー＆ペーストで使用するのはリスクがあります。
検索エンジンがコピペと判断した場合、WEBページが検索結果に表示されなくなったり、検索順位が大幅に下がったりするなど、ペナルティを受ける可能性があります。
alt属性に記述したテキストも、コンテンツの一部と認識されるため、他の文章をそのままコピペするのではなく、alt属性用に新たに文章を考えて記述しましょう。
キャプションと内容が重複しないようにする
alt属性を記述する際は、キャプションと内容が被らないように設定する必要があります。
キャプションとは、写真やイラスト、映像、音声に補足される説明文です。あくまで画像やイラストに付随する文章であり、画像の代替にはなりません。
alt属性とキャプションの内容が重複してしまうと、画像が表示されない状況では同じ内容の文章が二重に表示されることになります。
装飾目的の画像は空白でもよい
alt属性を設定することで、ユーザーの利便性向上やSEOへの効果が期待できます。
しかし、すべての画像にalt属性を設定する必要はありません。
たとえば、装飾目的で挿入する画像には、大きな意味がないこともあると思います。
コンテンツの内容に影響を与えない装飾目的の画像は、alt属性は空白にしておくことも可能です。
画像がリンクになっている場合は必ず設定する
リンク画像は、alt属性がアンカーテキストになるため、必ず設定する必要があります。
アンカーテキストとは、リンク先の内容を表示するための文章です。
alt属性をリンク画像に設定すると、アンカーテキストの代替となります。
リンク画像にalt属性が設定されていないと、リンク先のWEBページの内容を検索エンジンが把握しにくくなることがあります。
SEOの観点からも、画像がリンクになっている場合はalt属性を設定しましょう。
alt属性の具体的な書き方事例
alt属性を記述する際のポイントを押さえたら、次に具体的な書き方を見ていきましょう。
ここでは、よく使われるコンテンツの画像を例に、書き方を紹介します。
人物や風景の写真
人物や風景などの写真では、ソースコードに画像を見なくても情景が思い浮かべられるようなテキストをalt属性として記述します。
<img src=”画像URL”alt=”夕日が沈む海岸を走る犬”>
ただし、冗長表現が多いと検索エンジンが内容を把握しにくくなるため、できるだけ簡潔にまとめるとよいでしょう。
地図の画像
WEBサイトに会社案内の地図を載せる場合、画像には以下のように最寄駅から目的地までの経路を簡単に記述します。
<<img src=”画像URL”alt=”JR浜松町駅から本社までの地図です。北口から東に向かって徒歩2分の場所に位置します。”>
タイトル・見出し・リンク画像
タイトルや見出し、リンク画像にはalt属性を設置するとSEOとして効果的です。
リンク画像では、リンク先のページが把握できるような文章にしましょう。
たとえば、リンク先が資料請求ページの場合は、以下のようにalt属性の値を記述します。
<img src=”画像URL”alt=”資料請求はこちら”>
グラフ画像
グラフ画像の場合はグラフがなくても内容がわかるように、説明文をキャプションやテキストで準備し、alt属性の記述は最低限になるようにします。
例として、顧客満足度に関する円グラフのalt属性の書き方を以下に示します。
<img src=”画像URL”alt=”2024年度の顧客満足度”>
<p>2024年度の顧客満足度は大変満足と満足が95％を占めました。</p>
画像テキスト
文字情報を含む画像テキストでは、画像内の文章を記述するのが一般的です。
たとえば、「事業内容」と記載された画像であれば、以下のように記述します。
<img src=”画像URL”alt=”事業内容”>
装飾目的の画像
コンテンツ内で意味を持たない装飾目的の画像では、alt属性は以下のように値を空白として設定することも可能です。
<img src=”画像URL”alt=””>
設置したalt属性を確認する方法
alt属性を記述したら、正しく設置されているか確認することが大切です。
Google Chromeの以下の2つの機能を活用すれば、無料で簡単に確認できます。
- 検証機能
- 拡張機能
それぞれの確認方法の手順を詳しく解説します。
Google Chromeの検証機能で確認する
Google Chromeの検証機能は、WEBページのHTMLを確認できる機能です。
設定したalt属性は、以下の手順で検証機能を使って確認できます。
- Google Chromeで確認したい画像を掲載したページを開く
- alt属性を設定した画像を右クリックして「検証」を選択する
- 右側に表示される検証機能「Dev Tools」のソースコードでalt属性を確認する
Google Chromeの拡張機能で確認する
Google Chromeの拡張機能「Alt & Meta viewer」は、WEBページの画像に記述されたalt属性やtitle属性などを表示できるツールです。
「Alt & Meta viewer」を使う場合は、以下の手順で確認します。
- chromeウェブストアから「Alt & Meta viewer」を拡張機能に追加する
- ブラウザ右上の「拡張機能」ボタンをクリックする
- 「拡張機能を管理」を選択し、追加した機能をオンにする
- 確認したい画像のあるページを開く
- ブラウザ右上の「拡張機能」から「Alt & Meta viewer」を選択する
- 「画像のAlt表示」を選択し、alt属性のテキストを確認する
alt属性の書き方にお悩みの方はハエモリ企画へ
alt属性の設定は、ユーザーの利便性を高めるだけでなく、検索エンジンから適切に評価してもらうためにも非常に重要な役割を果たします。
ただし、alt属性の書き方を間違えると、検索エンジンに正しく評価してもらえないばかりか、ペナルティを受けるリスクもあります。
適切にalt属性を設定するためには、SEOのノウハウを持つ専門のSEO業者に、コンサルティングを依頼するのも一つの方法です。
alt属を効果的に設定し、ユーザー満足度や集客効果を向上させたい方は、SEO施策の専門家であるハエモリ企画にご相談ください。
WEBマーケティングの豊富な実績をもとに、コンテンツに最適なSEOコンサルティングサービスを提供いたします。
English
Japanese