【今さら聞けない】alt属性って？SEO効果と画像へのつけ方を解説

画像にalt属性をつけることは、SEOのなどの観点からみても実はとっても大切。

Googleとユーザーに愛されるブログやサイトに育てるなら、必ず設定しておきたいチェックポイントです。

今回はalt属性のSEO効果や、画像へのつけ方についても解説していきます。 ちなみに「alt属性」は「オルト属性」と読むよ。

「alt属性」をつけ忘れていたよ〜、という人はこの記事で一緒に設定していきましょう

alt属性とは

alt属性(オルト属性)とは、そもそもどういったものなのでしょうか。

W3Cでは、alt属性(オルト属性)について以下のように定義しています。

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 element

 

ざっくり簡単に説明すると、alt属性(オルト属性)とは、画像の代わりとなるテキストのこと(ざっくりすぎ）。

もうちょい補足すると、万が一なんらかの影響で画像が表示されない場合、代替(その画像が何を表しているか)として表示される文言です。

WordPressなどでは「代替テキスト」と呼ばれることもありますよ。

alt属性をつけるメリットとSEO効果

画像にalt属性をつけることで、Googleにもユーザーにも親切なサイトやブログになります。

Googleの「検索エンジン最適化スターターガイド」では、alt属性を活用するメリットについて、以下のように記載していました。

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

 

具体的にどんなSEO効果やメリットがあるのか、くわしく見ていきましょう。

検索エンジンに画像の正確な情報を伝えられる

さすがのGoogleなどの検索エンジンでも、画像のみの情報で、その画像がどんな意味を表しているのか理解することは困難といわれています。

そこで役立つのが「alt属性」です。

alt属性をつけることで

 ユーザーにも優しい

通信状況が悪く、なかなか画像が表示されないことってありますよね。

そんな時もalt属性が役立ちます。

alt属性を設定しておくと、万が一画像が表示されない場合でも、記述したテキストを見て、画像の内容を理解することができたり、音声読み上げ機能を使用した際のテキストとしても役立ちますよ。

 画像からリンクを貼る場合にも役立つ

画像からリンクをはる場合、「altテキストが、リンクに対するアンカーテキスト(他のWebページへのリンクに表示する文章)と同様に扱われる」というSEO効果もあります。

どんなに優秀な検索エンジンであっても、画像の情報だけでは、そのリンク先がどのようなページか理解することができません。

例えばですが以下の画像には、alt属性としてあらかじめ「PCを操作する赤ちゃん」というテキストを入れてあります。

これによって検索エンジンは、画像のリンク先がどんな内容のものなのかを理解しやすくなる、ということです。

alt属性のつけ方

alt属性のつけ方はいたって簡単です。 まずはhtmlで、画像のimgタグを見つけます。

1	<img src="画像のURL" alt="画像の説明">

 

「alt=”画像の説明”」の部分に、alt属性を入れるだけです。

WordPressで入れる方法

WordPress上で入れる場合は、さらに簡単です。

※使うテーマによって仕様は異なりますが、画像をアップロードする際に出てくる「代替テキスト」と書かれている欄に入れましょう。

 

alt属性をつける時のポイント

alt属性をつけるときには、いくつかのポイントがあるのでご紹介します。

キーワードを詰め込みすぎない

alt属性にキーワードを詰め込みすぎると、検索エンジンからスパム行為と認識されて、ペナルティの対象となることがあります。

画像に関係のないキーワードは、使わないようにしましょう。

例えば、以下の画像につけたaltテキストは「alt=”スタジオでストレッチする若い女性”」です。

画像の内容になるべく忠実に、必要最低限のキーワードでシンプルに記述しましょう。

単なる装飾目的なら空欄でよい

画像が単なる装飾目的である場合は、特にalt属性をつける必要はありません。

コンテンツとしての意味がないからです。

altテキストは空欄であっても、「alt=””」は必ず記述する必要があります。忘れないようにしましょう。

画像がタイトル・見出し・リンクの場合は必ずalt属性をつける

画像がtitle要素やh要素、a要素の場合は、必ずalt属性をつけましょう。

見出しやリンクの遷移先の内容を、検索エンジンにしっかりと伝えるためです。

alt属性がついているか確認する方法

他の人から引き継いだサイトやコンテンツに、alt属性がちゃんとついているか確認したい場合は、以下の方法で確認することができます。

Googleの検証機能で確認

Googleの検証機能を使って確認する方法は簡単です。

①調べたい画像の上で右クリック→「検証」をクリック
②画面上に表示されたページのソースコードから、alt属性の記述を確認する

まとめ

内容をおさらいします。

正直なところ、alt属性をつけたからといって急に検索順位が上がったりすることはないし、とくにデメリットとなるようなこともありません。

ですが、alt属性(オルト属性)をつけることで、検索エンジンに画像の内容を正確に伝えられることはもちろん、ユーザーファーストな親切なコンテンツへと生まれ変わります。

「今までalt属性をつけ忘れていた」という人も、この機会に設定してみてくださいね。