松崎茂利
たった一人でブログだけを使って月商400万円を達成。
個人・法人合わせて100件以上のコンサル実績があり、ブログを使った集客力アップ、収入アップのプロとして多くの人の成果を上げることに成功。
現在も自分自身がブロガーとして活動しながら、講演やコンサルを行っている。
プライベートコンサルティングの詳細はこちら
最新記事 by 松崎茂利 (全て見る)
- 公務員はブログ収入もNG？実際のところを徹底的に調べました - 2020.10.24
- 【ワードプレス】SEO的に正しい画像の挿入方法をわかりやすく解説します - 2020.10.16
- 【自己啓発のためにやるべき行動】7つの具体例と意味を徹底解説します - 2020.10.10
ブログ記事をつくる際に画像はほぼ間違いなく毎回扱うことになります。画像がまったく入らない記事は珍しいくらいです。
この記事では、ワードプレスでの画像の挿入方法を初心者さん向けにわかりやすく解説しました。SEO上どんなことに注意すればいいかもすべてわかる内容になっています。ワードプレス初心者さんはこの記事さえしっかりと把握してもらえれば画像の扱いについてはばっちりでしょう。
目次
1．画像を用意する際のSEO上の注意点
ではまずは、画像を用意する際のSEO上の注意点についてみていきましょう。
1-1．画像の著作権に注意しよう
ブログの記事内で画像を使用する場合は著作権に十分ご注意ください。とはいっても、正直なところ個人のブログで著作権のある画像を使用してもよほど悪質じゃない限りは大問題に発展することはないので、あまり考えすぎる必要はありませんが。（ちょっと語弊があるかな…。十分注意はしてほしいけどあまり考えすぎないように…ということです。）
著作権に関する細かいことはここでは書きませんが、めちゃくちゃ簡単に説明すると「写真やイラスト、図形や文章にはすべて著作権があるから勝手に使っちゃだめだよ」ということです。
1-1-1．Google画像検索は要注意！
もちろん自分で撮影した写真を使う分にはまったく問題ありませんが、いつも自分で必要な写真を用意するのは手間がかかって大変です。なので、やはりネット上にある画像を使うことが多くなってしまうのですが、ブログ初心者さんがやってしまいがちなのが「Google画像検索から直接画像を拾ってきてしまうこと」。
Google画像検索というのは著作権とか関係なしにネット上の画像を検索するサービスなので、ここで検索して出てきた画像をそのまま自分のブログで使ってもいいということではないのでお気を付けくださいね。
なかには著作権フリーの画像もあるでしょうけど、基本は著作権があるものばかりです。ブログ記事に使う画像を探すときはGoogle画像検索は使わないようにしましょう。
1-1-2．著作権フリーの素材サイトを活用しよう
ではどこで画像を探せばいいかというとフリー素材サイトです。僕がよく使っているおすすめのサイトをいくつか紹介しておきますので、このあたりから画像を拾ってくるようにしてください。
O-DAN（オーダン）：http://o-dan.net/ja/
ぱくたそ：https://www.pakutaso.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の判断材料の一つとなっているのです。
たとえば、iPhoneで撮影した写真のファイル名ってどんな名前になっているかご存知ですか？実はこれ、iPhone上ではファイル名が確認できないようなのです。アップルのサポートにも電話して確認したのですが、iPhoneの正規の機能では確認も変更もできないとのこと。
ということで、iPhoneで撮影した写真をそのままメールでパソコンに送信したところ、添付ファイルのファイル名は次のようになっていました。
「IMG_1250.jpg」です。これがiPhone上で自動的につけられる名前のようなのです。ということは、このままのファイル名で記事に挿入してしまうと画像の内容を判断するのにはふさわしくないファイル名ということになってしまいますよね。
なので、基本的な手順としては
- iPhoneで撮影した写真をいったんパソコンに送る。
- パソコン上でファイル名を変更する。
- ワードプレスにアップロードする
ということになるわけです。iPhoneで撮影した写真をブログ記事に使いたいという場合はひと手間かける必要があるのでご注意くださいね。
「どうしてもiPhone上で画像のファイル名を変更したい！」という人はこちらの記事でくわしく手順が説明されていますので参考になさってください。
もちろんフリー素材サイトからダウンロードした写真も扱いは同じです。フリー素材サイトの画像の場合は適切なファイル名がすでについている場合もあるのですが、しっかりと確認してからワードプレスにアップすることを心がけましょう。
では、具体的にどんなファイル名にすればいいのでしょうか？ポイントは次の2点です。
1-2-1．ファイル名の区切りはハイフンを使おう
たとえば次のような画像を使うなら、あなたならどんなファイル名にしますか？
黒い子猫の写真ですね。「cat.jpg」とかでもよさそうですよね。まぁこれは正解があるわけではないですが、Googleがおすすめしているのは次のようなファイル名です。
さきほどのGoogle画像検索に関するおすすめの方法に記載されているファイル名がまさにこれですね。より具体的に画像の内容を表しているのがわかります。そして注目すべきポイントは「-（ハイフン）」です。単語の区切りには必ず半角ハイフンを使うようにしましょう。ファイル名のアンダーバーも使えないことはないのですが、Googleの認識上はアンダーバーだと「mynewblackkitten.jpg」となってしまうようなのでおすすめしません。
1-2-2．画像のファイル名に日本語は使わないようにする
さきほどの黒い子猫の写真のファイル名を「黒い子猫の写真.jpg」みたいに日本語にしてもいいかどうかですが、原則としてファイル名は半角英数を使うようにしましょう。
日本語のファイル名をつけられないわけではないですし、普通にワードプレスにもアップロードできてしまうことがほとんどなのですが、まれにサーバー上でトラブルを起こすことがあります。検索してみるとわかりますが、実際にそういう事例でQ&Aサイトで質問をしている人も多いので、日本語のファイル名は避けておいたほうが無難です。
基本的に画像のファイル名として使わないほうがいい文字をまとめておきましょう。
- 日本語（ひらがな・カタカナ・漢字）
- 全角文字（英数字にも全角があるので注意）
- スペース
- -（ハイフン）と_（アンダーバー）以外の記号
- 環境依存文字
このあたりはトラブルの原因になりえますので、ファイル名に含めないようにしてください。
1-3．画像サイズを整えてからアップしよう
最近はページの表示速度がGoogleの検索順位に与える影響が高くなっている傾向があります。これはスピードアップデートといって、2018年1月の時点ですでにGoogleから発表があった内容です。
ページの読み込み速度をモバイル検索のランキング要素に使用します
くわしくは上記のGoogleウェブマスター向け公式ブログの記事を読んでいただきたいのですが、ここでは何が言いたいかというと、
ということなのです。だから画像サイズを整えるというのはけっこう大事なんですよ。
ちなみに、下記の画像のサイズは「600×388」です。
パソコンで閲覧した際にもバランス的にちょうどよくないですか？ブログ記事に挿入する画像は目安としては横幅が600pxくらいがおすすめです。
私の場合は「Photoshop」という画像編集ソフトを使用して画像サイズを変更してからワードプレスにアップするようにしています。これはプロも使っているソフトなのでかなりおすすめのソフトなのですが、もし画像サイズだけを変更するのであればスマホのアプリでも十分です。
たとえば、「画像サイズ」というアプリはスマホでも簡単にサイズ変更ができますのでおすすめです。くわしい使い方はこの記事では解説しませんが、iPhoneの人は下記のリンクからダウンロードできますのでぜひ試してみてください。
【画像サイズ】アプリのダウンロードはこちらからどうぞ。
操作は簡単なので直感的にできちゃうと思います。スマホでサイズ変更をして、そのままスマホのワードプレスアプリから画像をアップロードするといいですね。画像のアップロード方法は後述します。
1-4．画像にオリジナリティを出す方法
さきほどご紹介したフリー素材サイトから画像をダウンロードしてそのまま使用するのもいいのですが、オリジナリティを高めたいなら画像を少し加工することもおすすめしたいです。
私は記事のアイキャッチ画像に使う画像は次のように毎回文字を入れて加工するようにしています。
これもさきほどご紹介した「Photoshop」を使っているのですが、スマホのアプリでも無料で文字は入れられます。検索すればいろんなアプリが出てくるのでお好みのものを使っていただければ問題ありませんが、一つご紹介しておくと「Skitch」というアプリは私もたまに使用しています。ダウンロードはこちらからどうぞ。
2．ワードプレスで記事内に画像を挿入する方法
では画像の準備ができたところで、いよいよ記事内に画像を挿入していきましょう。流れとしては、
- 用意した画像をワードプレスにアップロードする
- アップロードした画像を記事内に挿入する
という手順になります。順番に解説していきます。
2-1．画像をワードプレスにアップロードする
記事編集画面のツールバーにある「メディアを追加」ボタンをクリックする。
「メディアを追加」の画面が表示されたら、「ファイルをアップロード」をクリックする。
「ファイルを選択」をクリックして、用意しておいた画像を選択する。
これでメディアライブラリに画像が表示されます。
ここまでの手順で画像がワードプレス上にアップロードできたということになります。
2-2．記事内に画像を挿入してみよう
ここからは記事内に画像を挿入する際の手順となります。
さきほどの画像が選択されている状態を確認し、「代替テキスト」を入力して最後に「投稿を挿入」をクリックします。
※ここでは「山の写真」と入力しましたが、挿入する画像の内容がわかるような文章を入力するようにしましょう。
これで記事内に画像が挿入されました。
2-3．アイキャッチ画像の設定もやっておこう
最後にアイキャッチ画像の設定もやっておきます。これはブログのトップページやサイドバーなどのサムネイル画像に使われる画像になります。
私の場合は記事の冒頭部分に挿入している文字入りの画像をいつもそのままアイキャッチ画像に設定します。設定方法はとても簡単です。記事編集画面の右下のほうにある「アイキャッチ画像を設定」をクリックして、表示されるメディアライブラリから画像を選択するだけです。
ちなみに、TwitterやFacebookでシェアした際のサムネイル画像に関しては別の設定になりますので、下記の記事をご参照ください。
3．画像を挿入する際のおさえておくべきポイント
3-1．代替テキストの注意点
代替テキストというのはさきほども少し触れましたが、画像についての説明をする文章です。細かいことは検索すればいくらでも情報がでてくるので省略しますが、ここでは大事なことだけお伝えします。
そもそも代替テキストというのは、画像の内容を的確に伝えるための設定項目です。なので、できるかぎりわかりやすい文章を記入することが求められます。
具体的な例をあげてみましょう。実は先ほどの山の写真は最善の代替テキストとは言えません。「山」でももちろんまちがいではないのですが、ベターなのは「緑が豊かで壮大な山と青空」みたいに表現するのがいいでしょう。
もう1つ注意点があります。それは、
ということなんです。飾り程度に入れたい風景写真など、文脈上あまり意味をなさないものであれば代替テキストは空欄でいいということになります。
3-2．記事の内容に対して関連性の高い画像を使おう
基本的に記事内で使用する画像は、記事の内容と関連性の高いものを使うようにしましょう。
関連性の低い画像を入れることは読者さんに違和感を与えることはもちろんですが、結果的にGoogleの評価を落としてしまうことにつながってしまいます。
画像は無理に入れる必要はありませんので、「ここには画像が必要だな」と思うところにだけ入れるようにしてください。
3-3．記事内での画像の位置と数について
画像の位置や数についても特に決まりがあるわけではありませんが、私の場合は1つ目の見出しの上に1つは必ず入れるようにしています。この記事にもありますよね。これは読者さんの興味を引くとか、見た目を華やかにする意味合いが強いです。
基本形としては、「リード文」⇒「画像」⇒「見出し」⇒「本文」という流れが理想的です。ただこれも正解があるわけではないので場面に応じてアレンジしてもいいと思います。
本文が長いときは適度に本文中に興味を引く画像を入れるのもおすすめです。文字だけの記事よりも画像が入ることでやわらかいイメージになりますし、なによりも見栄えがよくなりますからね。
4．まとめ
以上がワードプレスで画像を挿入する方法とSEO上の注意点となります。これを一つでも守らないと検索順位がガタ落ちするというわけではないですが、わざわざGoogleから減点されるようなことはする必要はないですからね。
やるべきことはしっかりやって、読者さんにもGoogleにも好かれる記事作りをこころがけましょう。
