【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

WordPress画像に代替テキスト(alt属性)設定!画像よ検索結果に出現せよ!

WordPress画像に代替テキスト(alt属性)設定!
くま太君

飾り(デザイン)の画像以外には、
代替テキスト(alt属性)は必ず入力するように、

クセを付けよう!

今回はとっても重要な、画像に付ける代替テキスト(alt属性)について、

・画像に付ける代替テキスト(alt属性)の付け方
・画像に付ける代替テキスト(alt属性)はなぜ必要か?

をご案内します。

そもそもなぜ、画像に付ける代替テキスト(alt属性)が必要かと言うと、

くま太君

SEOに効果的だから!
つまり、Googleのクローラーに引っかけてもらうことが
出来るからなんだ。
これは見逃せないね!

では、さっそく確認していきましょう。

目次

序章!画像は、文字ではありません!

くま太君

設定方法を見ていく前に、
なんで画像に代替テキスト(alt属性)を付けるのか、
簡単にお話しておくね。

ここがポイント

画像は文字ではない
そのため文字情報の代替テキスト(alt属性)が必要

かなり簡潔にいうと、これで説明は終了です。

画像に代替テキスト(alt属性)を設定していなくても、ブログが表示されない、画像が見えない、そんなことはありません。

代替テキスト(alt属性)を設定するのはベストではありますが、ウッカリ忘れてもペナルティはないんです。

くま太君

じゃあ、なんでわざわざ、みんな
画像に代替テキスト(alt属性)を付けるの?

画像は視覚から情報を得るアイテムだ!

くま太君

今は凄いAIがあるから、画像の絵面をコンピューターが認識できるけど、
日常ではまだまだ、そこまで浸透していないよね?

音声読み上げを含めたコンピューターは、画像の絵面から、情報を得られない
(画像である、としか認識できない)

目で見る事で、画像の絵面から、情報を得ることができる

ブログ記事を、より分かりやすくお伝えするために、画像をたくさん利用しますよね。

例えば、

これは何でしょうか?
赤いりんご

赤いりんご

これは何でしょうか?
赤いかじられたりんご

かじられた、赤いりんご

同じ赤いりんごでも、画像を見れば、片方は誰かに食べられちゃった!と、『見て』情報を掴むことができます。

このように画像は、視覚(イメージ)から情報を得るアイテムですよね。

でも、コンピューターは、上の2つのイメージを『画像である』としか認識できません

逆に言えば、画像の絵面を読み解くことができなければ、意味不明でただの飾りです。

画像の絵面を読み解くことができないならば、どうしたらよいのでしょうか?

画像を文字情報で現したい理由がある

くま太君

画像の視覚イメージを、文字で伝えるんだよ。

ここがポイント

視覚イメージを得られないならば、文字で情報を伝えれば良い

音声の読み上げを含めた、コンピューターの処理は、画像の絵面を読み取れません。

その処理を手助けするのが、文字情報、代替テキスト(alt属性)です。

くま太君

ブログをたくさん見てもらうには、
Googleなどの検索結果にランクインしたい!

Googleの検索結果に表示されるのは、クローラーというロボットが記事の文字を見て、検索結果に反映させるようなシステムになっている

つまりコンピューターは、記事の文字を拾って判断している、ということになります。

例えば先ほどの、かじられた、赤いりんご画像です。

赤いかじられたりんご

この画像を画面に表示するには、WEBの言語、HTMLで命令文(コード)が必要になります。

実際の画像名と異なりますが、こんな感じでコードを書いていきます。

<img src="apple-gaburi.jpg">

img src = 画像を表示するためのコード
apple-gaburi.jpg = 画像のファイル名

コンピューターはこのコードを読み取って、apple-gaburi.jpg という画像データを、画面に表示します。

くま太君

でも、これだと、コンピューターは、
画像があるな〜、としか
分からないんだよね。

そこで、画像のコードに代替テキスト(alt属性)を付けて、画像の内容をコンピューターに知らせるのです。

<img src="apple-gaburi.jpg" alt="かじられた赤いりんご" />

