SEO対策に効果的なalt属性とは？その効果や書き方について詳しく解説

SEOにおいてalt属性は重要な役割を持っています。しかし、SEO対策を学んでいく上で「alt属性という言葉を聞いたことはあるけれど、詳しくは知らない」という方も多いのではないでしょうか。

 

そこで今回は、SEO対策におけるalt属性の役割と効果について解説していきます。

SEO対策におけるalt属性とは？

SEO対策におけるalt属性（オルト属性）とは、画像の内容を説明する代替テキストのことです。SEOの観点から見ると、alt属性は、検索エンジンにページを登録するための「クローラー」というロボットを手助けするのです。

 

さらに、画像が読み込めないときや、音声読み上げ機能を使うときにも役に立つ設定です。HTMLコードの内部に設定される情報なので、通常はユーザーに表示されません。

 

alt属性を設定することで、「どのような画像なのか」「画像に写っているものはどのような状況なのか」といった情報を付与できます。

 

alt属性の特徴は？

alt属性の特徴は、クローラーに画像の情報を伝えられるということです。ページの内容がより正確に認識されることでSEO効果も期待できます。しかし「本当にalt属性を設定するだけでSEO効果が出るの？」と思う方も多いでしょう。

 

結論から言うと、ただalt属性の設定をするだけで、SEO効果が出るというものではありません。しかし、適切に使えば、SEO効果を高める手助けをしてくれます。alt属性の「alt」とは、英単語のalternative（代替の）を略した言葉です。

 

その名の通り、alt属性には画像を説明する代替テキストが設定されます。クローラーは、画像だけではその内容を認識できません。

 

しかしalt属性を設定すればクローラーに画像の内容を伝えることができ、Webページのより正確な分析、さらにはSEO効果の向上につながるのです。

 

title属性との違いは？

alt属性と似ている設定が、title属性です。title属性はalt属性とは違い、画像だけではなくタイトルやページの内容、テキストなどにも設定できます。しかし、SEO対策においては、title属性よりもalt属性の方が重要です。

 

なぜなら、title属性はユーザーに向けた補足情報を提供するものであり、一方でalt属性は検索エンジンのクローラーに向けて画像の内容を説明するものであるためです。

 

こうした目的の違いにより、Webページ上での挙動も異なります。title属性はそのコンテンツにカーソルを当てることでユーザーが閲覧できますが、alt属性の場合はカーソルを当ててもユーザーは閲覧できません。

 

SEO対策として考えた場合、クローラーに向けたalt属性は基本的に設定するべきですが、title属性の設定は必須ではありません。

 

むしろtitle属性を設定しすぎると、ユーザーがカーソルを動かすたびに補足情報が出てきてしまい、「煩わしい」と感じられる原因となってしまいます。

 

alt属性のSEO効果一覧？

alt属性によって期待できるSEO効果は

 

・「クローラーに画像の内容を認識させられる」

・「音声読み上げ機能を使うユーザーにも画像を説明できる」

・「通信状態が悪くても画像の内容を伝えられる」

 

の3点です。

 

クローラーに直接画像の内容を伝えることがSEO効果の向上に役立つということは前述のとおりですが、「音声読み上げ機能を使うユーザーにも画像を説明できる」「通信状態が悪くても画像の内容を伝えられる」といった、ユーザーアクセシビリティにおいてもSEO効果の向上が期待できます。

 

クローラーに画像の内容を認識させられる

alt属性を設定することで、クローラーに画像を正確に伝えることができます。

 

ページやコンテンツが検索結果に表示されるためには、クローラーによる検索エンジンへの登録が必要です。この登録がされていないと、検索結果からユーザーが流入しないため、アクセス数が見込めません。

 

また、ページ内に画像が添付されている場合、クローラーは画像だけでは内容を正確に理解できません。

 

しかしalt属性を設定すれば、テキストで画像の内容を示すことができるため、クローラーは画像の内容を認識できるようになります。これはWebページの適切な評価にもつながり、SEO効果の向上が期待できるのです。

 

