SEO measures⑦ alt attribute -alt属性の概要やメリット、効果的な書き方-

Published on Dec 14, 2020



Webサイトには、色々な写真・画像が乗っており、見ていて飽きないですよね。

そんな普段見慣れたサイトに貼られている画像ですが、その一つひとつの画像には「alt属性」というテキスト情報の設定ができます。

検索エンジンは、検索エンジンを使用するユーザーの考え方に近づける為、画像そのものは認識できない仕組みになっており、画像の内容を理解できず、評価することもできません。

その為、画像に書かれている内容を検索エンジンに伝え、画像の代替テキストを設定するのが「alt属性」であり、これを活用することでページの内容が伝わりやすくなり、SEOに有利に働きます。

今回はそんな「alt属性」について、概要、SEOとの関係、記述方法などを説明していきます。



alt属性とは

alt属性(オルト属性)とは、画像の代わりとなるテキスト情報のことです。

万が一画像が表示されない場合、代替手段(alternative)として表示させる為の文言と定義され、「代替テキスト」とも言われます。

HTML内では画像の呼び出し・読み込みを行うためのタグとして、imgタグが存在し、このタグ内で「src」属性に画像が設置されているURLを入力することにより、ブラウザ上に表示させたい画像を呼び出すことができます。

上述の通り、imgタグで画像を呼び出し、サイト内に設置しても、検索エンジンは設置された画像がどういったものなのか認識することができません。

そのようなとき、画像がどういったものなのかを検索エンジンに伝えてくれるのが「alt」属性です。

検索エンジンに伝えるだけでなく、読み上げソフト等を使いサイト内容の読み上げを行う場合、画像部分はalt属性に設定された内容が読み上げられます。

また、サイトの読み込みが遅い時・画像が読み込まれなかった時も、画像の代わりにalt属性に記載された内容が表示されます。

加えて、画像検索でも使用されるため、alt属性に画像説明を適切に記述しておくことが大切になります。

alt属性の書き方は、次の通りです。

<img src=“画像URL” alt=“画像の説明”>

imgタグ内に他の属性と同じように「alt」を設置するだけです。

alt属性を適切に記述することにより、検索エンジン・ユーザーの両者に優しいサイトに近づきますが、alt属性を適切に記述したからといって急激に掲載順位が上がるわけではありません。

alt属性は、あくまで検索エンジンに適切な画像内容を伝え、コンテンツを検索エンジンとユーザーにわかりやすくする役割を担うものです。


メリット


検索エンジンの画像理解に役立つ

検索エンジンは、画像のみでその内容を完全に理解することは困難だと言われている為、画像の正確な内容を伝えるには、次のような手段で情報を補足する必要があります。

  • タグに含まれるalt属性
  • 画像周辺のテキスト
  • 画像に張られたリンクのアンカーテキスト
  • 画像のファイル名
  • 画像のサイトマップ

上記の中でも、alt属性は基本的な手段で、タグの中に画像の内容を記述して設定します。

alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられる、というメリットがあり、画像検索において上位表示を狙う場合には重要な要素です。


画像の代替テキスト

alt属性は検索エンジンのみならず、ユーザーの役にも立ちます。

例えば、通信状態が悪く、画像が表示されない場合、テキストで画像の内容を補完したり、音声読み上げ機能を使用した際の読み上げテキストとして役立ち、利用の際の手助けとなるのです。

alt属性を適切に記述していると、検索エンジンだけでなくユーザーにとっても「利用しやすいコンテンツ」になります。


記述の際の注意点

alt属性を適切に記述することによって、検索エンジンの画像理解を助けますが、逆に間違えた記述方法をすると検索エンジンが画像の内容を間違えて理解してしまう可能性があります。

ここからはalt属性を記述する際の注意点を4つ説明したいと思います。


具体的な内容を記述すること

alt属性は、ユーザーの通信環境などの原因で画像が表示されない場合、テキストとして画像内容をユーザーに伝える為、画像を見なくても掲載している画像がどういったものか分かる様に具体的な記述をする必要があります。

画像の内容に沿い、かつ、ユーザーが理解しやすいテキストの記述を心がけましょう。


装飾目的の画像の場合、alt属性は空でもよい

背景画像やラインマーカー等、コンテンツとして意味をもたない装飾目的で使われる画像の場合、alt属性は記述せず、空白のままにしておきます。

ただし、「alt=””」と””内は空白にするものの、「alt=””」は必ず記述する必要がある為、忘れず記述するようにしましょう。


多数のキーワードを詰め込まない

alt属性にキーワードを詰め込んでしまうと画像の内容が伝わりづらくなるばかりか、スパム行為と認識され、検索エンジンからペナルティを受けてしまう可能性もある為、画像に関係のないキーワードの記述は避けるべきです。

alt属性を設定する際は、画像の内容に沿った必要最低限のキーワードを簡潔に記述するようにしましょう。


タイトル・見出し・リンクになっている場合は必ずalt属性を記述する

画像がtitle要素、h要素、a要素である場合、見出し・リンクの遷移先の内容をきちんと伝える為、必ずalt属性を記述する必要があります。

alt属性はリンクが発生する画像のアンカーテキストの代わりになる役割がある為、リンクがある画像にalt属性が記述されていない場合、検索エンジンがリンク先のページを把握しづらくなります。


まとめ

画像に書かれている内容を検索エンジンに伝え、画像の代替テキストを設定するのが「alt属性」です。

alt属性の役割は、

  • 読み上げ機能利用時にテキストの内容として読まれること
  • 画像が表示されない場合にテキストで画像の内容を補完すること
  • 検索エンジンに画像の内容を伝えていること

の3つとなります。

SEOへの影響だけを考えると、画像のalt属性はあまり評価に影響を与えているとは言えません。

しかし、alt属性を適切に記述することにより、検索エンジンに画像の内容を適切に伝えられるだけでなく、ユーザーにとっても利用しやすい優しいコンテンツになります。

認識されやすいコンテンツにし、ページの質を上げながら、SEO対策を進めることが重要でしょう。



関連記事