その画像、検索エンジンには見えていないかも？『alt属性(代替テキスト)』の基本と書き方を解説します！

ブログに画像を入れるとき、

「代替テキスト」という入力欄を

見かけたことはありませんか？

WordPressなら、

画像を選んだときの設定画面に

ひっそりと用意されています。

なんとなく空欄のまま

記事を公開している方も

多いかもしれません。

「画像を入れるだけでも手間なのに、

説明まで書くの？」

と思ってしまいますよね。

実はこの欄、

画像の「説明文」を書くための大切な場所。

書いておくかどうかで、

読者にも、検索エンジンにも

伝わり方が変わってきます。

お疲れ様！じゅんです(^^)/

元気にブログ書いてますか？

今回は、

画像の『alt属性(代替テキスト)』について

役割と書き方のコツをやさしく解説します。

Remember this！(≧∇≦)b

alt属性とは？画像につける「説明文」

『alt属性』とは、画像の内容を

文字で説明するためのものです。

WordPressなどでは

「代替テキスト」と呼ばれています。

以前、記事で紹介したように

Webページの骨組みは

HTMLという言語でできています。

画像もHTMLで表示されていて

そこに「この画像は〇〇です」

という説明を添えられるのが、

alt属性なんです。

とはいえ、WordPressなら

「代替テキスト」の欄に文章を入れるだけ。

むずかしいコードを書く必要はありません。

ふだんブログを読んでいるときに

この説明文が目に見えることは

ほとんどありません。

では、

いったい誰のためにあるのでしょうか。

alt属性を書くべき3つの理由

検索エンジンに画像の内容を伝えるため

検索エンジンは、

人間のように画像を「見る」ことが

得意ではありません。

alt属性があると、

「この画像は何を表しているのか」を

理解する手がかりになります。

画像検索から、

記事を見つけてもらえるきっかけにも

なりますね。

SEO(検索エンジン対策)のための

小さいけれど大切なひと手間です。

目の不自由な方にも内容を伝えるため

目の不自由な方の中には、

画面の文字を読み上げる機能を使って

Webページを読む方がいます。

このとき、画像の部分では

alt属性の文章が読み上げられます。

空欄のままだと、

そこに何があるのか伝わらないんです。

誰にでも情報が届くようにする

こうした考え方は、

「アクセシビリティ」

とも呼ばれています。

画像が表示されないときの代わりになるため

通信が遅かったり、

ファイルに問題があったりして、

画像が表示されないことがあります。

そんなとき、画像の代わりに

alt属性の文章が表示されます。

何の画像だったのかがわかるだけでも

読者の戸惑いはぐっと減るでしょう。

alt属性の書き方のコツ

書き方は、

むずかしく考えなくて大丈夫です。

「この画像を、

見えない人に電話で伝えるとしたら？」

と想像してみてください。

たとえば、ノートパソコンで

ブログを書いている写真なら

こんな具合です。

・よくない例:「画像1」「写真」

これでは、何の画像なのかまったくわかりません。

・よい例:

「ノートパソコンで

ブログ記事を書いている様子」

内容が、ひと目で(ひと耳で)わかりますね。

ただし、

キーワードをむやみに詰めこむのは逆効果。

「ブログ 副業 初心者 稼ぐ」

のように並べるだけでは

説明文になっていません。

また、

飾りのための線やアイコンのような画像には

無理に説明を書かなくてもかまいません。

大切なのは、その画像が記事の中で

「何を伝えるためにあるのか」を

ひとことで書くことです。

長さは、ひとことから

短い1文くらいが目安。

長すぎる説明は、

読み上げのときに聞く人の

負担になってしまいます。

これまでの記事も、

よく読まれているものから

少しずつ見直していくといいでしょう。

---

まとめ

☑️alt属性(代替テキスト)は、

画像の内容を文字で説明するためのもの

☑️検索エンジンが

画像の内容を理解する手がかりになる

☑️読み上げ機能を使う方や、

画像が表示されないときにも内容が伝わる

☑️書き方のコツは、

「見えない人に電話で伝えるなら？」

と考えること

☑️キーワードの詰めこみはNG。

画像の役割をひとことで書く

alt属性は、読者からは見えない

小さな気づかいです。

次に画像を入れるときは

ぜひ代替テキストの欄に

ひとこと書きそえてみてくださいね。

今日も

最後まで読んでくれてありがとう～！

では！また (*´▽｀*)