アクセスアップ

ブログに画像を貼る時の4つのポイント!代替テキストや画像サイズの考え方など

ブログに画像を貼る時のポイントを解説!

ブログに記事を書くときには画像を入れることも多いですよね。
何もなくてもアイキャッチ画像(この記事の↑の画像もアイキャッチ画像です)を入れたりします。

このブログの画像、撮った写真をそのまま張り付けたり、フリー画像から取ってきたものをそのまま使ったりしていませんか?
実はそれ、ちょっともったいないことをしているかもしれません…。

ブログに画像を入れる時にやっておくべきこと。
画像サイズやファイル形式、ファイル名、代替テキスト(alt属性)に関するものなど、覚えておいてほしいブログに画像を貼る時の基本をご紹介します。

ブログに画像を貼る時に注目する4つのポイント!

ワードプレス画像画面
画像を使う時に注目してほしいのは次の4つ。

  • 画像タイトル
  • 代替テキスト(alt属性)
  • 画像サイズ
  • ファイル形式

この4つに関して解説しておきます。

また、いじらなくていいのですが、ついでなのでワードプレスの画像画面で出てくる

  • キャプション
  • 説明

この2つに関してもどんなものか?という解説をしておきますね。

画像タイトルはどんな感じで入れればいい?

まずは画像タイトルから。

そのまんま、画像のタイトルを入れればOKです。
難しく考える必要はないですね。

空の画像だったら「空」とか。
山の画像だったら「山」とか。

シンプルに考えればいいし、多少適当でも問題ないです。
ただ、一応画像にマウスカーソルを合わせた時に出てくる吹き出し(ツールチップ)にこのタイトルに入れた言葉が出てくることがあります。
(使っているワードプレステーマによっては出ないこともあります。というか出ないテーマのほうが多いと思います)
ツールチップ
なので全然関係ないタイトルはやめましょうね。

この後お伝えする代替テキストと違ってそれほど記事への影響はありません。

代替テキスト(alt)はかなり大事!絶対に設定すべし

タイトルはぶっちゃけ適当につければいいですが、代替テキスト(alt)はすごーく大事!

もし画像が表示されなかった時、代替テキストに設定した言葉が表示されます。
画像が表示されない時ってあるの?って思うかもしれませんが、僕も結構外でスマホでネット見てて、電波状況が悪くて画像が見れないってこと、結構ありますよ。

また、Webページの音声読み上げ機能を使った時、画像の部分は代替テキストに設定したものを読み上げます。

このように読者の使いやすさ(=ユーザビリティ)を考えた時に代替テキストはものすごく大事です。
ユーザビリティが上がる、ということはブログの評価も上がる。
回り回ってアクセスも増える、ということですからね。

代替テキストは記事評価にもつながる!

読者の使いやすさの他にもう一つ大きな意味があります。
それはグーグル神もこの代替テキストに入力した言葉をブログ評価の大きなポイントにしているということ。

実際グーグルの公式でも『わかりやすい代替テキストを使用する』という見だしを一つ作ってまでちゃんと代替テキストに言葉を入れるように推奨していますしね。

で、この公式ページの中に代替テキストの入れ方に関するお手本が載ってます。
翻訳と補足をしつつ紹介しますと…。

<タイトル=”子犬” 代替テキスト=””/>
(補足:代替テキストが空欄)

<タイトル=”子犬” 代替テキスト=”子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌”/>
(補足:キーワードを羅列しただけなうえに関係ないキーワードもある)

良い例:
<タイトル=”子犬 代替テキスト=”子犬”/>
(補足:最低限の情報は伝えている)

もっと良い例:
<タイトル=”子犬” 代替テキスト=”持ってこいをするダルメシアンの子犬”>
(補足:何をしている画像か文字テキストだけで伝えている)

このように代替テキストは『画像が表示されなくても何を伝えているかわかる』という感じで入れるのが大事!
少しでもアピールしようとキーワードを羅列したりすると、逆に評価を下げちゃいますよー!

画像検索からアクセスがあることも!

代替テキストを設定しておくとちょっとしたおまけもあります。

それは画像検索の結果に自分のブログの画像が出ること。
そして、その画像経由で記事へのアクセスがあったりします。

