alt属性とSEOの関係性とは?alt属性の設定方法も解説

SEO対策実例・コラム
コンテンツSEO・コンテンツマーケティング
2019.11.12
alt属性とSEOの関係性とは?alt属性の設定方法も解説

代替テキストとも呼ばれるalt属性は、WEBコンテンツを作成する上では知っておく必要のある項目です。当記事では、alt属性の役割から設定の仕方まで解説していきます。alt属性の設定の仕方がわからないという人は、参考にしてみてください。

SEOにおけるalt属性の役割


alt属性は、代替テキストとも呼ばれているように、画像データ等の代わりとなるものです。画像の情報を適切にユーザーに伝えるという役割を持っています。

画像を画像検索に最適化させる


alt属性を設定しなかったからと言って、ペナルティを受けることはありません。しかし、画像検索という場面においては、alt属性を設定しておくことでSEOに有利になることがあります。

Googleは基本的にテキストデータを基に情報を読み取ります。そのため、画像に何が映っているのかを認識することはできません。例えばりんごの写真をページに載せていたとしても、Googleはそれをりんごであると判断できないのです。

つまり、ただの画像では画像検索に引っかかりにくくなります。そこで、画像にテキストで情報を付加する必要があるのです。

りんごの画像のalt属性を「りんご」と設定しておくことで、Googleはその画像をりんごの画像であると認識できます。ユーザーが画像検索で「りんご」と検索したときに、そのページがランクインする可能性が上がるのです。

画像の代わりとなる

代替テキストと呼ばれているとおり、alt属性は画像の代わりとなります。

なんらかの事情で画像が表示されなかった場合、代わりにalt属性が表示されます。実際にどのように表示されるのかを見てみましょう。
       alt属性
こちらのページの場合、本来であればいちごの画像が挿入されているはずでした。しかし、画像表示ができなかったので、その箇所にalt属性である「イチゴ/苺/いちご/ストロベリー」が表示されています。

また、視覚障がい者の方がWEBページを閲覧するときにも、alt属性は役に立ちます。

視覚障がい者がWEBページを閲覧するときには、音声で情報を得ます。そのため、alt属性を設定していないと、画像の情報を伝えることができないのです。alt属性を設定していれば、どんな画像が挿入されているのかをテキストで伝えることができます。

alt属性にはどのように記述するのが適切?

 

では、alt属性はどのように記述するのが適切なのでしょうか。

音声で読み上げたときに、その画像が設置されている意義が伝わるか、ということを意識するとよいです。具体的なポイントを解説していきます。

シンプルかつ適切に


alt属性はシンプルかつ適切に設定しましょう。

例えば、この画像の場合は「寝ている猫」や「猫の寝顔」などが適切なalt属性となります。
alt属性の決め方
「かわいい」などの漠然とした単語はalt属性として望ましくないです。画像が見えなくても、alt属性の説明だけである程度画像が想像できるように設定しましょう。

また、「猫 寝顔 毛布 かわいい もふもふ 子猫 親猫」など、キーワードを羅列しないようにします。画像の情報が伝わらないというのもありますが、このように無意味にキーワードを詰め込むと、Googleにスパムとして認識される可能性があります。

無意味なキーワードの羅列は、Googleからも低評価を受けることがあるので、注意しましょう。


「Google 画像検索に関するおすすめの方法」には下記のように説明されています。


代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt 属性にキーワードを羅列すること(キーワードの乱用)は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

悪い例(代替テキストがありません): <img src=”puppy.jpg”/>


悪い例(キーワードの乱用): <img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever  labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>


良い例: <img src=”puppy.jpg” alt=”子犬”/>


最も良い例: <img src=”puppy.jpg” alt=”投げたものを取ってくるダルメシアンの子犬”/>

アンカーテキストとして設定する


アンカーテキストとは、リンクを貼る場合にURLをそのまま表示するのではなく、リンク先のサイトやページの内容を表す適切なテキストを表示してURLを設置することを言います。

例えば、弊社サイトのURL

https://pecopla.net/

にアンカーテキストを設定するのなら、

SEO対策なら株式会社ペコプラ

などが適切なテキストとなります。