img src = 画像を表示するためのコード
apple-gaburi.jpg = 画像のファイル名
alt(代替テキスト)= 画像のイメージ内容

これで、apple-gaburi.jpgって画像は、かじられた赤いりんごなんだ、とコンピューターが情報を得ることができました。

そしてこれらの情報を使って、音声の読み上げやGoogleの検索結果などに、反映させていきます。

このように、代替テキスト(alt属性)を画像に設定すれば、1つの画像の情報に広がりを持たせることができますね。

では、実際にWordPressで代替テキスト(alt属性)を設定してみましょう。

代替テキスト(alt属性)はSEOに有効か?

くま太君

答えは、YESであり、NOでもある。

ブログ運営にあたって、みんなが気になるSEOについて、Q&A形式で考えていきます。

代替テキスト(alt属性)はSEOに有効か?

NO。でもYESでもある。

何故NOなのか?

見だしのh1やh2タグのように、直接的に関係している属性ではない。

では、何故YESでもあるのか?

代替テキスト(alt属性)を設定することで、ユーザビリティが良くなる。
ユーザビリティの良いサイトは、評価されやすい。

画像検索で露出ができる。

代替テキスト(alt属性)がないことでデメリットは?

特にない。現状維持。

画像検索にひかっかると何が起こる?

Googleの検索結果には、『画像検索』という項目がある。
代替テキスト(alt属性)が設定されていることで、画像検索にひっかかり、流入経路が増えることになる。
通常のGoogleの検索結果にも、画像が露出することがある。

結論としてSEOに関して、直接的な効果ではありませんが、間接的に貢献しています

場合によっては画像は目立ちますし、ブログへの流入経路を増やすチャンスでもあるので、代替テキスト(alt属性)は設定しましょう。

WordPressで代替テキスト(alt属性)の設定方法

くま太君

今回はWordPressを使うこと前提でお話するよ。
代替テキスト(alt属性)を入力する場所はここだ!

ここがポイント

『代替テキスト』欄に、画像の内容を記載する
・WordPressメニュー『メディア』で設定
・記事編集時に個別に設定

WordPress『メディア』で代替テキスト(alt属性)入力

ここがポイント

『メディア』内で設定したら、どこで画像を読み込んでも、ここで設定した代替テキスト(alt属性)が使われる。

まずは、WordPressのメニューから『メディア』をクリックしてみてください。

このページは、画像をアップロードできるページです。

試しに、画像を1つ選択して、詳細を見てみましょう。

代替テキスト(alt属性)入力場所の確認-1
代替テキスト(alt属性)入力場所の確認

下記図のように、右側にボックスが並んでいます。

  • 代替テキスト(alt属性)
  • タイトル
  • キャプション
  • 説明
  • ファイルのURL

今回入力したいのは、①の代替テキスト(alt属性)ですね。

ここに画像イメージの内容を記入します。

下記の図だと、

赤いりんご

と、代替テキスト(alt属性)を入力しました。

代替テキスト(alt属性)入力場所の確認-2
代替テキスト(alt属性)入力場所の確認

ここで入力した代替テキスト『赤いリンゴ』は、どこの編集ページでこの画像を取り込んでも、『赤いリンゴ』という代替テキスト(alt属性)情報が反映されます。

ちなみに、各ボックス内の意味はこんな感じです。

代替テキスト(alt属性)Googleなど含め、コンピューターがWEB上で、文字情報として認識できる
タイトル画像のタイトル。入力しない場合、画像のファイル名になる
キャプション画像の下などに表示される説明文
説明WEBに表示されない項目で、自分のメモとして利用できる
ファイルのURL画像のURL

ちなみに、キャプションは、画像の近くに入るテキストのことです。

下記のリンゴ画像のキャプションは、赤枠で囲った部分『赤いかじられたりんご』です。

くま太君

キャプションって、こういうやつ!
画像の簡単なタイトルや説明だね。

キャプションのイメージ

記事編集画面で代替テキスト(alt属性)入力

ここがポイント

