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

alt属性は、ページに画像を表示するために必要となるHTMLタグの要素のうちの一つです。使用頻度が多く、WEBコンテンツを作成する上で知っておく必要のある項目のうちの一つでもあります。当記事では、alt属性の役割から設定の仕方まで解説していきます。alt属性の設定の仕方や、alt属性の役割についてよくわからないという人は、是非参考にしてみてください。

SEOにおけるalt属性の役割

alt属性は、代替テキストとも呼ばれているように、画像データ等の代わりとなるものです。また、画像の情報を適切にユーザーやクローラーに伝えるという役割を持っています。alt属性の果たしている役割について、詳しくご説明します。

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

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

Googleの検索結果は、クローラーというプログラムが自動でページの情報を読み取り、検索ワードと関連性が高く、ユーザーにとっても見やすいサイトを順番に上位から並べています。

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

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

先ほどのりんごの画像にalt属性で「りんご」とテキストを設定しておくことで、クローラーはその画像についているalt属性のテキストを読み、その画像をりんごの画像であると認識できます。ユーザーが画像検索で「りんご」と検索したときに、そのページがランクインする可能性が上がるのです。

画像の代わりとなる

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

alt属性のテキストは、クローラーに画像の情報を伝えるだけでなく、画像がうまく表示されなかったときにそれを補うために表示されることがあります。ページの読み込みがうまくできなかったり、回線の調子が悪くて画像が表示されなかったりなど、なんらかの事情で画像が表示されなかった場合、本来表示されるはずだった画像の代わりにalt属性が表示されます。実際にどのように表示されるのかを見てみましょう。

こちらのページの場合、本来であればいちごの画像が挿入されているはずでした。しかし、画像表示ができなかったので、その箇所にalt属性である「イチゴ／苺／いちご／ストロベリー」が表示されています。

このように、alt属性を画像にあらかじめ設定しておくことで、画像の読み込みができなかった場合にも、その画像がどのようなものを表していたのかということが理解できるようになります。そのため、サイトを見ているユーザーに対してより親切な設計になります。

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

視覚障がい者の方がWEBページを閲覧するときには、スクリーンリーダーと呼ばれる読み上げソフトでサイト内の文章を読み上げ、音声で情報を得ます。そのため、alt属性を設定していないと、画像の情報を伝えることができないのです。alt属性を設定していれば、どんな画像が挿入されているのかをテキストで読み上げることができるので、より正確にサイトの内容や情報を伝えることができます。

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

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

alt属性は、文字数に制限はありませんが、なるべく簡潔に、シンプルに記述するというのがルールです。特に音声で読み上げたときに、その画像がそこに設置されている意義が伝わるか、ということを意識するとよいでしょう。

alt属性の記述の仕方について。具体的なポイントを解説していきます。

シンプルかつ適切に

alt属性は文字数に特に制限はありませんが、長々と記述してしまうとかえってユーザーやクローラーへの利便性を損ねてしまうことがあります。そのため、alt属性を設定する際には、シンプルかつ適切に設定しましょう。

例えば、この画像の場合は「寝ている猫」や「猫の寝顔」などが適切なalt属性となります。

「かわいい」などの漠然とした単語はalt属性として望ましくないです。

なぜなら、「かわいい」などの漠然とした単語は、人間が見ていれば理解できますが、サイトの情報を収集するクローラーにはそういった単語は具体的にどのようなものなのかが理解できないためです。また、サイトを読み上げソフトなどを使って閲覧しに来た人にも、「かわいい猫」と伝えるよりも、「寝ている猫」と伝えたほうが具体的に伝わります。画像が見えなくても、alt属性の説明だけである程度画像が想像できるように設定しましょう。

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

スパムとは、ネット上の迷惑行為やルール違反行為のことを指します。

特にSEO関連でSEO対策をやりすぎてしまったり、関連するキーワードを片っ端からmetaタグやalt属性タグに詰め込んだりしてしまうことは、SEOスパムという迷惑行為とみなされて、Googleからペナルティを受けるおそれがあります。

ペナルティを受けると、自分のサイトの順位が下がるだけでなく、最悪の場合は検索結果に表示されなくなってしまうということもあります。

無意味なキーワードの羅列は、Googleに低評価をつけられるだけでは済まない場合がありますので特に注意しましょう。

では、代替テキストの設定について、Googleはどのようなガイドラインを示しているのでしょうか。

alt属性による代替テキストの設定について、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=”投げたものを取ってくるダルメシアンの子犬”/>

このように、Googleの示した例に従って、完結でわかりやすいテキストをつけることが大切です。alt欄を埋めればいいというものではなく、一つずつ画像にあったテキストを設定するようにしましょう。

スパムについては下記の記事でも解説しています。

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

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

例えば、弊社サイトのURL

https://pecopla.net/

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

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

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

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

例えば、このバナーにalt属性でアンカーテキストを設定するなら、どのような文面がふさわしいでしょうか。

「在宅ライター」や「誰でも憧れのライターに！」では、リンク先がどのようなページかわかりません。この画像のリンク先には在宅ライターを募集するページがあると伝わるように、「在宅ライター募集」にするのが良いでしょう。

このように、alt属性は「簡潔に、わかりやすく、重要な部分を」設定するようにすると、ユーザーにもクローラーにもわかりやすく親切なサイトになります。

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

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

具体的にいうと、ページの装飾用の画像などはalt属性を設定する必要はないと言えるでしょう。コンテンツ内で使われている画像や、記事に関連のある画像などにはalt属性を設定し、飾りや枠などの画像にはalt属性を設定しない、といった使い分けをするのが望ましいです。

alt属性の設定の仕方

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

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

WordPressの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属性を設定する際は空白の画像にも「alt=””」を設定しておくようにしましょう。

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

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

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

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

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

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

また、画像には「0001.jpg」のようなデフォルトのタイトルをそのままつけてしまいがちですが、こちらもなるべく画像の内容と関連性のあるタイトルをつけておくことが望ましいです。

alt属性がきちんと設定されているか確かめる方法

alt属性の設定が終わったら、alt属性がきちんと設定されているかどうかを確認しましょう。

alt属性が設定されているかを確かめるには、専用のツールを使うのが便利です。

ブラウザでGoogle Chromeを使用している場合、Google Chromeの拡張機能に、「Alt&Meta viewer」というものがあります。Chromeのウェブストアで「Alt&Meta viewer」と検索し、「Chromeに追加」という右上のボタンをクリックすることでインストールすることができます。

ブラウザの拡張機能なので気軽に導入できる上に、ワンクリックでalt属性が設定されているか否かを簡単にチェックすることができるので便利です。

まとめ

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

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

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

特にここ数年、ユーザビリティという要素はSEOの中でより重視されるようになってきました。ユーザーに対して親切なサイトは、それだけでもクローラーからの評価が上がる傾向にあるようです。

ユーザーの目線に立ったときに、分かりにくい点や使いにくい点がないか、簡潔にわかりやすく物事を表現できているか、という点を重視して、シンプルにサイトを構築していくことが大切です。

サイトに訪問するユーザーの使いやすさのためにも、利用者の視点に立って、適切なalt属性を設定するようにしましょう。