写真を貼って満足しちゃダメ！載せる時にやるべきこと(SEO対策)
僕が読ませていただいているのだと載せる載せないは半々ぐらいだと思います。
僕のブログでは基本的にどの記事でも画像を載せています。
ただ、実は画像をそのまま載せるのは少しデメリットになることがあります。
今回は、画像の載せ方についてまとめてみました。
画像を載せることのメリット・デメリット
画像を載せるメリットは、記事内容をイメージしやすいことや文章への取っ付きやすくなることだと思います。果物の画像があれば、果物に関する記事だとイメージできますし、パソコンの画像があればパソコンに関係する画像だとイメージできます。
また、喜んでいる人の画像ならうれしいことに関する記事など、写っている人の表情で記事の内容を少しイメージしやすいです。
その一方で、デメリットは、記事の表示速度が低下することです。
画像のデータ量は文章に比べ重いので、読み込みに時間がかかります。
大体、開くのに遅いサイトは画像がたくさん載っていることが多いです。
ちなみに、Googleアナリストをやっている人なら、行動>サイトの速度>速度についての提案>PageSpeed の提案の「合計○○個」をクリックすることで、自分のブログの表示速度に関する診断結果を見ることができます。
これを見ると、僕の場合はPCだと100点中55点～65点で、モバイルだと100点中45点～55点ばかりでした。
要するに結構遅いということです。
元々、はてなブログは色々とカスタムされている分、表示が遅くなっていることを考慮しても70点以上にはしておきたいところです。
なので、画像を載せるときは画像のデータ量を減らした方がいいです。
他のデメリットは、画像から撮影場所と撮影日時がバレてしまうことです。
これは、使っている画像がフリー画像でなく、自分で撮った画像だと撮影時に撮影場所と撮影日時が画像に記録されていることがあります。
もし、記録されていたままだと、画像から住所がバレてしまうなんてこともあるかもしれないので、気をつけた方がいいです。
あと、これはデメリットという程ではないのですが、ただブログへ画像を載せただけだと画像の説明が意味のない文字列になってしまいます。
この意味のない文字列のままだと、Googleの方が何の画像なのか認識することができません。
逆に、画像に説明を付けることで、画像検索からブログにアクセスしてくれたりとメリットがあります。
なので、説明を付けた方がSEO的にはいいです。
画像を貼るときに気を付けること
画像データの縮小
画像データの縮小といってもやることは・画像のサイズを変えること
・画像の画質を変えること
の二つです。
ここでオススメしたいのは「JTrim」という画像編集ソフトです。
これは僕が昔から画像を編集する時によく使うのですが、ネットにも接続の必要がなく、動作もめちゃくちゃ軽いので、結構使いやすいです。
もちろんフリーソフトです！
ダウンロードはこちらからできます。
JTrim - 窓の杜ライブラリ
これをダウンロードしたら、編集したい画像を開いて、イメージ(I)>リサイズ(S)で画像の大きさを縮小することができます。
この時、縦と横の比を一定にしたい場合は、「縦横の比率を保持する」にチェックを入れておくといいです。
また、画像をある大きさに切り取りたい場合は、イメージ(I)>切り抜き(T)で画像を切り抜きたい大きさを指定できます。
ちなみに、画像の大きさってどうすればいいか悩むと思いますが、僕の場合は640×360にしています。
ただ、これは自分の好みでいいと思います。
これで「OK」を押すと、編集後の画像が完成します。
これを保存するときに、ファイル(F)>保存オプション(P)から「品質を数値で指定する(Q)」のところで60から80くらいにしておくと見た目はそんなに変わらず画質を落とせます。
50以下だとちょっと荒い気がします。
下のプレビューを押すと変更後の画像が確認ができるので、自分の好みに合わせて変えるといいです。
あと、「Exifデータを保存する(E)」のチェックを外しておくことをオススメします。
このExifデータとは、先ほど話した画像に記される撮影場所や撮影日時などの情報や編集前の画像の情報が記されたものです。
これを外しておけばそのデータは残らないです。
これで保存すると画像のデータ量が200KB～300KBだと20KB～30KBくらいになります。
ちなみに、この記事のトップに載せてある画像もここで書いた通りの編集を行ったもので画像サイズは大体20KBです。
多少は荒く見えるかもしれませんが、僕的にはそんなに気にならないレベルだと思います。
画像の説明の付け方
画像に説明を付けるには貼り付けた画像にhtml文章を書く必要があります。実は、はてなブログだと「はてブロimageTitle」を使うことで、はてなブログの編集画面で画像を載せる時に説明を付けることができます。
拡張は以下のURLからできます(Chromeに対応しています)。
はてブロimageTitle - Chrome Web Store
これを拡張することで、はてなの編集画面で画像を貼るところが少し変わります。
普段、画像をブログに貼り付けるときに、はてなの編集オプションにある画像貼り付け機能を使っていると思いますが、その貼り付け前に画像を選択して説明を決めます。
あとは変換ボタンを押して、いつも通りに「選択した画像を貼り付け」を押せば、画像に説明がついて記事に貼り付けることができます。
ただ、ここでの注意点として、「title＝"画像の説明"」の部分は消しておくといいです。
この「title＝"画像の説明"」は、画像の上にマウスの矢印を重ねると、画像の「title＝"画像の説明"」で書いた画像の説明を表示することができます。
ただ、あまり意味ないです。
それに、この「title“画像の説明”」と「alt=“画像の説明”」とのどちらも同じ説明だと重複やら何やらであまりよろしくないそうです。
それぞれで説明を変えるならいいのですが、ひとつの画像に説明を二つ考えるのはめんどくさいと思うので、消しておくのがいいと思います。
少し手間かもしれませんが、簡単にできるのでやっておくといいです。
最後に
今回はブログに画像を載せるときにやっておいた方がいいことについてまとめてみました。実際、このやり方で画像を編集するとGoogleアナリストの表示速度診断結果は10点くらい上がりました。
なので、それなりに効果はあります。
少し面倒かもしれませんが、表示速度が上がれば読む側も嬉しいと思うので、画像を載せる時は是非やってみてください。
まぁ、画像を載せなきゃいい話ではあるんですけどね。
ちなみに、過去の記事を書き直すのに苦労しています…(｡-_-｡)