画像個別に代替テキスト(alt属性)を設定したら、その画像のみに反映される。
『メディア』で代替テキスト(alt属性)が設定されていても、上書きされるが、他の同じ画像は、変更されない。

くま太君

記事の編集画面で、画像を選択してみよう。

代替テキスト(alt属性)は、記事の編集画面からも入力することができます。

まず、普段通りに画像を記事内に取り込みます。

そして、その画像を選択してみてください。

当ブログは、WordPressテーマSWELLを使用しています。
そのため、画像はSWELLでのイメージです。

画像ブロックの『設定』欄に、最初から代替テキスト(alt属性)が入力されています。

くま太君

『メディア』内で、代替テキスト(alt属性)を設定したからだよ。

これは、『メディア』で画像をアップロードした時に、一緒に代替テキスト(alt属性)を入力したからです。

もし、『メディア』で代替テキスト(alt属性)を入力していなければ、空欄になっています。

代替テキスト(alt属性)入力場所の確認-記事編集画面-1

そしてこの代替テキスト(alt属性)は、記事編集画面上で、変更することができます

同じ画像を読み込み、下の画像の代替テキスト(alt属性)を、

赤いかじられたりんご → トマトじゃないよ

と、変更しました。

ここで修正した代替テキスト(alt属性)は、その記事の、変更した画像にのみ反映します。

代替テキスト(alt属性)入力場所の確認-記事編集画面-2

つまり、下の画像の代替テキスト(alt属性)を変更しても、上の画像の代替テキスト(alt属性)には、影響しません。

きちんと変更されているかは、HTMLのコードで確認すると早いです。

HTMLで代替テキスト(alt属性)を確認してみよう

くま太君

ページのソース(HTML)はWEBページを表示するための、
基本的なWEB言語だよ。

HTMLソースを確認するなら、ブラウザで

・ウェブ開発ツールを使う
・右クリック → ページのソースを表示

HTMLソースだけサクッと見るなら、プレビューや公開済みのページで、右クリック → ページのソースを表示、が楽ちんです。

htmlソースの見方-1
右クリックでソースの表示

ブラウザにHTMLソースが表示されたら、代替テキスト(alt属性)を検索してみましょう。

・Windows「Ctrl」キー+「F」キー
・Mac「Command」キー+「F」キー

上記ショートカットで、検索ボックスを出すことができます。

htmlソースの見方-2
HTMLソース

ここに代替テキスト(alt属性)のテキストを入力して、検索します。

下記の図ならば、

(上)赤いかじられたりんご
(下)トマトじゃないよ

で、それぞれ検索すると、

代替テキスト(alt属性)入力場所の確認-記事編集画面-2

下記のような、HTMLコードを見つけることができました。

実際のHTMLコードでは、サイズなどたくさん情報がありましたが、最低限必要な部分になるように削ったコードです。

① <img src="apple-2.png" alt="赤いかじられたりんご">
② <img src="apple-2.png" alt="トマトじゃないよ">

②のコードは記事内で個別に『トマトじゃないよ』と書き換えましたよね。

①と②では、『apple-2.png』という同じ画像なのに、『alt』代替テキスト部分は、きちんと変更されていることが、確認できました。

代替テキスト(alt属性)の書き方

くま太君

分かりやすく、簡潔に!
これ、鉄則!

ここがポイント

・イメージの内容を正確に
・簡潔に
・キーワードを並べすぎない

これだけ注意しておけばOKです。

下記のりんご画像を素材に、お話していきます。

赤いかじられたりんご

イメージの内容を正確に書く

くま太君

簡潔に内容が伝わるように書くのがポイント!

上記図はリンゴのイメージ画像ですよね。

これを見て、何を思いますか?

・リンゴ
・赤い
・食べられてる
・かじられてる
・葉っぱ付き

私は以下のように、代替テキスト(alt属性)を付けました。

・かじられた赤いりんご

簡潔に内容を伝える文言です。

・かじられた葉っぱ付きの赤いりんご

でも良いですが、少々長いです。

