ブログの冒頭に置くアイキャッチ。どんな内容かイメージをつかんでもらう為だったり、読んでみたいっ！と思ってもらうのに効果があったりします。本文中に使うと、書いてると内容のイメージを解りやすく伝える効果がありますよねっ。
読んでて読み疲れを軽減するためにも画像を使います。こうして考えると直接SEOとは結びつかないですけど、SEOで大事なユーザビリティ（ユーザーの利便性）の1つでもある！と考えられるので続けますね♪
alt=”代替（だいたい）テキスト”とスニペット（検索結果のタイトル下の説明文）に注目しながら、どんな効果があるのか、どう書いていけば良いのか！？って事をビヤッっと見てみましょう。
代替テキストとは、画像の情報を伝える文の事
画像になぜ代替テキストを埋め込むかと言うと、
- 検索エンジンは画像を見ることが出来ない
- 視覚障害がある人は、読み上げ機能などを使って画像の内容がどんなモノなのか、想像する
- 表示が遅いときや、画像が表示されない時画像の代わりに表示させる役目
画像の内容は、検索エンジンも理解出来ないので代替テキストを入れてどんな画像かを文で書き、本文にその流れを書くことで、伝える事も出来ます。
※最近では画像の色など検索エンジンも理解しているようですが。
画像を置くとき同時に、画像がどんなものかを伝えるためにテキストを埋め込み、HTMLでは下記のように書き、alt=”画像の説明のテキスト”の部分が代替テキストです。
- <img src=”画像のパス” alt=”画像の説明のテキスト” />
画像に良い情報をしっかり入れた所で検索エンジンは見えないから、テキストとして本文に情報を書いて、画像には代替テキストで画像の情報を入れます。そうする事で「画像にこんな事が書いてるのねっ！」って気付いてもらえるワケです。
画像ファイルに代替テキストを付けないと、どう表示される！？
画像が表示されない時は、画像ファイルの名前がそのままテキストとして表示されてしまう場合があります。例えば下記の通り。
- スクリーンショット 2015-11-23 14.14.29
- ファイル名DSC_1681
- IMG_20151120_11202
どんなにいい内容を書いて良い画像を作っても、検索エンジンにも伝わらないどころか、耳で聞いてると完全に『いらない情報』ですよね。感動のシーンの挿絵が素敵なのに、『IMG_20151120_11202』って聞かされたら、えっ…ってなる感覚です。
追記現在WordPressかサーバーの仕様が変更され、画像ファイル名は『alt：代替テキスト』に自動的になりません。代替テキストは『カラっぽ』alt=""になるから、画像を追加時に、代替テキストを入れてください
検索エンジンは、ユーザーの知りたい事（検索キーワード）を表示させて検索結果としてページを順番に表示させます。そこで検索結果として、スニペットを表示させます。
お取り寄せ「JOKERのふわとろバウム」人気スイーツのセットを …
bibabosi-rizumu.com › 日常
クオリティ高いデザインの箱とJOKERのロゴのウサギのスライド … に移動 – ！ DSC_1681. ケーキを包んでる箱が可愛いし、開けたらJOKERのロゴでもあるウサギのスライドが目につくんです。ついケーキを忘れて、うごかしてみると、 …
『DSC_1681』って画像！とわかるけど、どんな画像なのか？わかりませんよねっ。。『どんな画像』なのか理解するために、代替テキストを入れます。
※正確には、画像の前後の言葉を拾って理解してるって表現が正しいでしょうけど、ただの数字の羅列では、画像を想像すら出来ませんよね＾＾；
代替テキストに入れた場合、検索エンジンはスニペットにどう表示するか！？
検索結果から見れば一目瞭然なので、もう一度スニペットを見て代替テキストの効果をみてみましょう。
- 上画像のように『DSC_1681』だったら『どんな画像』か想像出来ない
- 代替テキストを適正に入れてクロールに来てもらう
- スニペットに表示される『とろバウムの可愛いパッケージ』
- なるほどぉ！画像の内容は『ケーキの可愛い箱』ねっ！理解！
ってなります。検索結果のスニペットを見てください。
お取り寄せ「JOKERのふわとろバウム」人気スイーツのセットを …
bibabosi-rizumu.com › 日常
クオリティ高いデザインの箱とJOKERのロゴ「ウサギ」のスライド … に移動 – ！ とろバウムの可愛いパッケージ. ケーキを包んでる箱が可愛いし、開けたらJOKERのロゴでもあるウサギのスライドが出てきます。 開くと絵本のようでちょっと …
文章として見るとおかしいと感じますよね！？出来れば、文章として読んでもおかしくない代替テキストが理想ってことですね＾＾
代替テキストを、検索エンジンに伝えるって事は、どう言うことか？
alt=”代替テキスト”は、ブログで画像の内容を検索エンジンに伝えなければ、検索ユーザーに届かないって事です。
もし、「検索エンジンにばかり気を取られる」、「機械と向き合ってる」って考えるなら！？ちょっと何を言ってるのかワカンナイ。。
本末転倒！
検索エンジンはもちろん大事ですけど、そもそもの意味は検索エンジンの仕組みをみれば、「ユーザーに届ける為に検索エンジンがあるんだよっ」って事です。
検索エンジンに画像をテキストにして伝えるって事は下記。
- 読み上げソフトを使った場合も読み上げられる
- 画像がすぐに表示されない時にもブログに表示
- スニペットで検索ユーザーに表示
- 画像検索の結果にも表示
- 検索エンジンに伝える事は、ユーザーにも伝える事につながる！
- 画像検索で表示されユーザーが訪問するきっかけになる事も！
ねっ。検索エンジンのその向こうにユーザーがいるんですよねっ。機械じゃない『人』が居ます。だから、機械の向こうの人に向かって書いても良いんです！SNSの方が生の声聞けるし、近い感覚で話が出来て良いとも思いますけどねっ。。話を戻して…
ほんのひと手間なので、検索エンジンとその向こうのユーザーさんに、画像の内容を積極的に伝えましょう！ってことを声をダイに伝えたい！＾＾
代替テキストの作り方！
どうやって代替テキストを書いたら良いのか？それはimgタグ『alt』を使って検索エンジンに伝えます。
imgタグ内にalt属性「alt=”代替テキスト”」を入れる
imgタグ内に、src属性src=”画像のURL”と、alt属性alt=”代替テキスト”を入れて、画像の表示と代替テキストを入れて />タグを閉じます。
画像が表示されないときに、イメージできる説明文「代替テキスト」が表示されるんですね。
この画像のHTMLをざっくり見ると、下記。
- <a href=”リンク先のURL”>
- <img
- src=”画像のURL”
- alt=”代替テキスト”
- />
- </a>
<a href="リンク先のURL"> <img src="画像のURL" alt="とろバウムの可愛いパッケージ" /> </a>
こんな感じですので、altに代替テキストを入れかファイル名を画像内容として、アップしてください。
WordPressなら、代替テキスト入れる場所があるからそこから入れる。
alt使い方法：『投稿画面の画像を右クリック』
画像詳細から『代替テキスト』を入力
画像の内容を書いていたら、自然と画像検索のキーワードも入ってくるって具合です。
WordPressの代替テキストとキャプション
WordPressは、代替テキストとキャプションがありますけど、代替テキストを入力していたとしても、キャプションに記入したものが優先されて、表示されます。
- もちろん代替テキストを入れてない場合でもキャプションがあれば、問題ない。
- 画像の内容をキャプションで説明してる。
キャプションにalt使い方法：『投稿画面の画像を右クリック』と入れたらどうなるかを見てみましょう！
メディアを追加したときのスクリーンショットで見ると、こんな感じ
画像の右側。タイトルが『img-alt』となってます。
キャプションを入れずに放置すると、代替テキストとして、入ります。altがカラより良いバージョンですね＾＾
タイトルは、画像をアップする前に『画像の名前』を編集したものです。『DSC_1681』を『img-alt』に変更みたいに。
そこに日本語をつかうと、ロリポップでは文字化けをおこして、めちゃくちゃ長い画像名に（”＾ω＾）・・・。余談ですが、ご自身のサーバーではいかがでしょうか！？
キャプションに書いたものが画像の下に表示される
- このキャプションに書いたものがaltになる！
<img src=”画像URL” alt=”alt使い方法：『投稿画面の画像を右クリック』”>
以前にアップした画像のaltに書いてるものより、キャプションが優先され、キャプションがaltになる！
適切なaltの書き方、代替テキストの入れ方
グーグルのサーチコンソールのヘルプで画像の情報を適切に代替テキストにする方法を詳しく記しています。その一部を下記に引用しますね。
適切ではない例:
<img src=”puppy.jpg” alt=””/>
適切な例:<img src=”puppy.jpg” alt=”子犬”/>
最適な例:<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬”>
次のような記述は避けてください。<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん
小さな子犬 レトリーバー ラブラドール ウルフハウンド
セッター ポインター ジャックラッセル テリヤ
ドッグ フード ドッグフード 安い 子犬の餌”/>
みての通り、適切、最適とありますよねっ。より具体的に表現するのが、一番ユーザー、検索エンジンに伝わりますよっ！って言う例えです。
- ○『子犬』
- ◎『持ってこいをするダルメシアンの子犬』
『子犬』以上に『何をしてる、どんな子犬』と具体的に書くのが良いようですねっ！
では、反対に何がイマイチなのか
- △『代替テキストに、何も書かない』
- ×『キーワードの羅列、乱用』
キーワードの乱用は、検索上位目的でキーワード（単語）を意味を成さない状態で羅列する事です。あくまで自然な文章として書かないと、ユーザービリティー（利便性）が落ちてしまいます。
画像検索結果にキーワードと違う画像が表示！そう考えると、わかりやすいですねっ。
その結果、検索順位を落とされるなどの影響が出る可能性もあります。情報を自然に入れるのは、最適です！欲張って入れすぎると、痛いお仕置きが待ってるよぉ♪って事を覚えておいてください！
順位なんてワカンナイ！？では、アナリティクスで流入を見てると検索流入がガクッ！っと減ってしまうので気付きますよ＾＾；
きっちんと読むなら、『SEO 検索エンジン最適化』さんのimg要素とalt属性の最適化を参考にしてくださいねっ。
さいごに
SEOって、ユーザビリティ「ユーザーへの利便性」は必須事項でありますよね。検索エンジンは、ロボットでもその先には、人が居るんです。その人、更に今、未来の初心者さんに向けて書いても良いんです！
画像とその周辺に適切なキーワードを置くと検索エンジンがキチンと拾ってくれるって事も気が付いてくれてたらうれしいです！
スニペットの説明文に（alt=”代替テキスト”）が表示される事をみても検索エンジンは、画像も重要視してますよね。モバイルフレンドリーでもrobots.txtファイルにクローラーに画像を見せないといけないよっ！って言ってる事を見ても、うなずけます。
altに代替テキストを最適に書いたら、皆がハッピー！
それでは、かうたっくでしたっ♪
Comments