オススメ情報

alt属性とは?効果と設定方法を解説

alt属性とは?効果と設定方法を解説

この記事をご覧のみなさんは、alt属性をご存知ですか?

一度は耳にしたことがあっても、詳しい意味まで完璧に理解できている人は多くありません。

そこで今回は、「alt属性とは?効果と設定方法を解説」と題して、alt属性の定義を明らかにするとともに、alt属性を設定する理由・効果も解説させていただきます。

 

SEO対策とは?その本質と基本的な方法

 

alt属性とは?

 

alt属性とは、「通信が不安定であるなど何らかの理由で画像が表示できない時に、代替テキストを指定するために使われるもの」を表します。

alt属性で設定した代替テキストは、音声ブラウザやスクリーンリーダーによって読み上げられます。

 

HTMLタグのimg要素には、以下のように記述します。

〈img scr=“/img.pngなどの画像のパスを記述します” alt=”画像の代わりとなるテキストを入力します” /〉

 

そもそもalt属性という用語は、「代替テキスト」を意味する「alternative text」に由来していて、「オルト属性」と読みます。

W3C(WEBで利用される技術の標準化をすすめる国際的な非営利団体)には、下記のように定義がされています。

「画像をWEBサイトに掲載する場合は、その画像が何を表しているのかをalt属性に指定すること。また、注意点としては画像の視覚的な特徴までは必要ないが画像と同じ内容を設定する。」

 

このようにalt属性は、非テキストコンテンツの代替テキストのWebアクセシビリティ対応として、特に高齢者や視覚に障害のある方向けに活用されます。

そして正しく記述することで、コンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。

Webアクセシビリティ対応とSEO対策を両方とも行いたいとお考えの企業の方は、alt属性で画像の代替テキストを設定するようにしましょう。

 

また、ここで言うアクセシビリティ(accessibility)とは、WEBサイト上における、情報やサービスへのアクセスのしやすさのことです。

アクセシビリティが向上することで、サイト運営者やユーザーにとって、いくつかのメリットがあります。それは、WEBサイトが年齢や性別、障害の有無、さらには利用環境の状況にかかわらず、誰もが利用しやすいものになるということです。

これが結果として、新規顧客の獲得や利益の増加などにつながります。

このように、WEBサイト上でアクセシビリティが確保されていると、より多くのユーザーに情報発信をすることができ、多方面に便益が生まれます。

 

一方、いくつかデメリットもあります。それは、ページのデザインがシンプルになり過ぎてしまったり、テキストが平素になってしまうことです。

他にも、アクセシビリティを検証するのに時間とコストがかかるということが問題点として挙げられます。

しかし、現代にはアクセシビリティが確保されているか否かをチェックする便利なツールがあります。

ツールを上手く活用することで、WEBサイトのアクセシビリティがきちんと高められているかどうか検証することができるようになり、誰もがアクセスしやすいWEBサイトを構築することができます。

 

titleタグからはじめるSEO対策

 

そしてalt属性には、よく似た概念としてタイトルタグというものがあります。

alt属性が画像の代替テキストであるのに対し、title属性は画像以外のテキストなどを補足説明します。

そんなタイトルタグ(Title tag)は、WEBサイト名や各WEBページのタイトル部分を記述するHTMLタグのことです。

 

HTMLのソースでは以下のように表されます。

 〈title〉○○〈/title〉

 

上記のように、タイトルを〈title〉〈/title〉で囲んで記述すればタイトルタグを設定することができます。

○○の部分が検索エンジンの検索結果画面で説明文の上部に表示されるタイトルに該当します。

そんなタイトルタグは一番目に付く場所に位置するため、ユーザーにサイトをアクセスしてもらえるかどうかを左右します。

それだけでなく、Googleを始めとする検索エンジンによってサイトが上位に表示されるかどうかに大きく影響します。

 

そのため、タイトルタグを設定する際には幾つかの注意点に気を付ける必要があり増す。以下の通りです。

・長すぎて「・・・」と表示されないように、文字数を30字前後に収める。

・タイトルタグが重複しないようにする。

・ユーザーの検索意図を考慮する。

 

このようにタイトルタグは、ユーザーと検索エンジンの両方にページの内容を伝える役割を担います。

そのため、ユーザーの利便性とSEOの両面で最適化したいとお考えのサイト運営者は、重要なキーワードや訴求したい内容をタイトルの中に盛り込むようにしましょう。

 

h1タグの見直しは、すぐに効くSEO対策

 

alt属性を設定する理由・効果

 

alt属性とは何か明らかになったところで、続いてalt属性を設定する理由と効果について見ていきましょう。

alt属性で画像の代替テキストを設定するべき理由は大きく3つあります。

 

1.通信速度が不安定なことが原因で正しく表示されない画像の意味を正しく伝えるため。

2.視覚障害のある方や高齢者にも画像の意味を正しく伝えるため。

3.検索エンジンのクローラーに画像の意味を正しく伝えるため。

 

