2016.11.08SEO記事一覧

alt属性とは?SEOにおけるaltの役割と正しい使い方

  • このエントリーをはてなブックマークに追加

15_roles-and-correct-use-of-alt

alt属性とは、htmlで画像に設定されたテキスト情報のことです。画像表示ができない場合に、画像の変わりに表示されたりします。alt属性の存在は知っていても、正しい記述方法や、SEOとの関係性まではご存知ではない方も多いのではないでしょうか。

今回は、alt属性について、基礎知識からSEOとの関係性、正しい記述方法までご紹介させていただきます。

そもそもalt属性とは?その役割と効果

alt属性に関しては、W3C(ウェブで利用される技術の標準化をすすめる国際的な非営利団体)にて以下のように定義されています。

When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as “alt text”.
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

引用元:W3C Using alt attributes on img elements
 
英語のままではわかりづらいですよね。日本語で概要をまとめると…
画像をサイトに掲載する場合は、簡単な代替テキスト(その画像が何を表しているのか)をalt属性に指定すること、また注意点としては画像の視覚的な特徴までは必要ないが画像と同じ内容を設定する(関係ない内容は設定しない)とされています。

alt属性とSEOの関係性

よく質問を頂くのが、alt属性とSEOの関連性についてです。先にお伝えさせて頂くと、alt属性に対して施策を実施した事で順位が急激に上昇したりする事はありません。

しかし、「検索エンジンに対して分かりやすいサイト」にする為には避けては通れない施策です。なぜalt属性に対して施策を実施すると「検索エンジンに対して分かりやすいサイト」になっていくのでしょうか?これには決定的な理由があります。

そもそも検索エンジンは画像の内容を把握する事が出来ません。私たちは画像を見て(その画像が意味をなさない画像でない限りは)ほとんどその内容を理解する事が出来ますが、検索エンジンは画像を見て内容を読み取る事が出来ません。

そこでalt属性を設定する事で、画像が何を表しているかを検索エンジンが理解するが可能となります。
結果、「検索エンジンに対して分かりやすいサイト」になっていくのです。

Googleが公開している「検索エンジンスターターガイド」にはalt属性について以下のように記載されています。

画像はサイトを構成する単純な要素と考えているかもしれませんが、最大限に活用しましょう。
すべての画像には個別のファイル名とalt属性を持たせることができるので、この点を有効に利用すると良いでしょう。
alt属性は何らかの理由によって画像が表示されないときに、代わりのテキストを示してくれるものですこのような属性を使うのは、ユーザーが画像を表示しないウェブブラウザ を利用していたり、もしくはスクリーンリーダー のような別の手段でサイトを閲覧していたりする場合に、alt属性の代替テキスト(altテキスト)があれば画像に関する情報を提供できるからです。

alt属性を使うもう1つの理由は、画像からリンクを張る場合に、画像のaltテキストがリンクに対するアンカーテキストのように扱われるからです。

引用元:Google検索エンジンスターターガイド
 
alt属性に関して重要なところをまとめると、Googleは以下のメリットがあると伝えています。

  • 画像に関する情報はalt属性で提供することができる。
  • 何らかの理由によって画像が表示されないときに、代わりのテキストを示してくれる。
  • 画像からリンクを張る場合、altテキストがリンクに対するアンカーテキストと同様に扱われる。

特にSEOの観点から重要なのは「画像からリンクを張る場合、altテキストがリンクに対するアンカーテキストと同様に扱われる。」の項目です。

テキストよりも画像の方がよりリッチな表示が出来るのでウェブページのサイドメニューに関してバナーのような構成にされているサイトは多く見られます。ただ、そのバナーとしてリンクを含んだ画像に対してalt属性が設定されていない場合、検索エンジンはそのリンク先がどのようなページかすぐに理解する事が出来ません。画像でリンクを設定している場合は、alt属性に関してもしっかりと設定を行う事をお忘れなく。

画像をリンクとして利用する場合は、altテキストを提供するとGoogleにリンク先のページ内容が理解されやすくなります。
テキストリンクのアンカーテキストを書いているような感覚でaltテキストを書いてください。

引用元:Google検索エンジンスターターガイド
 
