ぱっとカエルニュース

2021.04.05

ぱっとカエル小技「SEOにも効果あり!画像の内容を表す『代替テキスト』」

こんにちは!岡山・倉敷でホームページ作成なら”ぱっとカエル”
カエルくんのホームページブログです。

『代替テキスト』とは?

以下のように、画像が表示されない時に代わりにテキストが表示されているのを見たことがありますか?

「これが代替テキストです」

画像の代わりに表示されているこのテキストを「代替テキスト」や「alt属性」と言います。
画像などの非テキストコンテンツに対して設定することで、テキストとしての情報を閲覧者や検索エンジンなどに提供することができます。

たとえば下のカエルくんの画像に対して、代替テキストに「ぱっとカエルマジシャンのカエルくん」と設定しています。
この設定で、画像だけでなく画像の説明テキスト(「ぱっとカエル~(以下略)」)もセットでデータとして提供できます。

ぱっとカエルマジシャンのカエルくん

代替テキストの役割とメリット

代替テキストは主に3つの役割を担っています。

1.画像が表示されなかった時に、代わりに表示されるテキスト

ネットワーク上の問題や画像を誤って削除してしまったなどで、画像が表示されない時があります。
しかし代替テキストを設定していれば、以下のように代替テキストが表示されるので、閲覧者にどのような画像なのかを伝えることができます。

代替テキストの表示例


2.視覚ハンデへの補助テキスト

視覚にハンデを持つ方はスクリーンリーダーや音声ブラウザなどを利用してWEBの閲覧をします。
これらの音声補助ソフトではテキストコンテンツを読み上げてくれます。

しかし、画像については音声で伝えようがありません。
そこで活躍するのが代替テキストです。
スクリーンリーダーや音声ブラウザは、画像に設定された代替テキストを読み上げて閲覧者に伝えてくれるのです。

代替テキストを設定する時はスクリーンリーダーなどで読み上げられることを考慮して、閲覧者が画像の内容を理解するのに役立つテキストを設定しましょう。

画像と関係ないキーワードをぎゅうぎゅうに詰め込んだ代替テキストはNGですよ。
的確な代替テキストを設定して、Webアクセシビリティの高いWEBページを目指しましょう!

ワンポイント

<Webアクセシビリティ>
視覚や聴覚、PCやスマホの操作にハンデを持つ人たちが、問題なくWebサイトに掲載された情報にアクセスできるようにすること。


3.検索エンジンのクローラーに画像の情報を伝えてSEOアップ

検索結果の上位に表示されるのには、サイトの情報を検索エンジンのクローラーに伝えることが重要です。
しかし、クローラーは画像の内容を理解することができません。
せっかく良い画像をたくさん掲載していても、クローラーからは「何も無し」と評価されてしまうのです。

ですが、クローラーも代替テキストの情報は理解することができます。
代替テキストに画像のキーワードなどを設定することで、画像の内容をクローラーに伝えることができ、結果としてSEOの向上が期待できます。

代替テキストの設定方法

画像設定画面の「代替テキスト」にテキストを入力して「OK」をクリック!

代替テキストの設定画面

とても簡単なので、代替テキストを設定したい画像があったらお試しください 

ワンポイント

画像をサーバーブラウザーで選択し直すと「代替テキスト」もリセットされます。
代替テキストを残しておきたい時は変更前にコピーしておきましょう。

ブログ記事などで使用できる「絵文字」にも代替テキストを設定できます絵文字にも代替テキストを設定できます
絵文字をドラッグで選択し、「イメージ挿入/編集」ボタンをクリックすると設定画面(イメージプロパティ)を表示できます。

絵文字に代替テキストを設定する


岡山で簡単に更新できるホームページCMSをお探しなら“ぱっとカエル”
ご要望があればサンプルサイトもすぐにご用意できますので、お気軽にお問い合わせください☆

ページトップへ