このようにalt属性は、画像の内容を検索エンジンとユーザーの両方に正確かつわかりやすく伝える役割を担います。

そんなalt属性を設定するとWebアクセシビリティが向上してSEO効果につながります。

そもそもSEO(Search Engine Optimization)とは、「検索エンジン最適化」とも呼ばれます。

Googleを始めとする検索エンジンにおいて、検索結果ページの上位表示の順位に、自社のWEBサイトが表示されるように工夫することで、そのための技術やサービスを言います。

 

そんなSEOには幾つかメリットがあります。以下の通りです。

・無料または低コストで始められる。

・サイトが上位に表示されると、ブランディング効果を得られる。

 

反対にデメリットもあります。以下の通りです。

・効果が現れるまでに時間がかかる。

・検索エンジンのアップデートやアルゴリズムに左右セットされる可能性がある。

 

そしてSEOは大きく2種類に分類されます。以下の通りです。

内部施策 Webサイト内を改善すること。代表例はコンテンツマーケティング

外部施策 Webサイトの被リンクの質と量を向上させること。

 

このようにSEOで成果を上げるためには、内部施策と外部施策を講じる必要があります。その中でも特に、ユーザーの目線に立って良質なコンテンツを提供し続けることが何より大切です。

その際、SEO対策したい検索キーワードを文脈に沿った形でコンテンツに含ませると効果的です。実際にGoogleもそうしたWebサイトを高く評価します。

同時にユーザーには、自社の商品やサービスを知ってもらう機会を与え、最終的には見込み顧客をファン化させることができます。

Webサイトを検索順位の上位に表示させることで、集客効果を得たりコンバージョン数を増やしたりしたいとお考えのサイト運営者は、SEO対策を講じるようにしましょう。

 

内部SEOと外部SEOの違いは?

 

alt属性の設定方法

 

alt属性を使った代替テキストは、アクセシビリティ対策の一つとして、画像を始めとする非テキストコンテンツを代替テキスト対応させる必要があります。

その際、コンテンツ全体の文脈において意味が通るように入力する必要があります。

そもそも、代替テキスト(Alternate text)とは、WEBサイト内に含まれている動画、画像などが何らかの原因で表示されなかった時、音声ブラウザを使用する時に代わって表示するテキストのことです。

そんな代替テキストの用途は、ブラウザやテキストブラウザ、点字ディスプレイ、クローラーなど多岐にわたります。

 

ホームページの表示を主要ブラウザで確認していますか?

 

特に「スクリーンリーダー」を活用すると、コンテンツが音声に変換され、代替テキストが読み上げられます。

これは実際に、視覚障害のある方や接続の問題でWebページの画像を見ることができないユーザーの役に立っています。

また代替テキストは、画像テキストのアンカーテキストとしても機能します。

 

HTMLのタグにalt属性を追加することで設定します。

<img src=”example.png”alt=”○○”>であれば、○○の部分に代替テキストを記述します。

 

その際にはいくつかの注意点があります。以下の通りです。

・キーワードを盛り込まない。

・正確に記述する。

・簡潔にまとめる。

 

これらを一切気に留めず、画像の内容に合わない代替テキストを記述すると、スパムと認識されてしまいます。

また代替テキストは、Webページにある全ての画像に追加する必要はありません。

このように代替テキストはあらゆる分野で有用性が高く、SEO対策としても重要視されます。正しい記述の方法によって、適切な代替テキストを追加することが求められます。

 

その上で、画像には幾つか種類があります。以下の通りです。

・テキスト画像

・写真

・アイコン画像

・グラフ画像

 

このようにalt属性の種類は多岐にわたります。

また、正しく記述することでコンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。

画像の意味を正しく伝えつつ、最終的にSEO効果へつなげたいとお考えのサイト運営者は、alt属性を設定するようにしましょう。

 

リダイレクトとは?意味と正しい方法について解説

 

まとめ

今回は、alt属性の定義を明らかにするとともに、alt属性を設定する理由・効果、設定方法をも解説させていただきましたが、いかがでしたでしょうか。

alt属性は、「何らかの理由で画像が表示できない時に、代替テキストを指定するために使われるもの」だということがわかりました。

 

主に、非テキストコンテンツの代替テキストのWebアクセシビリティ対応として、特に高齢者や視覚に障害のある方向けに活用されます。

そして正しく記述することで、コンテンツの情報を適切に伝えることができるだけでなく、検索エンジンのクローラーに画像の情報を伝えてSEO効果をもたらします。

Webアクセシビリティ対応とSEO対策を両方とも行いたいとお考えの企業の方は、alt属性で画像の代替テキストを設定するようにしましょう。

 

GTM(Googleタグマネージャ)とは?活用メリットや機能・導入方法を紹介

 

【株式会社セレクト・ワン】

東京本社:03-5953-7160

長野営業所:026-474-5333

お問い合わせはこちら

 

お問い合わせ
コンテンツマーケティング・SEOコンサルティング・ホームページ制作の際は、
お気軽にご相談ください。