ただ、まだ小手先のSEO施策がまかり通りっていた時には、このalt属性に(画像とは何ら関係がなくても)上位表示を行いたいキーワードを設定するSEO施策が存在しました。昨今では、そのような施策はまったく効果がないばかりか、同じような施策を実施した際は最悪検索エンジンからスパム行為を行っているとの評価を落としかねませんので、注意してください。

最適化できるその他の多くの要素と同様、(ASCII文字コードにおける)ファイル名とalt属性は、簡潔かつ説明的なものが理想的です。

  • 簡潔で、内容をきちんと説明しているファイル名とaltテキストを付けよう
  • 可能であれば“image1.jpg”、“pic.gif”、“1.jpg”のような一般的なファイル名は使わない
  • 極端に長いファイル名を付けない
  • alt属性にキーワードを詰め込んだり、文章をすべてコピー&ペーストしたりしない

引用元:Google検索エンジンスターターガイド

Title属性とalt属性の違い

SEO施策を制作会社様にお願いする際に質問を頂くのが、「画像(img要素)に対するtitleタグとalt属性の違い」です。

こちらも結論からお伝えすると「alt属性は画像の代替テキストであり、Title属性は画像に対する助言的説明を行うもの」です。alt属性に関しては既にご説明させて頂いた通り、画像を端的に説明した内容を記載しますが、Title属性は補足説明を行う事が設定により可能となります。Title属性を設定された画像はマウスオンすると吹き出しが表示されます。その吹き出しに補足の説明を設定するのが本来の使用方法となります。

ただし、alt属性は画像(img要素)以外には設定できませんが、Title属性に関してはすべての要素に対して設定する事が可能です。

SEO施策に関しては、多くが少ない工数で最大限の成果を上げる事を求められますので、Title属性ではなくalt属性に絞って施策する事をお勧めします。Title属性はすべての要素に対して設定する事が出来てしまいますので…。

W3Cのサイトでは、alt属性に関しては必須との明記がされています。

Several non-textual elements (IMG, AREA, APPLET, and INPUT) require authors to specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

引用元:W3C Objects, Images, and Applets
 
ただ、alt属性が必須と定義されているからといって、スペーサーなどのような意味をもたない画像までalt属性を設定する必要はありません。そのような画像に関しては「alt=””」いったように値を設定せずダブルコーテーションで囲ったものを設定してください。

視覚障害者の方もWebから情報を収集するのはご存知ですか

Webサイトを利用するユーザーは健常者だけではありません。
目が不自由な視覚障害を持ったユーザーもWebサイトを利用します。下記の総務省が公開しているデータでは何らかの視覚障害を持ったユーザーの約70%以上がインターネットを利用しているのが分かります。

このデータは10年以上の前のデータですので、昨今のスマートフォンの普及によって実際はより多くの割合で視覚障害の方がWebサイトを訪問している事が予想されます。

特定のウェブサイトから欲しい情報を取得する作業のプロセスを、全盲の視覚障害者と健常者とで比較すると、全盲の利用者の方が、ウェブサイトやページにおける構造の把握や確認のための作業が非常に多いことがわかる。

引用元:情報バリアフリーのための情報提供サイト
 

平成13年度末に行われた郵政研究所(現総務省情報通信政策研究所)の調査によると、パソコン、携帯電話・PHSといった情報通信機器やインターネットの利用は、障害を持つ人々にも着実に普及しつつある。携帯インターネットの発展により聴覚障害者の携帯電話・PHS利用が進展し、また、読み上げソフト等の活用により視覚障害者のパソコン利用も進展していると考えられる

roles-and-correct-use-of-alt-01

引用元:平成15年版情報通信白書
 
一般的に視覚障害を持ったユーザーは「スクリーンリーダー」を使用してWebサイトを閲覧しています。スクリーンリーダーとは、コンピューターの画面読み上げソフトでマウスに代わって掲載されている情報を音声で読み上げる事を可能にするソフトです。目が不自由な方はこのようにして、1つ1つのページを聴覚などによって理解されています。

ここまででもうピンと思いついた方はいるのではないでしょうか?

