Alt属性は、画像の代替テキストを表示するための属性のことで、SEOにおいて重要な要素の1つです。しかし、そもそもAlt属性がどのようなものか分からなかったり、適切な記述方法が分からなかったりする人は多いのではないでしょうか。
そこで本記事では、Alt属性の概要や記述方法を解説します。また、Alt属性を記述する際の細かなコツや、SEOとの関係性も紹介します。SEOを少しでも有利に進めたい方は、ぜひ参考にしてください。
目次
Alt属性とは?
まずは、Alt属性の概要から解説します。Alt属性(オルト属性)とは、画像の代替テキストを表示するための属性のことです。WordPressの画像入稿時に、代替テキストと表示されている部分がAlt属性になります。
Alt属性は、input要素、img要素で画像を入稿する際に使用されます。Alt属性が記述されていない画像コンテンツは、何らかの原因で画像が表示されなかった際に、検索エンジンやユーザーに対して画像の意味が表示されません。しかし、Alt属性が記述されていることで、画像が表示されなかったとしても、画像の入稿部分には代替テキストが表示されるようになります。
関連記事
・SEOとは?SEO対策の基礎知識と具体的な方法を詳しく解説
Alt属性とtitle属性の違い
Alt属性は、title属性と混同されることが多い属性です。たしかにそれぞれの役割が似ているため、違いを適切に理解する必要があります。それぞれの違いを簡単に記します。。
・ Alt属性:画像自体を表現するテキスト
・ title属性:画像や画像の説明を補足するテキスト
つまり、Alt属性は画像の内容を表すために使用されるテキストであり、title属性は画像の特徴を補足するためのテキストになります。また、Alt属性は画像のみしか設定できないものの、title属性は画像以外のテキストでも設定可能です。
たとえば、画像が表示されており、その画像にマウスホバー(カーソルを合わせること)をしたとします。その際、画像の上にツールチップと呼ばれるポップアップが表示されることがありますが、そこでtitle属性が使用されています。したがって、Alt属性は画像のみに設定し、title属性は画像以外の吹き出しなどのテキスト要素にも設定できるという違いがあることを理解しておきましょう。
Alt属性の記述方法
Alt属性の記述方法は、非常にシンプルです。下記のHTMLを入稿するだけで、Alt属性が表示されます。
<img src=”画像URL” alt=”〇〇“>
上記の〇〇の部分にテキストを入れれば、それだけでAlt属性としての役割が果たされます。なお、WordPressを使ってWebサイトを運営されている場合、上記のHTMLを記述しなくとも、代替テキスト部分にテキストを入れれば、それがAlt属性として表示されます。
Alt属性を記述する際のコツ
ここまで、Alt属性の概要や記述方法を解説してきました。ここからは、Alt属性を記述する際の下記2つのコツを解説します。
・ 画像の特徴を記述する
・ キーワードを詰め込まない
それぞれ順番に見ていきましょう。
画像の特徴を記述する
まず、Alt属性は画像の特徴を記述することが大切です。画像の特徴以外のテキストが記述されているAlt属性もしばしば見られますが、それらは不適切と言えます。たとえば、本文内に富士山の画像を入稿したとします。この場合のAlt属性としては、以下の内容が考えられます。
<img src=”画像URL” alt=”富士山“>
ここでは、「富士山」という画像の特徴を記述したAlt属性を設定しています。ではなぜ、画像の特徴以外のAlt属性を設定しているケースが見られるかというと、本文と関係のない画像を使用しているケースがあるためです。
たとえば、SEO対策について解説している本文であるにもかかわらず、富士山の画像を使用しているとします。この場合、Alt属性をSEO対策にするべきか、富士山にするべきか、本文と関係のない画像を使っているから迷ってしまうのです。
したがって、Alt属性は画像の特徴を記述することが大切ではあるものの、前提として、本文と関係性のある画像を入稿するようにしましょう。
キーワードを詰め込まない
次に、Alt属性にはキーワードを詰め込まないことが大切です。SEOはキーワードに対して対策をするものであるため、キーワードを詰め込んだほうが、効果があると考える人も多いでしょう。しかし、あくまで画像の特徴を表すキーワードのみを記述しましょう。たとえば、冬の富士山の山頂の景色が写っている画像があったとします。この場合、Alt属性は以下の内容が考えられます。
<img src=”画像URL” alt=”秋の富士山の山頂“>
非常にシンプルな内容に設定しています。そもそも、Alt属性の記述目的は、画像が表示されなかった場合の代替テキストを表示させるためです。SEO対策で上位を取るためではありません。
上記のことを理解したうえで、キーワードは画像の特徴を表したテキストのみで記述するようにしましょう。
Alt属性の記述とSEOの関係性
ここからは、Alt属性とSEOの関係性を紹介します。
・ 画像の内容を検索エンジンに伝える
・ 直接的なSEO効果はない
それぞれ順番に見ていきましょう。
画像の内容を検索エンジンに伝える
Googleを含む検索エンジンのロボット(クローラー)は、画像自体を読み込むことはできません。画像に設定されているAlt属性やtitle属性、画像周りのキャプションなどの情報を参考に画像の内容を理解しています。
そのため、Alt属性が記述されていれば、検索エンジンの画像の内容を理解しようとする行為を手助けできます。その結果、Googleの画像検索などで上位表示できる可能性が高まります。画像検索経由での流入数がアップすれば、自然検索結果での上位表示も狙えるでしょう。
関連記事:クローラーとは? 検索エンジンの仕組みを解説します!
直接的なSEO効果はない
Alt属性は、直接的なSEO効果はありません。つまり、Alt属性が記述されているからといって、直接的に上位表示できる可能性が上がるわけではないということです。裏を返せば、Alt属性が記述されていなくても、検索順位が落ちるわけではありません。
関連記事:SEO対策をまずは自分でやるには?初心者がすぐに取り組める手法を解説!
装飾が目的ならAlt属性は記述なしで構わない
先ほど、Alt属性には直接的なSEO効果はないことを解説しました。実際、本文内に使用する画像を装飾目的としているのであれば、Alt属性の記述はしなくても構いません。なぜなら、装飾目的の画像の内容は検索エンジンに伝える必要はなく、ユーザーからしても、代替テキストが表示されていなくても本文の内容とは関係がないためです。
しかし、PDFを入稿したり、文章の補完として入稿する画像だったりする場合は、適切にAlt属性を記述する必要があります。したがって、どのような画像を入稿するのか、その画像の目的は何であるかによって、Alt属性の記述の有無を判断しても良いでしょう。
Alt属性が表示されないときの対処法
ここまで、Alt属性とSEOの関係性などを解説してきました。しかし、実際にAlt属性を設定した場合でも、表示されないというケースがあります。仮にそのようなケースが起きた場合、Alt属性が適切に記述されていないのが原因であることがほとんどです。その場合には、Alt属性が下記の〇〇の部分に正しく記述されているかを確認しましょう。
<img src=”画像URL” alt=”〇〇“>
WordPressであれば、代替テキストの部分に記述すれば表示されるようになります。
Alt属性を記述するユーザー側のメリット
ここまで、Alt属性の概要などを解説してきました。ここからは、Alt属性を記述するユーザー側のメリットを紹介します。
・ 画像が表示されなくても内容を理解できる
・ 音声読み上げ機能で内容を理解できる
それぞれ順番に見ていきましょう。
画像が表示されなくても内容を理解できる
ユーザー側の通信環境が悪いなど、何らかの原因で画像が表示されない場合でも、Alt属性が記述されていれば代替テキストが表示されます。つまり、画像内容の補完ができるということです。特に、画像を用いてコンテンツを解説したい場合にAlt属性を記述すれば、表示されなくても内容の理解を促進できるでしょう。
音声読み上げ機能で内容を理解できる
Alt属性は、音声読み上げ機能でも読み込まれます。特に、視覚障がいなどを持っている人は音声読み上げ機能を利用しますが、音声読み上げ機能では画像の内容自体を読み込むことはできません。Alt属性が設定されていれば、画像内容を代替テキストで読み上げるので、内容理解を手助けすることが可能です。
まとめ
本記事では、Alt属性について解説をしました。Alt属性は、画像の内容を表すために使用される属性のことです。Alt属性が記述されていることによって、検索エンジンに対して適切に画像の内容を伝えられると同時に、画像検索からの流入数のアップが見込めるようになります。
直接的なSEO効果はないものの、設定しておいて損はない項目と言えるでしょう。まずは、画像の特徴を表したAlt属性を設定することから始めてみてはいかがでしょうか。