代替テキスト(alt属性)の書き方は?SEOに関係する大事な役割

画像を記事内に挿入する時に出てくる代替テキスト(alt属性)入力欄。
何をどう入力するの?どんな意味をもつの?って思いませんか?

今回は、画像の代替テキスト(alt属性)の大事な役割や入力方法を書いていきたいと思います。

alt属性(代替テキスト)の大事な役割

代替テキスト(alt属性)とは、画像に設定されたテキスト情報のことです。

ワン太ワン太

ねえねえ、いろは。
前から気になってたんだけど、画像を入れる時のこの代替テキストって何を入れるの?


いろは

あ~これね~。てか、呼び捨てかよ…別にいんだけど。
代替テキストはalt属性とも言って、画像に設定されるテキスト情報のことだよ。
簡単に言うと画像の名前みたいな感じかな。


ワン太ワン太

へ~。で、画像に名前なんているの?

画像の代わりに代替テキスト(alt属性)が表示される

画像の代替テキストを入力しておくことで、通信障害など何らかの理由で画像が表示されい!という時に、
画像の代わりに入力しておいた代替テキストが表示されます。

表示された代替テキストによって、ユーザーがどんな画像なのか知ることができるんです。
こ、この画像が何なのか気になる…が軽減されますね。

画像の代わりに代替テキスト(alt属性)が読みあげられる

音声ブラウザなどの場合は、そこにどんな画像が表示されているのか、
ユーザーに伝えることができませんよね。

代替テキストを入力しておくことで、ブラウザが代替テキストを読みあげてくれるので、
ユーザーに表示されている画像がどんな画像なのかを伝えることができるんです。

代替テキスト(alt属性)は検索エンジンにも優しい

Web上を巡回している検索エンジンのクローラですが、画像のみの場合、画像の内容は理解できません。
代替テキスト(alt属性)を入力することで、
imgタグのaltの部分が『alt=入力した代替テキスト』になり、クラーラーも画像の内容が理解できるようになります。

この記事のアイキャッチ画像には代替テキストという文字が入っているので、
代替テキストと入力して画像検索すると表示されます。

代替テキスト(alt属性)はアンカーテキストの代わりになる

検索エンジンのクローラーは、アンカーテキスト(テキストリンク)を介してサイトを巡回します。
画像をリンクにする場合、代替テキストがアンカーテキストの代わりになります。

サイト内を巡回してもらうことで、全ての記事がインデックスされて正しく評価されるようになります。
なので、SEOにも関係してくるといえます。

クローラーはアンカーテキストの内容でリンク先のページの内容を把握します。
アンカーテキストはページの内容と一致したものにしましょう。

alt属性(代替テキスト)の記述例

スパムとみなされる場合があるので、キーワードをたくさんいれすぎるのは避けた方がいいようです。

例えば下の画像での記述例は、

女の子が虫眼鏡を覗いている

あまりよくない例では、「子ども 虫眼鏡」などとといった記述の仕方です。
これだけでは、子どもが虫眼鏡をどうしているのかがわかりませんよね。

「女の子が虫眼鏡を覗いている」と記述したほうが、どんな画像なのかイメージできますよね。
ほかにも、画像の前後の文の流れも考えて、記事の内容にあった記述にするのがいいです。

記事の内容に関係のない装飾的な画像は、imgタグのaltの部分を「alt=””」と空白にするといいです。

WordPressでは、記事内に画像を挿入する時に、代替テキストを空欄のままにしておくと勝手に「alt=””」になりますよ。

WordPressのalt属性(代替テキスト)の入力方法

WordPressでは、投稿画面でメディアを追加する時に、代替テキスト入力画面があります。

ここに入力すればいいだけなので、とっても簡単ですね。
既に記事内に追加している画像の場合は、画像の上で右クリックして下さい。

すると、下の鉛筆のようなマークがでてくるのでクリックします。

代替テキストを入力する鉛筆マークの説明

代替テキスト入力画面が現れます。

代替テキスト入力画面

ここに入力して、更新ボタンを忘れずにクリックして下さい。

ワン太ワン太

代替テキストって、大事な役割がたくさんあったんだね。


いろは説明

読者さんに優しい=クローラーにもわかりやすくなって評価されやすくなるっていうことだね