alt属性はなぜ重要？その効果や記述する際のポイント・注意点
「alt属性ってなに？」と疑問に思われる方も多いですよね。alt属性は、Webサイト内の画像の内容をテキストとして、検索エンジンやユーザーに伝えることができるものを指します。
今回の記事では、alt属性の説明から効果やメリット、Webページ上での確認方法を説明していきます。これからSEO対策に力を入れていきたいと思っている方や、すでにあるサイトを見直したい方はぜひ参考にしてみてください。
目次
alt属性とは
alt属性（オルト属性）とは、画像などのテキストではないコンテンツに対して、テキストと同様の情報を検索エンジンに伝えたり、画像が読み込めないときに表示させる代替テキストのことです。
検索エンジンは、画像に内容を把握することができないので、「どんな画像なのか」という情報を検索エンジンに伝える必要があります。その際に必要なのが、alt属性というタグです。
タグの表示方法は以下のようになります。
<img src=”画像URL” alt=”画像の情報” width=”” height=”” />
「alt=””」の部分がalt属性になり、画像の情報を入力します。
たとえば、「alt=”夏の海”」や「alt=”猫と犬”」などです。
テキストコンテンツとして情報を設定することで、alt属性から「どのような画像なのか」を伝えることができます。
alt属性の本来の役割
alt属性の役割をまとめると以下の3つです。
- 検索エンジンに対して、画像の情報をテキストにして正しく伝えることができる
- 何らかの理由によって画像を見ることができないユーザーに対して、テキストで説明することができる
- 画像をリンクにした際、alt属性がリンクに対するアンカーテキストのように扱われる
それぞれ、解説していきます。
検索エンジンに対して、画像の情報をテキストにして正しく伝えることができる
alt属性のひとつの役割として、検索エンジンへ画像の情報を伝達することができます。
検索エンジンは、人とは違い、画像を認識することができません。そのため、alt属性から「どのような画像なのか」というテキストとして情報を取得します。
alt属性は、検索エンジンのキーワード検索、画像検索で用いられる要素のひとつのため、画像の内容とテキストの情報を正しく設定することが大切です。
何らかの理由によって画像を見ることができないユーザーに対して、テキストで説明することができる
検索エンジンだけではなく、ユーザーにも重要な情報提供ができます。
alt属性は、視覚障害がある、スクリーンリーダーを使用する、接続速度が遅いなどの理由からWebページを見ることのできないユーザーに対して、代替テキストとして画像の情報を伝えることが可能です。Webページとしてのユーザビリティの向上にも繋がり、SEOに良い影響を与えます。
画像をリンクにした際、alt属性がリンクに対するアンカーテキストのように扱われる
alt属性は、画像をリンクとして使用する場合、alt属性がテキストリンクのアンカーテキストとして扱われます。アンカーテキストとは、他のWebページへのリンクに表示する文章のことです。
テキストよりも画像の方が、表現の幅が広がるため、バナーとしてリンクを含んだ画像にalt属性を設定することで、検索エンジンがそのリンク先のページがどのようなページなのかを理解することができます。
画像でリンク設定をする場合は、alt属性の設定も行うことが重要です。
Googleが公開している資料でもアンカーテキストの有効性についての記述があります。
効果的なリンクテキストを記述する
リンクテキストとは、リンク内に表示されるテキストです。このテキストはユーザーや Google に対して、リンク先のページについての情報を伝えます。ページ上のリンクには内部的なリンク（サイト上の他のページを参照しているもの）もあれば、外部的なリンク（他のサイトのコンテンツにつながるもの）もあります。どちらの場合でも、アンカー テキストが効果であるほど、ユーザーがナビゲートしやすくなり、Google がリンク先のページについて理解しやすくなります。
SEOにおけるalt属性の効果・メリット
「SEOとしての効果がalt属性にあるのか」と気になる方も多いですよね。結論から言えばあった方が良いです。
検索順位を上げるためには、「ユーザーファースト」の概念を意識してWebページを設計しなければいけません。では、alt属性が「ユーザーファースト」になりうるのか？これが上記で説明した「alt属性の本来の役割」に繋がります。
そもそも検索エンジンは、画像の情報を読み取ることができません。alt属性を設定することで、検索エンジンが画像の情報を認識することができます。つまり、ユーザーに対して、分かりやすく丁寧なサイトとして認識してもらうことができるのです。
Googleの公開している資料でも、alt属性の有効性について記述されています。
「alt」属性を使用する
画像にわかりやすいファイル名を付けて、alt 属性の説明を入力します。「alt」属性を使用すると、何らかの理由で画像を表示できない場合の代替テキストを指定できます。
この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。
alt属性を設定することで、爆発的に検索順位を上げることはできませんが、ユーザビリティの高いWebページとして、alt属性が設定されていないWebページよりは良い評価をもらうことができます。
alt属性を記述する時のポイントや注意点
alt属性を設定する時の注意点は以下の4つです。
テキストは画像にあった適切なものを入力する
alt属性を設定する時に気を付けてほしいポイント1つ目は、画像とは無関係のalt属性を設定しないようにすることです。まったく関係のないテキストを入れてしまうと、検索エンジンにもユーザーに対しても伝わりにくいサイトになってしまいます。
ユーザービリティを意識して、画像の内容にあった情報を提供するように心がけてください。
ターゲットとなるキーワードを入れ込みすぎない
alt属性がSEO対策に影響があるなら、「SEOを効果を狙ってキーワードを詰め込むぞ」という考えになる方もいるかもしれません。しかし、これは大きな間違いです。
むやみにキーワードを詰め込むことで、検索エンジンからスパム行為と認識されてしまう可能性があるからです。ユーザーにとって必要な情報だけを使用するようにしましょう。
意味の持たない画像はalt属性を設定しない
「意味を持たない画像ってなに？」と思われますよね。意味の持たない画像とは、白黒の画像や背景画像などのデザインや装飾を目的とした画像です。
意味を持たない画像の時は、alt属性の値は空白にします。
<img src=”画像URL” alt=”” width=”” height=”” />
上記のように「alt=””」と何も記入しないようにしましょう。
複数同じ内容の画像を数ページに貼り付けるのは問題ない
全ページに企業のロゴを貼り付ける必要があったり、フッターにバナーを設置したりなど複数同じ画像を貼り付けることは問題なありません。
alt属性の確認方法について
すでに公開しているWebサイトにalt属性は設定されているでしょうか？alt属性の確認方法を3つ紹介します。
直接ソースコードを見て確認
ソースコードを直接開き、確認する方法です。今回はGoogleChromeでの手順を説明します。
手順は以下の通りです。
- ブラウザでWebページを開き、右クリックで表示される「検証」をクリック
- 開発ツール画面が開くので、左上の矢印のついたマークをクリックします。
- alt属性を確認したい画像にマウスを合わせ、クリックすると、ソースコードの右側にハイライトで表示されます。
改めて、alt属性が設定されているか確認する時は便利なので、積極的に抜け漏れがないか確認してみましょう。
Chrome拡張機能「Alt ＆Meta viewer」を使う
GoogleChome拡張機能を使った確認方法です。とても簡単なので、Chromeブラウザを使用している方にはおすすめです。
- Chromeウェブストアで「Alt & Meta viewer」をインストール
- 確認したいWebページを開き、Chromeブラウザの右上に「Alt」というアイコンをクリック
alt属性評価チェックツールで競合比較
「alt属性評価チェックツール」は無料のSEOツールです。alt属性の「設置比率」や「文字数」「キーワード出現率」を競合上位10位平均と比較することができます。
- 対策URLを入力
- 対策キーワードを入力
- 「alt属性をチェックする」をクリック
alt属性が表示されない場合
「確認したいけど、alt属性が表示されない」というケースがあります。そんな方は、以下の2点を確認してみてください。
- title属性と勘違いしてるケース
- スマートフォンや一部のブラウザでalt属性が表示されないケース
すでにアップロード済みの画像は対処すべき？
もうすでにサイトが成長し、アップロード済みの画像枚数もかなりの数の方も多いですよね。それらの画像にalt属性が設定されていない場合は、各記事の画像を修正する必要があります。
サイトのCRMとしてWordpressを使っている場合は、便利なプラグインがあるので紹介しておきます。以下のプラグインを使うことで、メディアライブラリからまとめて変更することができます。
- Media File Renamer：ファイル名の編集
- Media Alt Renamer：代替テキストの編集
貼り直しの必要がなくなるため、時間と手間をかけずにalt属性の設定が可能です。Wordpressをお使いの方で、もうすでにアップロード済み画像が大量にある場合はおすすめです。
おわりに
alt属性の設定は、ユーザビリティの高いサイトとして検索エンジンに評価されます。
以前は、検索エンジンを騙すようにalt属性にターゲットキーワードを詰め込むという施策もありました。しかし、検索エンジンの能力は日々アップデートを繰り返し、小手先のテクニックでなく、いかに「検索エンジンに分かりやすく」「ユーザーにとって有益なサイト」なのかが問われるようになってきています。
alt属性はSEO対策の1つとして、内容を理解し、適切に対応することでWebページが上位に表示される可能性は十分にあります。alt属性の設定を画像ひとつひとつに入力するのは手間や時間がかかりますが、きちんと設定しておくことをおすすめします。検索順位をあげることは、ユーザビリティの向上がとても大切になります。alt属性を積極的に対応してみてください。