【ワードプレス】SEO的に正しい画像の挿入方法をわかりやすく解説します

ブログ記事をつくる際に画像はほぼ間違いなく毎回扱うことになります。画像がまったく入らない記事は珍しいくらいです。

この記事では、ワードプレスでの画像の挿入方法を初心者さん向けにわかりやすく解説しました。SEO上どんなことに注意すればいいかもすべてわかる内容になっています。ワードプレス初心者さんはこの記事さえしっかりと把握してもらえれば画像の扱いについてはばっちりでしょう。

1．画像を用意する際のSEO上の注意点
2．ワードプレスで記事内に画像を挿入する方法
3．画像を挿入する際のおさえておくべきポイント
4．まとめ

1．画像を用意する際のSEO上の注意点

こんにちは！ブログ集客コンサルタントの松崎（@s_matuzaki）です。

ではまずは、画像を用意する際のSEO上の注意点についてみていきましょう。

1-1．画像の著作権に注意しよう

ブログの記事内で画像を使用する場合は著作権に十分ご注意ください。とはいっても、正直なところ個人のブログで著作権のある画像を使用してもよほど悪質じゃない限りは大問題に発展することはないので、あまり考えすぎる必要はありませんが。（ちょっと語弊があるかな…。十分注意はしてほしいけどあまり考えすぎないように…ということです。）

著作権に関する細かいことはここでは書きませんが、めちゃくちゃ簡単に説明すると「写真やイラスト、図形や文章にはすべて著作権があるから勝手に使っちゃだめだよ」ということです。

1-1-1．Google画像検索は要注意！

もちろん自分で撮影した写真を使う分にはまったく問題ありませんが、いつも自分で必要な写真を用意するのは手間がかかって大変です。なので、やはりネット上にある画像を使うことが多くなってしまうのですが、ブログ初心者さんがやってしまいがちなのが「Google画像検索から直接画像を拾ってきてしまうこと」。

Google画像検索というのは著作権とか関係なしにネット上の画像を検索するサービスなので、ここで検索して出てきた画像をそのまま自分のブログで使ってもいいということではないのでお気を付けくださいね。

なかには著作権フリーの画像もあるでしょうけど、基本は著作権があるものばかりです。ブログ記事に使う画像を探すときはGoogle画像検索は使わないようにしましょう。

1-1-2．著作権フリーの素材サイトを活用しよう

ではどこで画像を探せばいいかというとフリー素材サイトです。僕がよく使っているおすすめのサイトをいくつか紹介しておきますので、このあたりから画像を拾ってくるようにしてください。

おすすめのフリー素材サイト

O-DAN（オーダン）：http://o-dan.net/ja/

ぱくたそ：https://www.pakutaso.com/

足成：http://www.ashinari.com/

photoAC：http://www.photo-ac.com/

pro.photo.：http://pro.foto.ne.jp/

1-1-3．著作者に許可を取れば使えることも

さきほどもお話ししたように、他サイトに掲載されている写真やイラストなどは基本的にすべて著作権がありますので無断でコピーして使用してはいけません。

ただし、著作者に連絡をして許可が取れれば問題ないので、どうしても使いたい画像がある場合は一度連絡して相談してみるのもありです。

実は画像を引用されることは著作者にとってメリットゼロというわけではないんです。画像を引用する際に「引用元」を明記してもらってリンクを貼ってもらうことができれば、著作者にとっては貴重な被リンクが一つ増えることになりますからね。この点をふまえて交渉すればうまくいくことも多い訳です。

1-2．ファイル名は英語を使い、画像の内容を表したものにしよう

画像のファイル名に関しても気をつけてほしいことがあります。Googleのサーチコンソールヘルプページに次のように記載されています。

ファイル名も画像のテーマを判断する材料として使用されます。たとえば、IMG00023.JPG よりも、my-new-black-kitten.jpg の方がテーマを判断するために役立ちます。

引用元：Google画像検索に関するおすすめの方法サーチコンソールヘルプ

そうなんです。画像のファイル名もGoogleの判断材料の一つとなっているのです。

たとえば、iPhoneで撮影した写真のファイル名ってどんな名前になっているかご存知ですか？実はこれ、iPhone上ではファイル名が確認できないようなのです。アップルのサポートにも電話して確認したのですが、iPhoneの正規の機能では確認も変更もできないとのこと。

ということで、iPhoneで撮影した写真をそのままメールでパソコンに送信したところ、添付ファイルのファイル名は次のようになっていました。

「IMG_1250.jpg」です。これがiPhone上で自動的につけられる名前のようなのです。ということは、このままのファイル名で記事に挿入してしまうと画像の内容を判断するのにはふさわしくないファイル名ということになってしまいますよね。

なので、基本的な手順としては

iPhoneで撮影した写真をいったんパソコンに送る。
パソコン上でファイル名を変更する。
ワードプレスにアップロードする

ということになるわけです。iPhoneで撮影した写真をブログ記事に使いたいという場合はひと手間かける必要があるのでご注意くださいね。