ぶっちゃけ、それほどグイーンとアクセスが増えるわけではないですが、こんなおまけもあるよ!ということで。
少ないとはいえ、少しでもアクセスが増えるならやっておいて損はないですよ。

jpgとpngはどっちがいい?

ファイル形式の話もしておきますが、実はこれ改めて調べてみると当ブログは大失敗をしていることがわかりました(笑)

ポチ丸
ポチ丸
ふぁっ!?

画像にはファイル形式があります。
画像名.jpgとか画像名.pngとかいうやつですね。

基本的に画像のファイル形式はjpgかpngが主流です。
たまにgifというのもありますが、普通に画像を扱っている限りはほとんど出てきません。

で、jpgとpng。
ブログに貼るにはどっちがいいか、なんですけど、一応特徴をすご---くざっくり言うと。

  • jpg…画質はやや悪い。サイズは軽い。
  • png…画質はやや良い。サイズは重い。

という感じです。

で、画質に関しては『やや』という言い方をしたのですが、これはぶっちゃけどちらのファイル形式でも普通に見る分には画質の違いなんて分からないからです。
少なくともアドセンスブログをやるうえで、pngの画質じゃなきゃダメ!ってことはほとんどないでしょう。

なので、基本的に画像のサイズを軽くしてページそのものを軽くしたほうが良いです。
ということでjpgで画像を貼るのが基本です。

もしpngの画像がある場合はjpgに変換できるサイトもあります。

で、改めて当ブログを見てみると画像の大部分がpng/(^o^)\
やらかしました。。。

一応、見苦し言い訳をしておくと、PCの画面をキャプチャして保存するときに全てpngになっていたらしく。
そのままpng形式で投稿し続けたって感じです。

フリー画像サイトなんかからダウンロードする画像は大抵jpgです。
なので、手持ちのアドセンスブログはjpgの画像で投稿出来てました。

以上、見苦しい言い訳でした(笑)

画像の大きさはどれくらいが適切?

画像の大きさは全ての画像サイズがコレ!っていうものはありません。
僕はどうしているかというと…。

基本的に横幅は最大640pxにするようにしています。
これでパソコンでブログを見た場合、ちょうど記事の横幅ピッタリに収まるからです。

一応、それ以上でも自動で縮小してくれるのですが、大きなサイズだとそれだけ容量も大きくなっちゃいますからね。
自分で調整できる部分まで調整しておきましょう。

ただ、もちろん全ての画像サイズを横幅640pxに合わせているわけではありません。
この辺は実際に記事のプレビューで見ながら調整してます。

大体、アイキャッチ画像が横幅600pxくらい。
文中に入れる画像が横幅400pxくらいです。

また、スマホで見る場合は400pxでも600pxでも同じ画像サイズになります。
(レスポンシブデザインのテンプレートを使っている場合)

キャプション・説明の使い方

ワードプレスの画像画面にある『キャプション』と『説明』は使わなくてもいい機能です。
が、せっかくなので一応どんな機能か説明しておきます。

『キャプション』は画像の下に簡単な説明文を載せることができます。
こんな感じ。

ふかふかの草ふかふかの草

画像の下に『ふかふかの草』という文字があると思いますが、これがキャプションに入れた文字です。

で、『説明』は自分用メモみたいな感じです。
ここに何かを書いてもどこかに何かが表示されたりすることはありません。
画像に対して何か覚えておきたいこととか自分の中で整理するために使うといいでしょう。

まとめ:画像にもそれなりに気を遣おう!

ブログに画像を貼る時に意識しておいてほしいポイントを4つ紹介しました。

特に一番大事なのは代替テキスト。
読者のためにもなりますし、ブログ記事の評価にもつながりますし、画像検索結果に表示される可能性も高まります。

代替テキストは『画像が表示されなくても文字だけで何を伝えているかわかる』という感じで書くのがポイントです。

画像サイズやサイズ、タイトルなんかもそんなに手間はかからないので、ちゃちゃっと適切な感じにしておきましょう。

細かい部分ですが、結構大事ですよー!

メルマガ登録はこちら

お名前(HN可):

メールアドレス:

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です