こんにちは。サスケです。
今回はalt属性について紹介します。
alt属性は、検索エンジン・ユーザーの理解を助ける手段して有効に働きます。「alt属性」という文字を見ると難しそうですが、誰でも簡単にすぐに設定できるものなので、今回の記事を参考にぜひ取り組んでみてください。
この記事で得られること
・alt属性について理解できる
・alt属性の記述方法がわかる
目次
alt属性とは？
alt属性とは、画像の内容をテキストで記述する説明文です。
例えば、下記の画像があった場合、
alt属性は、
alt="Chromeの拡張機能「SEO meta in 1 click」"
とhtmlで記述することができます。alt属性があることで、画像の内容が何なのか検索エンジンに伝えることができます。
alt属性の効果
alt属性があることで、ユーザー、検索エンジンにとって理解しやすいサイトになります。
alt属性を設定することで、検索結果に直接影響を与えるわけではないのですが、記事コンテンツを理解する上で役に立ちます。
ユーザービリティの向上に役立つalt属性の効果についてみていきましょう。
検索エンジンへの理解
alt属性は、検索エンジンに画像がどんな内容なのかを理解するのに役立ちます。
Googleの検索エンジンは、画像を見ただけでは、画像の内容を明確に把握することができません。alt属性を設定していると画像の内容を理解しやすくなります。
Googleの画像検索を使用したことがありますよね？
alt属性を設定することで、Googleは画像を認識しやすくなっているので、画像検索した時も上位に表示されやすくなります。
例えば「東京 カフェ」で画像検索すると、下記のような結果となります。
alt属性を設定すれば、画像検索で上位表示されるというわけではないのですが、設定しておいた方が画像での上位表示は期待できます。
alt属性は画像検索によってのユーザーのサイトへの流入も期待できます。
画像の代替テキスト
alt属性は、画像の代替テキストとしても役立ちます。
通信エラーで下記の画像のように、画像が表示されない時ありますよね？
もしalt属性を設定していると、画像が表示されなくてもテキストが表示されます。
GoogleのSEOスターターガイドでも、下記のように記述されております。
画像にわかりやすいファイル名を付け、
alt属性で説明を記述します。alt属性には、なんらかの理由で画像を表示できない場合の代替テキストを指定できます。
画像が何かしらの不具合で表示されなくても、テキストがあることで、コンテンツを理解できるようになります。もちろん画像が表示されるに越したことはないのですが、インターネット環境が悪くなるなどのエラーは時々発生してしまうものなので、そんな時のためにも、alt属性があることでユーザーの理解を助けることができます。
視覚障害者への補助テキスト
視覚障害者など目が不自由な方は、インターネットで情報を理解する時、スクリーンリーダーや音声ブラウザを利用します。
もし画像にalt属性を設定していない場合は、何も読み上げられないので、画像について理解することができません。alt属性を設定してあることで、スクリーンリーダーや音声ブラウザはalt属性に設定したテキストを読み上げるので、目が不自由な方でも画像の内容を理解することができます。
alt属性のSEO効果
alt属性はSEOに効果があるかというと、間接的に効果があると言えます。
・alt属性が設定されていることで、テキストリンクのアンカーテキストとして扱われる
・Googleの画像検索時に表示されやすくなる
GoogleのSEOスターターガイドにも下記のように記述されております。
画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。最後に、画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。
画像サイトマップを使用すると、サイト上の画像の詳細情報を Googlebot に伝えられます。それによって、Google 画像検索結果でサイトの画像が見つかる可能性が高まります。このファイルの構造はウェブページの XML サイトマップ ファイルと似ています。
ユーザーにも検索エンジンにとっても、alt属性がある方が理解しやすいコンテンツになることから、間接的にSEO効果は期待できます。
alt属性の記述のポイント
alt属性に画像の内容を記述したほうがよいことは分かっていただけたと思います。それでは、どのようにalt属性を記述すればよいのか、ポイントをいくつかお伝えいたします。
画像の内容を記述する
まず、当たり前ですが、alt属性には画像の内容を記述してください。画像と関係ない内容を記述すると、逆効果になってしまうので、画像の内容が分かるような記述をして下さい。
例えば、会社の幹部メンバーの画像を載せた場合、
alt="〇〇株式会社の幹部メンバー"
と記述するといったイメージです。
キーワードを入れる。しかし詰め込みに注意
alt属性には画像検索などで上位表示されるためにも、その画像に合ったキーワードを入れたほうが良いです。ただし、必要最低限に抑えましょう。
検索結果で表示されるために、様々なキーワードをalt属性に入れてしまうと、その画像が何なのか伝わりづらくなってしまう上、Googleからスパム行為とみなされてしまう可能性もあります。
その画像が何なのか分かりやすく簡潔に記述するようにしましょう。
意味のない画像の場合は、記述なしでもOK
画像の中には、背景や真っ黒の装飾など特に意味をもたないものもあると思います。その場合は、alt属性は記述しなくて大丈夫です。
記述しなくてよいといのは、alt=""と「""」の中を空欄にするという意味です。
alt属性の記述方法
alt属性は、alt=""の「""」の中に画像の内容を記述します。
WordPressの場合は、画像を入れる時に、「代替テキスト」という項目に画像の内容を入れることで、alt属性を設定することができます。
alt属性の確認方法
自分のサイトや他のサイトでalt属性をどのように設定しているのか、確認したい場合の方法を紹介します。
ページソースを確認
ページソースを確認することで、alt属性を確認できます。方法は、下記の通りです。
①alt属性を確認したいページで右クリックをして下さい。
②「ページのソースを表示」をクリックして下さい。
③表示されたページのソースで「Ctrl+F」をクリックし、検索窓で「alt=」を入力する
④「alt=」に該当する箇所が黄色く光るので、alt属性を確認できる
Chromeの拡張機能を使用
Chromeの拡張機能である「Alt & Meta viewer」でもalt属性を確認できます。方法は下記の通りです。
①Chromeのウェブストアで「Alt & Meta viewer」を検索し、インストールする。
②alt属性を確認したいページを開く
③Chromeに入れた「Alt & Meta viewer」をクリックし、「画像のAlt表示」をクリックする
もし、alt属性を設定していたら、画像のalt表示が確認できます。
alt属性のまとめ
以上、alt属性についての内容でした。
alt属性について簡単にまとめると、下記の通りです。
・ユーザー、検索エンジンの理解を助ける
・画像検索でも表示されやすくなる
・アンカーテキストとしても働く
・必要最低限のキーワードで簡潔に記述する
alt属性を設定して、ユーザーと検索エンジンにとって優しいコンテンツにしていきましょう。
