くま太君飾り（デザイン）の画像以外には、
代替テキスト（alt属性）は必ず入力するように、
クセを付けよう！
今回はとっても重要な、画像に付ける代替テキスト（alt属性）について、
をご案内します。
そもそもなぜ、画像に付ける代替テキスト（alt属性）が必要かと言うと、
くま太君SEOに効果的だから！
つまり、Googleのクローラーに引っかけてもらうことが
出来るからなんだ。
これは見逃せないね！
では、さっそく確認していきましょう。
序章！画像は、文字ではありません！
くま太君設定方法を見ていく前に、
なんで画像に代替テキスト（alt属性）を付けるのか、
簡単にお話しておくね。
画像は文字ではない
そのため文字情報の代替テキスト（alt属性）が必要
かなり簡潔にいうと、これで説明は終了です。
画像に代替テキスト（alt属性）を設定していなくても、ブログが表示されない、画像が見えない、そんなことはありません。
代替テキスト（alt属性）を設定するのはベストではありますが、ウッカリ忘れてもペナルティはないんです。
くま太君じゃあ、なんでわざわざ、みんな
画像に代替テキスト（alt属性）を付けるの？
画像は視覚から情報を得るアイテムだ！
くま太君今は凄いAIがあるから、画像の絵面をコンピューターが認識できるけど、
日常ではまだまだ、そこまで浸透していないよね？
ブログ記事を、より分かりやすくお伝えするために、画像をたくさん利用しますよね。
例えば、
- これは何でしょうか？
-
赤いりんご
- これは何でしょうか？
-
かじられた、赤いりんご
同じ赤いりんごでも、画像を見れば、片方は誰かに食べられちゃった！と、『見て』情報を掴むことができます。
このように画像は、視覚（イメージ）から情報を得るアイテムですよね。
でも、コンピューターは、上の2つのイメージを『画像である』としか認識できません。
逆に言えば、画像の絵面を読み解くことができなければ、意味不明でただの飾りです。
画像の絵面を読み解くことができないならば、どうしたらよいのでしょうか？
画像を文字情報で現したい理由がある
くま太君画像の視覚イメージを、文字で伝えるんだよ。
視覚イメージを得られないならば、文字で情報を伝えれば良い
音声の読み上げを含めた、コンピューターの処理は、画像の絵面を読み取れません。
その処理を手助けするのが、文字情報、代替テキスト（alt属性）です。
くま太君ブログをたくさん見てもらうには、
Googleなどの検索結果にランクインしたい！
つまりコンピューターは、記事の文字を拾って判断している、ということになります。
例えば先ほどの、かじられた、赤いりんご画像です。
この画像を画面に表示するには、WEBの言語、HTMLで命令文（コード）が必要になります。
実際の画像名と異なりますが、こんな感じでコードを書いていきます。
<img src="apple-gaburi.jpg">コンピューターはこのコードを読み取って、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形式で考えていきます。
結論としてSEOに関して、直接的な効果ではありませんが、間接的に貢献しています。
場合によっては画像は目立ちますし、ブログへの流入経路を増やすチャンスでもあるので、代替テキスト（alt属性）は設定しましょう。
WordPressで代替テキスト（alt属性）の設定方法
くま太君今回はWordPressを使うこと前提でお話するよ。
代替テキスト（alt属性）を入力する場所はここだ！
『代替テキスト』欄に、画像の内容を記載する
・WordPressメニュー『メディア』で設定
・記事編集時に個別に設定
WordPress『メディア』で代替テキスト（alt属性）入力
『メディア』内で設定したら、どこで画像を読み込んでも、ここで設定した代替テキスト（alt属性）が使われる。
まずは、WordPressのメニューから『メディア』をクリックしてみてください。
このページは、画像をアップロードできるページです。
試しに、画像を1つ選択して、詳細を見てみましょう。
下記図のように、右側にボックスが並んでいます。
- 代替テキスト（alt属性）
- タイトル
- キャプション
- 説明
- ファイルのURL
今回入力したいのは、①の代替テキスト（alt属性）ですね。
ここに画像イメージの内容を記入します。
下記の図だと、
と、代替テキスト（alt属性）を入力しました。
ここで入力した代替テキスト『赤いリンゴ』は、どこの編集ページでこの画像を取り込んでも、『赤いリンゴ』という代替テキスト（alt属性）情報が反映されます。
ちなみに、各ボックス内の意味はこんな感じです。
| 代替テキスト（alt属性） | Googleなど含め、コンピューターがWEB上で、文字情報として認識できる |
| タイトル | 画像のタイトル。入力しない場合、画像のファイル名になる |
| キャプション | 画像の下などに表示される説明文 |
| 説明 | WEBに表示されない項目で、自分のメモとして利用できる |
| ファイルのURL | 画像のURL |
ちなみに、キャプションは、画像の近くに入るテキストのことです。
下記のリンゴ画像のキャプションは、赤枠で囲った部分『赤いかじられたりんご』です。
くま太君キャプションって、こういうやつ！
画像の簡単なタイトルや説明だね。
記事編集画面で代替テキスト（alt属性）入力
画像個別に代替テキスト（alt属性）を設定したら、その画像のみに反映される。
『メディア』で代替テキスト（alt属性）が設定されていても、上書きされるが、他の同じ画像は、変更されない。
くま太君記事の編集画面で、画像を選択してみよう。
代替テキスト（alt属性）は、記事の編集画面からも入力することができます。
まず、普段通りに画像を記事内に取り込みます。
そして、その画像を選択してみてください。
当ブログは、WordPressテーマSWELLを使用しています。
そのため、画像はSWELLでのイメージです。
画像ブロックの『設定』欄に、最初から代替テキスト（alt属性）が入力されています。
くま太君『メディア』内で、代替テキスト（alt属性）を設定したからだよ。
これは、『メディア』で画像をアップロードした時に、一緒に代替テキスト（alt属性）を入力したからです。
もし、『メディア』で代替テキスト（alt属性）を入力していなければ、空欄になっています。
そしてこの代替テキスト（alt属性）は、記事編集画面上で、変更することができます。
同じ画像を読み込み、下の画像の代替テキスト（alt属性）を、
と、変更しました。
ここで修正した代替テキスト（alt属性）は、その記事の、変更した画像にのみ反映します。
つまり、下の画像の代替テキスト（alt属性）を変更しても、上の画像の代替テキスト（alt属性）には、影響しません。
きちんと変更されているかは、HTMLのコードで確認すると早いです。
HTMLで代替テキスト（alt属性）を確認してみよう
くま太君ページのソース（HTML）はWEBページを表示するための、
基本的なWEB言語だよ。
HTMLソースを確認するなら、ブラウザで
HTMLソースだけサクッと見るなら、プレビューや公開済みのページで、右クリック → ページのソースを表示、が楽ちんです。
ブラウザにHTMLソースが表示されたら、代替テキスト（alt属性）を検索してみましょう。
上記ショートカットで、検索ボックスを出すことができます。
ここに代替テキスト（alt属性）のテキストを入力して、検索します。
下記の図ならば、
で、それぞれ検索すると、
下記のような、HTMLコードを見つけることができました。
実際のHTMLコードでは、サイズなどたくさん情報がありましたが、最低限必要な部分になるように削ったコードです。
① <img src="apple-2.png" alt="赤いかじられたりんご">
② <img src="apple-2.png" alt="トマトじゃないよ">②のコードは記事内で個別に『トマトじゃないよ』と書き換えましたよね。
①と②では、『apple-2.png』という同じ画像なのに、『alt』代替テキスト部分は、きちんと変更されていることが、確認できました。
代替テキスト（alt属性）の書き方
くま太君分かりやすく、簡潔に！
これ、鉄則！
・イメージの内容を正確に
・簡潔に
・キーワードを並べすぎない
これだけ注意しておけばOKです。
下記のりんご画像を素材に、お話していきます。
イメージの内容を正確に書く
くま太君簡潔に内容が伝わるように書くのがポイント！
上記図はリンゴのイメージ画像ですよね。
これを見て、何を思いますか？
私は以下のように、代替テキスト（alt属性）を付けました。
簡潔に内容を伝える文言です。
でも良いですが、少々長いです。
ただのリンゴではなくて、『かじられた』部分が最も特徴的なので、そこに焦点を当て、代替テキスト（alt属性）を付けました。
簡潔に書く
くま太君無駄に長くても分かりにくくなるよね。
シンプルに分かりやすく伝えるのが重要！
思い付く限り網羅した、ダメな例の代替テキスト（alt属性）です。
くどくて、不親切ですよね。
くま太君え？何？
今何て言った？
ってなりませんか？
キーワードも無理に詰め込んだ感じにもなるので、
という状態になるので、代替テキスト（alt属性）は、簡潔に書きましょう。
キーワードを並べすぎない
くま太君ここは注意！
キーワードを並べ過ぎちゃ、マイナス評価になる！
キーワードの並べ過ぎ問題は、かなり昔からあります。
代替テキスト（alt属性）に限った話ではないですが、かつて、Google評価を上げたいがために、無駄にキーワードを詰め込むことが乱立しました。
WordPressなどのCMSが多く使われるようになる前は、HTMLコードを編集することで、WEBサイトを作成していました。
そのため、サブリミナル効果のごとく、不必要に『隠しキーワード』を乱立させて作るサイトが多かったのです。
これでスパム判定、マイナス評価にあたり、Googleからの評価が下がるということになりますので、気を付けましょう。
例えば、こんな感じの付け方です。
下記の文言もある意味、キーワードの詰め込みですよね。
あくまで、自然に、簡潔に、代替テキスト（alt属性）を付けるのがコツです。
デザインの画像には代替テキスト（alt属性）は不要！
くま太君飾り、デザイン的な画像には
代替テキスト（alt属性）は付けないよ。
まずはなぜ、ブログに画像を使うのか、考えてみてください。
- 記事の内容を、分かりやすく伝えるため
- 記事に彩りを与える、デザインとして
という意味がありますよね。
くま太君画像に伝えたいことがあれば、
代替テキスト（alt属性）を付けるんだね。
このことから、記事の内容を分かりやすく伝えるための画像には、代替テキスト（alt属性）が必要です。
そして、デザインとしての画像は、内容を伝えるためのアイテムではないので、代替テキスト（alt属性）を付ける必要はありません。
上記図の①・③は、デザイン画像ですね。
②は何か喜び的なものを現していそうですが、この画像だけでは何のことか意味が通じませんよね。
このようなデザイン的な画像には、代替テキスト（alt属性）は不要、ということです。
ただし！
ご自分で描いたデザインイラストや、撮影した写真をブログに載せて紹介するなら、代替テキスト（alt属性）を付けておきましょう。
代替テキスト（alt属性）がGoogleのクローラーに拾われ、Google検索結果に表示される場合があります。
作品を見てもらう大チャンスですよね。
代替テキスト（alt属性）の必要性
くま太君代替テキスト（alt属性）を設定する
必要性を確認してみるね。
ブログで使用する画像に、代替テキスト（alt属性）を設定したことにより受ける効果は、
- 音声で読み上げられる
- 画像が表時されない時の、代わりのテキストになる
- 画像がGoogleの検索結果に表示される
『代替テキスト』と言われるくらいなので、上記①と②はイメージしやすいかもしれませんね。
そして③の、画像がGoogleの検索結果に表示されることが、ブロガーさんには特に嬉しい効果です。
音声で読み上げられる
くま太君今の音声読み上げ機能って、
かなり正確ですごいよね。
代替テキスト（alt属性）を入力しておくことにより、スマホなどの音声読み上げ機能で、画像イメージを伝えることができます。
代替テキスト（alt属性）がない場合、
などと読み上げられ、画像の内容がわかりません。
代替テキスト（alt属性）があれば、
と、読み上げられるので、イメージがより伝わりやすくなります。
画像が表時されない時の、代わりのテキストになる
くま太君例えば、通信状況が悪くて、画像が読み込めないときなど
代替テキスト（alt属性）が、文字で代わりに表示されるんだ。
こんな時は、代替テキスト（alt属性）がない場合、空欄、またはその場所が四角で囲われて、何も表示されません。
その無機質な状態を回避するために、代替テキスト（alt属性）があれば、画像が表示されなくても、文字として表示してくれます。
この空欄何？という不満を、回避することができます。
画像がGoogleの検索結果に表示される
くま太君Google検索結果に表示された画像をクリックしたら、
記事に飛ぶよね。
機会を逃さないように、代替テキスト（alt属性）を入力しておこう！
代替テキスト（alt属性）は、画像のイメージを文字で伝えます。
Googleのクローラーは、画像の絵面を認識することができません。
ですが、代替テキスト（alt属性）は、HTML内で文字化されているので、クロールすることができます。
Google検索結果にも、『画像』項目がある位なので、代替テキスト（alt属性）の重要性はお分かりいただけるのではないでしょうか？
Google検索結果での見え方
くま太君代替テキスト（alt属性）を設定しておけば、
画像検索で検索結果に登場できるかもしれないよ！
代替テキスト（alt属性）を付けておけば、こんなチャンスが！
・Googleの検索結果に表示される
・Google画像検索に表示される
下記の画像は、Google検索の結果に表示された画像です。
たまに、検索結果に、画像が並んでいるのを見かけますよね。
さらに、下記の画像は、Googleの画像検索結果です。
この検索では、画像の結果のみ表示します。
画像検索で「エディターAC」と検索しました。
ちなみに、これら画像が使われている記事はこちらです。
上記図のように、記事内で使っている画像に代替テキスト（alt属性）を付けているので、画像検索の1ページ目上部にこれだけ表示させることができました。
画像検索結果の画像をクリックすれば、その記事に飛ぶので、ここからも、ユーザーの流入を狙うことができます。
このように、画像検索結果も大事な流入元なので、代替テキスト（alt属性）は付けて置いた方が断然お得です。
ぜひ代替テキスト（alt属性）を入力しておきましょう。
今回のまとめ。画像に付ける代替テキスト（alt属性）は必須！
くま太君代替テキスト（alt属性）の入力は、
必須項目だった！
画像に代替テキスト（alt属性）を必ず付けることを、クセ付けましょう。
代替テキスト（alt属性）を画像に付することで、
- 音声で読み上げられる
- 画像が表時されない時の、代わりのテキストになる
- 画像がGoogleの検索結果に表示される
というような効果を得ることができます。
読み上げや画像の代わりに表示されるのは、ユーザビリティの観点から、効果的です。
また、画像がGoogleの検索結果に表示されれば、通常のGoogleインデックス＋αの機会を得られるので、流入経路を増やすことにもつながりますよね。
代替テキスト（alt属性）の付け方は、
これだけ押さえておけばOKなので、難しいことではありません。
初めの頃は忘れがちな代替テキスト（alt属性）ですが、ぜひ活用して、ブログの露出・より分かりやすいブログを目指していきましょう！
最後までお読みいただき、ありがとうございました。
＼ SWELLだと、設定も編集もサクサクできる！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！