バナーなどのリンクが設定された画像ではalt属性をアンカーテキストとして利用することも可能です。画像にリンクを設定する場合は、alt属性にリンク先のページの情報を簡潔にまとめて記述するとよいでしょう。

例えば、このバナーにalt属性を設定するなら「在宅ライター募集」が適切であると言えます。
alt属性をアンカーテキストに
「在宅ライター」や「誰でも憧れのライターに!」では、リンク先がどのようなページかわかりません。在宅ライターを募集するページがリンク先にあると伝わるように、「在宅ライター募集」にするとよいです。

すべての画像にalt属性を設定する必要はない

 

すべての画像にalt属性を設定する必要はありません。音声で読み上げたときに不要だと感じる画像は、alt属性を空白にしても大丈夫です。

具体的にいうと、ページの装飾用の画像などはalt属性を設定する必要はないと言えるでしょう。

 

alt属性の設定の仕方


それでは、alt属性を設定する方法を解説していきます。ここでは、Wordpressで設定する場合と、HTMLで設定する場合、そしてtitle属性も一緒に記述する場合についても解説します。

WordPressでalt属性を設定する方法


WordPressのalt属性の設定は、メディアの情報からできます。

alt属性の手順

まずは画像をアップロードしましょう。

alt属性の手順

アップロードした画像を選択すると、右側にメニューが表示されます。メニューの「代替テキスト」のボックスに入力したテキストがalt属性となります。
alt属性の手順

テキストを入力したら、「投稿に挿入」をクリックしましょう。これでalt属性を設定した画像の挿入が完了です。

alt属性の手順

HTMLでalt属性を設定する方法


続いてHTMLでalt属性を設定する方法を解説します。

まずは画像を挿入しましょう。そして、画像のHTMLを表示させます(使用するCMSによって異なりますが、「テキスト表示」や「HTML編集」などの切り替えボタンをクリックします)。

<img class="alignnone size-full wp-image-14405" src="https://pecopla.net/wp-content/uploads/2019/10/copy-contents-e1571884173733.jpg" width="650" height="409" />

src属性に続けるように、「alt=””」を記述します。

<img class="alignnone size-full wp-image-14405" src="https://pecopla.net/wp-content/uploads/2019/10/copy-contents-e1571884173733.jpg" alt="" width="650" height="409" />

「””」の中に、適切なテキストを記述すればOKです。

<img class="alignnone size-full wp-image-14405" src="https://pecopla.net/wp-content/uploads/2019/10/copy-contents-e1571884173733.jpg" alt="コピペをしてはいけない理由" width="650" height="409" />

例えば、このように記述すれば、この画像のalt属性は「コピペをしてはいけない理由」となります。

もし、画像の説明をする必要がなくalt属性を空白にしたい場合は、「alt=””」のみ記述し、テキストは入れないようにしましょう。これは、音声で読み上げたときのためです。「alt=””」を記述しておかないと、音声はその画像を「画像」と読み上げてしまいます。例えば、飾りとして小さなアイコンを並べて設置した場合、「alt=””」を記述しておかなければ、音声は「画像」と何度も読み上げることになってしまいます。

 

alt属性とtitle属性を設定する方法


title属性は、ある要素に情報を補足するもので、画像にも設定できます。

title属性
title属性に記述したテキストは、画像にカーソルを合わせると表示されるようになります。ページを閲覧しているユーザーが、よりコンテンツの内容を理解しやすくなるように、title属性で画像の補足説明をいれるとよいでしょう。

title属性とalt属性を設定するときは、次のように記述します。

<img src="xxx.jpg" alt="眠そうな犬" title="犬がうとうとしている">

alt属性とtitle属性は、異なるテキストをいれるようにします。厳密なルールはありませんが、alt属性は画像の情報を、title属性は画像の補足説明をする属性であることを意識してテキストを決めるとよいでしょう。

 

まとめ


alt属性を適切に設定することによって、ユーザーにとってより親切なコンテンツをつくることができます。

そのためには、alt属性を設定する際に、次の点を意識するようにしてください。

  • alt属性はシンプルかつ適切に
  • リンク付きの画像の場合は、リンク先の情報を記述する
  • alt属性を設定しない場合はどんなときか理解する


ユーザーの視点に立って、適切なalt属性を設定するようにしましょう。


SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)