alt属性は画像の代替メッセージです。仮にalt属性に何も設定されていない場合、画像の内容がスクリーンリーダーでは読み上げる事が出来ません。しかし、もしalt属性が設定されている場合はその内容もスクリーンリーダーによって読み上げる事が可能となります。

画像情報に対しても適切なテキストをalt属性によって設定しておくことで、検索エンジンだけでなく視覚障害をもったユーザーに対しても適切な情報を提供する事が可能になります。

またalt属性の話からは脱生してしまいますが、視覚障害を持った方に対して配慮するのであれば、入力フォームなどに多用されているチェックボックスやラジオボタン、テキスト入力欄に対してもlabel要素を用いてください。

テキストのラベルとフォーム・コントロールを関連付けると視覚障害を持ったユーザーがスクリーンリーダーで入力フォームを読み込んだ際に迷う事がなく入力を行う事が可能になります。また、その際はタブで一つ一つ正しく遷移できるようにするなどといった基本的なフォームの構築もお忘れなく。

HTML及びXHTML仕様書では、暗示的なラベルと明示的なラベルの両方を認めている。

しかし、支援技術の一部は、暗示的なラベル(たとえば、<label>First name <input type=”text” name=”firstname”></label>)を正確に処理できない。【訳注:なお、暗示的なラベルとは、ラベルとフォーム・コントロールを単にlabel要素で囲んだだけのものである。一方、明示的なラベルとは、label要素のfor属性に、フォーム・コントロールのid属性値と同じ値を指定することで、両者を明確に関連付けたものである。】

引用元:W3C label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける
 
このように、サイト制作時にはつい製作者の目線にて作成しがちではありますがもう少し敷居を広げてWebを利用するすべてのユーザーにとって使いやすい・分かりやすいサイト作りはどのようにしたら実現出来るのか、少しだけでも構いませんので考慮しながら制作して頂けると本当の意味で使い勝手が良いWebサイトに近づく事が可能になるのではないでしょうか。

誰に取っても使いやすい・分かりやすいWebサイトを目指して

以前は「検索エンジンをいかに騙すか」といった内容のSEO施策が多く見られました。先ほどご紹介したalt属性に対してキーワードを詰め込むような施策もその一つです。ただ、検索エンジンの能力が向上し小手先のSEO施策では効果が出なくなった現在では「いかに検索エンジンに対して分かりやすく、検索ユーザーにとっても使いやすいサイトか」が求められています。

検索エンジンがページの内容を十分に把握すれば、そのページが上位に表示される可能性は十分にあります。そのきっかけになる施策の1つがalt属性として考えれば、ひとつひとつの画像に対して設定するのは少し面倒ではありますが設定する価値はあるのではないでしょうか。

またalt属性への設定が対検索エンジンというだけでなく、健常者も視覚障害を持った者に対しても有効な施策であるという事は上記に記載された内容で既にお分かりになって頂いたと思います。

Googleが目指す「誰にとっても使いやすいWebサイト」を実現するためにも、ここでは順位の上昇という事だけでなくユーザービリティの向上といった側面からも<img>要素における<alt>属性値への設定を行って頂けると宜しいかと思います。

毎月5社限定!無料Web診断でここまでわかる!

無料Web診断資料内容

あの競合他社がWebマーケティングで成功しているのも
皆さんのWebマーケティングがなかなかうまくいかないのも
すべて理由があります。
まずは理由を可視化する無料Webサイト診断をお試しください。

診断内容

  • 流入元分析
  • 検索流入分析
  • コンテンツ分析
  • デバイス分析
  • SEO分析

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
犬塚 啓明

犬塚 啓明

ディーエムソリューションズ株式会社 インターネット事業部 シニアコンサルタントグループ 部長 トップSEOコンサルタント。ITベンダーにてプログラマ経験を積んだのち、ある案件で担当したWebサイト制作を通してSEOに興味を持ったのをきっかけに、SEOコンサルタントとしての道を目指し、ディーエムソリューションズへ転職。検索エンジンにおける表示順位を上げ、サイトへの流入数を増やすだけでなく、コンバージョンの増加やブランド認知の向上、コンテンツ資産を高めていくといったWebサイトトータルの成功を日々追及している。