ただのリンゴではなくて、『かじられた』部分が最も特徴的なので、そこに焦点を当て、代替テキスト(alt属性)を付けました。

簡潔に書く

くま太君

無駄に長くても分かりにくくなるよね。
シンプルに分かりやすく伝えるのが重要!

緑の葉っぱが1つ付いた赤くて丸いツヤツヤの誰かに3口かじられた1つのリンゴ

思い付く限り網羅した、ダメな例の代替テキスト(alt属性)です。

くどくて、不親切ですよね。

くま太君

え?何?
今何て言った?

ってなりませんか?

キーワードも無理に詰め込んだ感じにもなるので、

・不親切な表現
・Googleでマイナス評価の可能性あり

という状態になるので、代替テキスト(alt属性)は、簡潔に書きましょう。

キーワードを並べすぎない

くま太君

ここは注意!
キーワードを並べ過ぎちゃ、マイナス評価になる!

キーワードの並べ過ぎ問題は、かなり昔からあります。

代替テキスト(alt属性)に限った話ではないですが、かつて、Google評価を上げたいがために、無駄にキーワードを詰め込むことが乱立しました。

WordPressなどのCMSが多く使われるようになる前は、HTMLコードを編集することで、WEBサイトを作成していました。
そのため、サブリミナル効果のごとく、不必要に『隠しキーワード』を乱立させて作るサイトが多かったのです。

これでスパム判定、マイナス評価にあたり、Googleからの評価が下がるということになりますので、気を付けましょう。

例えば、こんな感じの付け方です。

果物,リンゴ,赤い,食べる,かじる,丸い

下記の文言もある意味、キーワードの詰め込みですよね。

緑の葉っぱが1つ付いた赤くて丸いツヤツヤの誰かに3口かじられた1つのリンゴ

あくまで、自然に、簡潔に、代替テキスト(alt属性)を付けるのがコツです。

デザインの画像には代替テキスト(alt属性)は不要!

くま太君

飾り、デザイン的な画像には
代替テキスト(alt属性)は付けないよ。

まずはなぜ、ブログに画像を使うのか、考えてみてください。

  1. 記事の内容を、分かりやすく伝えるため
  2. 記事に彩りを与える、デザインとして

という意味がありますよね。

くま太君

画像に伝えたいことがあれば、
代替テキスト(alt属性)を付けるんだね。

このことから、記事の内容を分かりやすく伝えるための画像には、代替テキスト(alt属性)が必要です。

そして、デザインとしての画像は、内容を伝えるためのアイテムではないので、代替テキスト(alt属性)を付ける必要はありません

代替テキスト(alt属性)を付けない画像イメージ
デザインとしての画像

上記図の①・③は、デザイン画像ですね。

②は何か喜び的なものを現していそうですが、この画像だけでは何のことか意味が通じませんよね。

このようなデザイン的な画像には、代替テキスト(alt属性)は不要、ということです。

ただし!

ご自分で描いたデザインイラストや、撮影した写真をブログに載せて紹介するなら、代替テキスト(alt属性)を付けておきましょう。

代替テキスト(alt属性)がGoogleのクローラーに拾われ、Google検索結果に表示される場合があります。

作品を見てもらう大チャンスですよね。

代替テキスト(alt属性)の必要性

くま太君

代替テキスト(alt属性)を設定する
必要性を確認してみるね。

ブログで使用する画像に、代替テキスト(alt属性)を設定したことにより受ける効果は、

  1. 音声で読み上げられる
  2. 画像が表時されない時の、代わりのテキストになる
  3. 画像がGoogleの検索結果に表示される

『代替テキスト』と言われるくらいなので、上記①と②はイメージしやすいかもしれませんね。

そして③の、画像がGoogleの検索結果に表示されることが、ブロガーさんには特に嬉しい効果です。

音声で読み上げられる

くま太君

今の音声読み上げ機能って、
かなり正確ですごいよね。

代替テキスト(alt属性)を入力しておくことにより、スマホなどの音声読み上げ機能で、画像イメージを伝えることができます。

代替テキスト(alt属性)がない場合、

・画像
・イメージ