音声読み上げ機能を使うユーザーにも画像を説明できる

alt属性を設定することで、読み上げ機能の利便性も向上します。すべてのユーザーがページを目で見ているわけではありません。

 

視覚に障害のある方や高齢の方など、さまざまな理由から、スクリーンリーダーという音声読み上げ機能を使用してページにアクセスしているユーザーもいます。そのような場合、画像だけでは情報を得ることができません。

 

画像にalt属性を設定することで、スクリーンリーダーを使うユーザーにも情報を提供することができるのです。

 

つまり、alt属性を画像の説明文として機能させることで、Webページの利便性が向上します。ユーザーにとって有益なコンテンツは、Googleなどの検索エンジンからも優良なコンテンツとみなされるので、SEO効果も期待できるというわけです。

 

通信状態が悪くても画像の内容を伝えられる

alt属性を設定することで、通信状態が悪くても画像の内容を伝えられるようになります。

 

インターネットの接続状況が悪かったり、ページが重かったりして、画像やコンテンツがなかなか読み込まれないという状況を経験したことはありませんか？文字だらけのページは読みにくく、ユーザーの離脱にもつながってしまいます。

 

わかりやすいサイト作りには画像の挿入は欠かせませんが、ユーザーやWebページの状況によっては、画像が読み込めないために伝わる情報が不十分になってしまう可能性もあります。

 

こんな場合でもalt属性を設定しておけば、代替テキストとして画像の内容を伝えることができます。状況を問わず画像の内容を把握できるようになるため、Webページの利便性が向上します。

 

SEOに効果的なalt属性の書き方のコツ

alt属性の書き方にはコツがあります。alt属性の設定は、SEO効果だけでなく利便性の向上にもつながることを、ここまで説明してきました。しかし、適当にテキストを設定するだけではalt属性の効果は薄くなってしまいます。

 

alt属性によってSEO効果を向上させるためには「alt属性を設定する画像を選択する」「alt属性には簡潔でわかりやすいテキストを設定する」「alt属性はモバイルページにも設定する」ことが重要です。以下で、1つずつ見ていきましょう。

 

alt属性を設定する画像を選択する

alt属性を設定するにあたり「すべての画像にalt属性を設定する必要があるのか？」と思う人も多いでしょう。結論からお伝えすると、すべての画像にalt属性を設定する必要はありません。

 

背景画像やラインマーカー、内容とは関係のない画像など、ページの見栄えのために挿入する「装飾画像」にはalt属性を設定する必要はないのです。

 

装飾画像はページの内容とは直接関係ないため、これらにalt属性が設定されていると、スクリーンリーダーを利用するユーザーにとって煩わしいだけでなく、正しい情報が分かりにくくなってしまいます。

 

alt属性はクローラーのページ認識の手助けや、ユーザーにとっての利便性の向上にもつながるため、alt属性を設定する画像と設定しない画像を、的確に選択することが大切です。

 

簡潔でわかりやすいテキストを設定する

alt属性を設定する際も、ただテキストを入力すれば良いというわけではありません。alt属性には、簡潔にわかりやすい内容を設定する必要があります。

 

例えば「犬」の画像を挿入する場合「犬」や「動物」のようなテキストだと、犬の状況や動物の種類が正確に伝わりません。テキストを見ただけで内容が伝わるように「水場ではしゃいでいる犬」のような正確でわかりやすい文にしましょう。

 

しかし、キーワードを詰め込みすぎた複雑な文だと、かえってクローラーの理解を妨げてしまいます。例えば「暑い日に公園で見つけた水場ではしゃぎ回る柴犬」だとキーワードが多く、画像で伝えたい情報がわかりにくいです。

 

正確でわかりやすく簡潔な文を設定することが大切です。

 

alt属性はモバイルページにも設定する

alt属性はモバイルページにも設定するよう心がけましょう。スマートフォンの普及により、モバイル端末でWeb検索をする人が増加しました。

 

