ブログを書くとき、画像をよく貼ると思いますが、まさかそのままアップロードしてませんか？それはSEO対策の観点から見ると危険ですよ！ブログに画像をアップロードするときに気をつけたいことや、正しい方法をお話ししていきますので是非ご参考ください。
こんな人におすすめ
- WordPressの画像サイズ調整をしたい
- 画像ファイルを小さくしてSEO対策をしたい
WordPressに画像をそのままアップロードしてはいけない理由
冒頭で「SEO対策になる」と言いましたが、それは表示速度の改善ができるからです。ブログを書いていたら色々な画像をアップロードすると思いますが、そのときに画像ファイルのデータが大きすぎると、表示速度が遅くなってしまいます。
表示速度が遅くなると、検索上位を狙うのが難しくなります。特に気をつけたいのがモバイル版での表示速度です。わたしがやってしまったんですが、PC版の表示速度は大して問題ではなく油断していたら、モバイル版の表示速度がひどいことになっていました（泣）。
自分のサイトの表示速度を測定したい場合はGoogle公式のPage Speed Insightsを使いましょう。
ちなみにこの数値はどれくらいが良いかは以下を参考にしてください。
パフォーマンススコアの色分け方法
引用元：https://developers.google.com/web/tools/lighthouse/v3/scoring
色分けは、次のパフォーマンススコアの範囲にマッピングされます。
0〜49（遅い）：赤
50から89（平均）：オレンジ
90から100（高速）：緑
この計測サイトは、表示速度が遅くなっている原因がどこにあるのかを表示してくれるので、具体的に対策を打てます。わたしのサイトは、貼り付けた画像ファイルのデータ容量が大きすぎて、このような低い数値になってしまっていました。
自分のブログに合う画像サイズの調べ方
まずは、自分のブログサイトに合う画像サイズというものを調べます。「WordPress 画像サイズ」と調べるとそれっぽい画像サイズが出てくるんですが、実はサイトごとに適切なサイズというものが決まっています。
適切な画像サイズの調べ方は、まず自分のブログを開いて、画像が貼ってあるページで右クリック→検証→出てきた画面の右側でcomputedを選びます。
四角がたくさんあるところで青いところにカーソル合わせると、画像サイズが表示されます。
真ん中の青いところにカーソルを合わせると、表示してるサイトの画像のところも薄く青い色になります。わたしのサイトの場合は、696×391が適切なサイズだということがわかります。
このようにして調べた画像サイズに合わせて、貼り付けたときに画像を編集し、適切な画像サイズにすることで、画像データ容量が重くなりすぎるのを防ぎます。
アップロードする画像サイズの編集方法
記事の中に画像をアップロードするとき、画像を保存しているファイルを開いて、そこから記事内にそのままドラッグ＆ドロップで画像を挿入できます。
そのとき、画像を編集する画面が出てくるので、そこで適切なサイズにします。
プラグイン「Gutenberg」を入れている方はこんな画面が右側に出ます。
最初に画像をアップロードしたときに、元の画像サイズになるので、大きすぎたら小さくしてあげれば大丈夫です。ただし気をつけなければならないのが、小さくしすぎると画像が見にくくなり、読者のストレスになるということを気をつけましょう。
せっかく記事の内容をわかりやすくするために画像を入れているのに、その画像が見にくくなってしまったら逆効果です。大きくしすぎても画像が荒くなるので、元の画像サイズに合わせて調整しましょう。
画像を自動でリサイズしてくれるプラグイン
もう大量の画像をアップロードしてしまって手遅れだよ…という方に朗報です。既にアップロードした画像サイズを調整してくれるプラグインがあります。
「Imsanity」というプラグインです。このプラグインは①アップロードした画像サイズを自動でリサイズしてくれる ②既にアップロードした画像を指定した画像サイズにリサイズしてくれる という二つの機能があります。
インストールした後の使い方は以下の通り
- プラグイン→インストール済みプラグインと進む
- Imsanityの「設定」を押す
- 自分のサイトで適切な画像サイズを入力
- 一括画像リサイズでリサイズが必要な画像を検索してリサイズ
これでリサイズした後、もう一度わたしのサイトをPage Speed Insightsで分析したら、画像サイズの問題は解決していました。ものすごい便利なプラグインですね、なぜ気づかなかったのか…。
まとめ
- 画像サイズを適切にすると、表示速度が上がってSEO対策になる
- 適切な画像サイズの調べ方は、画像にカーソル→検証→computedで調べる
- 「Imsanity」プラグインを使えばアップロード時に画像編集しなくて済む
特に操作解説系のサイトやアフィリエイトサイトは画像を沢山使います。せっかくわかりやすくするために画像を入れてるのに、それが読者のストレスになったら残念なので、やっていない方は是非見直してみてください。
参考サイト
https://wp-exp.com/blog/insert-image/
https://requlog.com/self-branding/wordpress/media-setting/
https://digital-marketing.jp/seo/what-is-image-search/#i-6
