alt属性のSEO効果と正しい使い方

検索エンジンの読み込み能力が向上した今、以前のような小手先のSEOでは効果が得られなくなっています。現在は、ユーザーにとって使いやすいWEBサイトであるか、そして検索エンジンに対して分かりやすいWEBサイトであるか、といった点が大きく求められているためです。ページの内容を検索エンジンに分かりやすく伝え、内容をきちんと把握されるようになれば検索順位に上位表示される可能性は十分にあると考えられます。

そこで重要となる施策の一つが、「alt属性」の設置です。
検索エンジンは画像の内容を確認すること、読み取ることは無理です。alt属性を設定する事で、画像の意味を検索エンジンが正しく理解することができます。
「alt属性がSEOに影響する」と言いますが、正しい使い方やどの程度SEO効果があるのかまでは把握していない方が多いのではないでしょうか。

今回は、「alt属性の役割」や「SEO効果」、そして「正しい設定方法」についてまとめました。

「alt（オルト）属性」とは、HTMLの画像（imgタグ）に設定された属性のことです。
リンクが切れている場合や何らかの理由で画像を表示できない場合に、画像の代わりにテキストが表示されることから「代替テキスト」とも呼ばれます。

ネットワーク上の問題などが原因でページ内にある画像が表示されなかった場合、あらかじめalt属性が設定されていれば、「画像の代わりにテキストを表示させる」ことができます。
また、画像の読み込みが遅い場合もユーザーがどのような内容の画像なのかを理解できるようになるため、アクセシビリティの向上にも大きな効果が期待できます。

パソコンやスマートフォンでWEBサイトを閲覧している視覚障害者の方は、主にスクリーンリーダーや音声ブラウザを使用してWEBサイトの情報を理解します。スクリーンリーダーや音声ブラウザといった機能は、掲載されている文字情報を音声で読み上げることが可能ですが、テキスト以外の画像や動画などの情報は読み上げることができません。

そのような場合に必要になるのが、画像の内容を読み上げるための代替テキスト、つまりalt属性です。

alt属性が設定された画像は、スクリーンリーダーや音声ブラウザがその内容を読み上げてくれるため、「視覚障害者に対して適切な情報を提供する」ことが可能になります。

WEBサイト内にイメージリンクと呼ばれる「a要素」を設定して画像からリンクを貼る場合、alt属性のテキストがリンクに対する「アンカーテキストの代わり」としての役割を担います。
そのため、「こちらをクリック」のようなテキストではなく、検索エンジンにリンク先のページ内容が理解されやすい、きちんと説明された適切なテキストを記述することが大切です。

ただ、検索エンジンのクローラーもスクリーンリーダーや音声ブラウザと同じように、画像だけではその内容を理解することができないため、alt属性を設定して検索エンジンに対して分かりやすいサイトを作ることは必要不可欠です。

alt属性の役割のうち、SEOの観点から重要とされるのが「アンカーテキストの代わりとなる」という点です。
WEBサイトから集客するための方法の一つとして、アンカーテキストを最適化するといった施策がありますが、SEOで検索順位を上昇させたいキーワードをアンカーテキストに含めた方が検索エンジンに重要なテーマであると認識してもらえやすくなり、SEOの効果を高めやすくなります。

このように、検索エンジンに正しい情報を伝えるためにも、SEO効果の有無に関わらずalt属性を正しく設定することは非常に重要です。

alt属性の正しい使い方として、以下のようなポイントがあります。

alt属性に入力する代替テキストは、画像の情報と関係のある内容を「簡潔なテキストで記述」します。
検索エンジンやユーザーに分かりやすい簡潔な内容で書かれた代替テキストは、ユーザーの混乱を避け、ユーザビリティを向上させるといった効果が期待できます。

例えば、ある商品を紹介するページに設置した画像からリンクを貼る場合、a要素を設定する必要があります。その際は、alt属性のテキストに「商品はこちら」などの記述ではなく、「商品名」を記述した方が、検索エンジンやユーザーにリンク先の内容を分かりやすく伝えることができます。

検索結果における順位を上げることを目的に、alt属性に対して特定のキーワードだけを詰め込んだり、くり返し記述したりすると、検索エンジンにマイナスの評価をされてしまう可能性があるため注意が必要です。
また、alt属性のテキストに含める文字数は決まっていませんが、極端に長くならないように、できるだけ簡潔で分かりやすい文言で記述することを意識することが大切です。

すべての画像にalt属性のテキストを記述する必要はありません。例えば、背景画像やラインマーカーなど、WEBサイト上のデザインや装飾を目的で使用している画像は、コンテンツ内で意味を持つ画像ではありません。
このような意味を持たない画像に対してもalt属性は記述しますが、alt属性のテキストを設定する必要はないため、「alt=""」といったように値は空白のままで記述します。
（例）