「どうしてもiPhone上で画像のファイル名を変更したい！」という人はこちらの記事でくわしく手順が説明されていますので参考になさってください。

iPhone・iPadのカメラロール写真のファイル名変更方法

もちろんフリー素材サイトからダウンロードした写真も扱いは同じです。フリー素材サイトの画像の場合は適切なファイル名がすでについている場合もあるのですが、しっかりと確認してからワードプレスにアップすることを心がけましょう。

では、具体的にどんなファイル名にすればいいのでしょうか？ポイントは次の2点です。

1-2-1．ファイル名の区切りはハイフンを使おう

たとえば次のような画像を使うなら、あなたならどんなファイル名にしますか？

黒い子猫の写真ですね。「cat.jpg」とかでもよさそうですよね。まぁこれは正解があるわけではないですが、Googleがおすすめしているのは次のようなファイル名です。

my-new-black-kitten.jpg

さきほどのGoogle画像検索に関するおすすめの方法に記載されているファイル名がまさにこれですね。より具体的に画像の内容を表しているのがわかります。そして注目すべきポイントは「-（ハイフン）」です。単語の区切りには必ず半角ハイフンを使うようにしましょう。ファイル名のアンダーバーも使えないことはないのですが、Googleの認識上はアンダーバーだと「mynewblackkitten.jpg」となってしまうようなのでおすすめしません。

1-2-2．画像のファイル名に日本語は使わないようにする

さきほどの黒い子猫の写真のファイル名を「黒い子猫の写真.jpg」みたいに日本語にしてもいいかどうかですが、原則としてファイル名は半角英数を使うようにしましょう。

日本語のファイル名をつけられないわけではないですし、普通にワードプレスにもアップロードできてしまうことがほとんどなのですが、まれにサーバー上でトラブルを起こすことがあります。検索してみるとわかりますが、実際にそういう事例でQ&Aサイトで質問をしている人も多いので、日本語のファイル名は避けておいたほうが無難です。

基本的に画像のファイル名として使わないほうがいい文字をまとめておきましょう。

日本語（ひらがな・カタカナ・漢字）
全角文字（英数字にも全角があるので注意）
スペース
-（ハイフン）と_（アンダーバー）以外の記号
環境依存文字

このあたりはトラブルの原因になりえますので、ファイル名に含めないようにしてください。

環境依存文字でよく使われるのが①②などの丸付き数字です。以前はウェブページ上で使ってはいけない文字として有名でしたが、最近はUTF-8が主流となり、基本的にワードプレスの記事内で使用する分には問題ありませんが、画像のファイル名などには使わないほうが無難かなと思います。

1-3．画像サイズを整えてからアップしよう

最近はページの表示速度がGoogleの検索順位に与える影響が高くなっている傾向があります。これはスピードアップデートといって、2018年1月の時点ですでにGoogleから発表があった内容です。

ページの読み込み速度をモバイル検索のランキング要素に使用します

くわしくは上記のGoogleウェブマスター向け公式ブログの記事を読んでいただきたいのですが、ここでは何が言いたいかというと、

画像サイズが大きすぎるとページを表示するための時間が伸びてしまうため、Googleの評価を落とすことにつながる可能性がある

ということなのです。だから画像サイズを整えるというのはけっこう大事なんですよ。

ちなみに、下記の画像のサイズは「600×388」です。

パソコンで閲覧した際にもバランス的にちょうどよくないですか？ブログ記事に挿入する画像は目安としては横幅が600pxくらいがおすすめです。

私の場合は「Photoshop」という画像編集ソフトを使用して画像サイズを変更してからワードプレスにアップするようにしています。これはプロも使っているソフトなのでかなりおすすめのソフトなのですが、もし画像サイズだけを変更するのであればスマホのアプリでも十分です。

たとえば、「画像サイズ」というアプリはスマホでも簡単にサイズ変更ができますのでおすすめです。くわしい使い方はこの記事では解説しませんが、iPhoneの人は下記のリンクからダウンロードできますのでぜひ試してみてください。

【画像サイズ】アプリのダウンロードはこちらからどうぞ。

操作は簡単なので直感的にできちゃうと思います。スマホでサイズ変更をして、そのままスマホのワードプレスアプリから画像をアップロードするといいですね。画像のアップロード方法は後述します。

1-4．画像にオリジナリティを出す方法

さきほどご紹介したフリー素材サイトから画像をダウンロードしてそのまま使用するのもいいのですが、オリジナリティを高めたいなら画像を少し加工することもおすすめしたいです。

私は記事のアイキャッチ画像に使う画像は次のように毎回文字を入れて加工するようにしています。

これもさきほどご紹介した「Photoshop」を使っているのですが、スマホのアプリでも無料で文字は入れられます。検索すればいろんなアプリが出てくるのでお好みのものを使っていただければ問題ありませんが、一つご紹介しておくと「Skitch」というアプリは私もたまに使用しています。ダウンロードはこちらからどうぞ。