などと読み上げられ、画像の内容がわかりません。

代替テキスト(alt属性)があれば、

かじられた赤いりんご

と、読み上げられるので、イメージがより伝わりやすくなります。

画像が表時されない時の、代わりのテキストになる

くま太君

例えば、通信状況が悪くて、画像が読み込めないときなど
代替テキスト(alt属性)が、文字で代わりに表示されるんだ。

・通信状態が悪く、画像が読み込めない
・画像ファイルが壊れていて表示できない

こんな時は、代替テキスト(alt属性)がない場合、空欄、またはその場所が四角で囲われて、何も表示されません。

その無機質な状態を回避するために、代替テキスト(alt属性)があれば、画像が表示されなくても、文字として表示してくれます。

代替テキスト(alt属性)がない時の表示

この空欄何?という不満を、回避することができます。

画像がGoogleの検索結果に表示される

くま太君

Google検索結果に表示された画像をクリックしたら、
記事に飛ぶよね。
機会を逃さないように、代替テキスト(alt属性)を入力しておこう!

代替テキスト(alt属性)は、画像のイメージを文字で伝えます。

Googleのクローラーは、画像の絵面を認識することができません。

ですが、代替テキスト(alt属性)は、HTML内で文字化されているので、クロールすることができます

Google検索結果にも、『画像』項目がある位なので、代替テキスト(alt属性)の重要性はお分かりいただけるのではないでしょうか?

Google画像検索
Google画像検索結果

Google検索結果での見え方

くま太君

代替テキスト(alt属性)を設定しておけば、
画像検索で検索結果に登場できるかもしれないよ!

ここがポイント

代替テキスト(alt属性)を付けておけば、こんなチャンスが!
・Googleの検索結果に表示される
・Google画像検索に表示される

下記の画像は、Google検索の結果に表示された画像です。

たまに、検索結果に、画像が並んでいるのを見かけますよね。

代替テキスト(alt)設定で画像がGoogle検索結果に反映
Google検索結果に反映

さらに、下記の画像は、Googleの画像検索結果です。

この検索では、画像の結果のみ表示します。

画像検索で「エディターAC」と検索しました。

代替テキスト(alt)設定でGoogle画像検索結果に反映
Google画像検索結果に反映

ちなみに、これら画像が使われている記事はこちらです。

デザインAC(エディターAC)|使い方をサクッと徹底解説!

上記図のように、記事内で使っている画像に代替テキスト(alt属性)を付けているので、画像検索の1ページ目上部にこれだけ表示させることができました。

画像検索結果の画像をクリックすれば、その記事に飛ぶので、ここからも、ユーザーの流入を狙うことができます。

このように、画像検索結果も大事な流入元なので、代替テキスト(alt属性)は付けて置いた方が断然お得です。

ぜひ代替テキスト(alt属性)を入力しておきましょう。

今回のまとめ。画像に付ける代替テキスト(alt属性)は必須!

くま太君

代替テキスト(alt属性)の入力は、
必須項目だった!

画像に代替テキスト(alt属性)を必ず付けることを、クセ付けましょう。

代替テキスト(alt属性)を画像に付することで、

  1. 音声で読み上げられる
  2. 画像が表時されない時の、代わりのテキストになる
  3. 画像がGoogleの検索結果に表示される

というような効果を得ることができます。

読み上げや画像の代わりに表示されるのは、ユーザビリティの観点から、効果的です。

また、画像がGoogleの検索結果に表示されれば、通常のGoogleインデックス+αの機会を得られるので、流入経路を増やすことにもつながりますよね。

代替テキスト(alt属性)の付け方は、

内容を分かりやすく、簡潔に書く!

これだけ押さえておけばOKなので、難しいことではありません。

初めの頃は忘れがちな代替テキスト(alt属性)ですが、ぜひ活用して、ブログの露出・より分かりやすいブログを目指していきましょう!

最後までお読みいただき、ありがとうございました。

\ SWELLだと、設定も編集もサクサクできる! /
WordPressテーマ『SWELL』の詳細は公式サイトで!

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次