それに伴い、クローラーによるWebページの評価基準も「モバイルファーストインデックス」へと変わっています。これは、検索結果の表示順位を、モバイル版ページに基づいて決めるというものです。

 

かつて、パソコン版サイトをもとに表示順位が決まっていた時には、テキスト主体のコンテンツが多かったため、alt属性はあまり重要視されておらず設定していないサイトも多くありました。

 

しかし、スマートフォンカメラの普及や通信速度の向上によって画像が多用されるようになるにつれて、alt属性の有効性が再確認されたのです。

 

特に画像検索では、alt属性を設定していないと検索結果として表示されないため、設定していないことはアクセス機会の損失につながります。そのため、モバイルページにも忘れずにalt属性を設定しておきましょう。

 

alt属性の確認方法

Webページに挿入した画像にalt属性が設定できているか確認する場合はGoogle Chromeの「検証」機能を使う方法と、Google Chromeの拡張機能「Alt＆Meta viewer」を使う方法があります。

 

通常は、Webページに設定されているalt属性のテキストは表示されません。そのため、完成したページに正しくalt属性を設定できているか確認できなくなっています。ここでご紹介する2つの方法を使えば、設定したalt属性を確認できます。

 

Google Chromeの検証機能を使う

1つ目の方法では、Google Chromeの「検証」機能を使います。これにはまず、Google ChromeでWebページにアクセスし、該当する画像を右クリックします。開いたメニューから「検証」を選択すると、デベロッパーツールが表示されます。

 

ここで見られるHTMLソースコードから、alt属性が入力されているか確認しましょう。Google Chromeの標準機能なので、特別なソフトや複雑な手順が不要で、手軽に確認を行えます。

 

ただし、Google Chromeの検証機能からできるのはalt属性の確認のみで、入力や編集などはできません。alt属性が正確に設定できていなかった場合やalt属性を変更したい場合は、改めてWebページの編集画面からalt属性を設定する必要があります。

 

Google Chromeの拡張機能「Alt & Meta viewer」を使う

2つ目の方法では、Google Chromeの拡張機能「Alt ＆ Meta viewer」を使います。

 

Google Chromeブラウザで、 https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=jaにアクセスし、ページ右上にある「Chromeに追加」をクリックします。

 

「Alt ＆ Meta viewer」が追加されたら、確認したいページを開いて「拡張機能」のアイコンをクリック。「画像の Alt 表示」をクリックすると、そのページの画像に付与されているalt属性を確認できます。しかし、こちらも確認だけで入力や編集はできません。

 

alt属性が反映されないときの原因

ブラウザによっては、alt属性の設定がうまく反映されないことがあります。その際には、反映されなかった原因を追究して設定を変更する必要がありますが、スマートフォンやMicrosoft Edge、Safariなどのブラウザからはalt属性の確認ができません。

 

Google Chromeの「検証」機能や、拡張機能「Alt ＆ Meta viewer」を使って確認する必要があります。alt属性はSEO対策だけでなく、ユーザーから見た利便性にもつながる大事な設定です。Webページに正しく反映されていることを確かめましょう。

 

alt属性を効果的に使ってSEO対策を行う

alt属性は、設定をするだけで直接SEO効果が出るというものではありませんが、Webページにおいて大切な要素であり、適切に設定することでSEO対策にもつながるということを、ここまででご説明してきました。

 

alt属性を設定することで、検索エンジンのクローラーに画像の情報を正しく伝えることができ、ページ全体の評価アップが期待できます。

 

また、アクセシビリティの観点から見ると、通信速度が遅いときや音声読み上げ機能を使用しているときにも画像の内容がわかるため、さまざまな場面での利便性が向上します。

 

alt属性の効果を最大限に発揮するには、「alt属性を設定する画像を選択する」「簡潔でわかりやすいテキストを設定する」などのコツがあります。これらのコツをつかんで、alt属性をSEO対策に活用しましょう。