【画像で解説】WordPressでアイキャッチ画像を設定する方法と5つのポイント
※本ページにはプロモーションが含まれている場合があります。
・WordPressでアイキャッチ画像を設定する方法を知りたい！
・SEOや売上に効果的なアイキャッチ画像のポイントを知りたい！
・アイキャッチ画像のメリットや効果を知りたい！
本記事の内容
- アイキャッチ画像を設定する3つのメリット
- WordPresでアイキャッチ画像を設定する方法
- SEOに効果的なアイキャッチ画像の5つのポイント
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、WordPressでアイキャッチ画像を設定する方法だけでなく、SEOや売上に効果的なアイキャッチ画像のポイントやツールまで分かります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
WordPresでアイキャッチ画像を設定する3つのメリット
ブログ記事ページのトップ部分や記事一覧で表示されるアイキャッチ画像。
当ブログでは以下のように表示されていますが、、、
こうしたアイキャッチ画像を設定することで以下のようなメリットがあります。
- メリット①：SNSで集客しやすくなる
- メリット②：ブログ内での回遊率が上がる
- メリット③：読者の滞在時間が上がる
メリット①：SNSで集客しやすくなる
1つ目のメリットは、SNSで集客しやすくなることです。
例えばTwitterではブログ記事をツイートで発信すると、以下のようにアイキャッチ画像が表示されます。
🌸応募について🌸
🌞応募条件
いいね & RT🌞対象
フォロワー様限定
(まだフォロワーでない方は
この機会に是非繋がりましょう😆)応募をしてリプ下されば
DMにて資料をプレゼント致します😊✨それまでこちらの記事を読んでお待ちください😆https://t.co/dyIVWSGJMo
— なべたろ🌞半年で1000万PV【SEO】 (@seonabe) January 9, 2021
このようにツイートにアイキャッチ画像が表示されるのですが、
- ツイートに画像が載っていることでユーザーの目を引ける
- そのアイキャッチ画像が魅力的であれば、さらに記事を読んでくれる可能性が高まる
という理由で、ツイートから集客しやすくなります。
メリット②：ブログ内での回遊率が上がる
アイキャッチ画像の2つ目のメリットは、ブログ内での回遊率が上がることです。
アイキャッチ画像は以下のように、
↓記事一覧ページや
↓内部リンクのブログカードでも表示されます。
つまりツイートで発信した時と同じ理由で、
ブログを読んでくれているユーザーに関連記事をより印象付けて、より魅力的に魅せることでどんどん次の記事を読んでくれる可能性が高くなります。
よって1人あたり何ページも読んでくれやすくなり、回遊率が上がります。
「SEOで評価アップ」・「回遊されるので売上も上がりやすい」などなど嬉しいことがたくさんです。
メリット③：読者の滞在時間が上がる
3つ目のメリットは、読者の滞在時間が上がることです。
ちゃんと魅力的なアイキャッチ画像が設定されていると、記事を読む前から興味が高まり記事を読むモチベーションが高まります。
記事を読むモチベーションをあらかじめ高めておくことで、記事をしっかり読んでくれたり、内部リンクなどの誘導も踏んでくれやすくなります。
・SNSで集客しやすい
・回遊率が上がる
・滞在時間が上がる
・よってSEOで評価されやすく・売上も上がりやすい！
効果的なアイキャッチ画像を設定するためのポイントは、アイキャッチ画像の設定方法の後に「SEOに効果的なアイキャッチ画像の5つのポイント【WordPress】」の見出しで解説します。
WordPresでアイキャッチ画像を設定する方法
それでは、WordPressでアイキャッチ画像を設定する方法を解説します。
WordPressのエディターに合わせて、以下の2つをそれぞれ順に解説します。
新エディタ(Gutenberg)での設定方法
手順①：投稿の編集画面を開く
まずはアイキャッチ画像を設定したい投稿の編集画面を開きます。
手順②：「アイキャッチ画像」をクリック
次に、画面の右のメニューにある「アイキャッチ画像」という項目をクリックします。
ここに「アイキャッチ画像」という設定項目がない場合は、まずは以下の記事を参考に、アイキャッチ画像を使えるようにする必要があります。
>> 【画像付き】WordPressでアイキャッチ画像の設定項目が表示されない時の対処法
手順③：「アイキャッチ画像を設定」をクリック
続いて、「アイキャッチ画像を設定」をクリックします。
手順④：アイキャッチ画像にしたい画像をアップロードする
上の画像のように、アップロード済みのメディアの一覧が表示されるので、アイキャッチ画像にしたい画像を選択します。
新しくアップロードしてアイキャッチ画像を設定したい場合は、
このようにドラッグ&ドロップで画像をアップロードしましょう。
画像をアップロードあるいは既存の画像を選択(クリック)したら、上のように青い枠とチェックマークが付いて画面右側にいろんな入力項目が表示されます。
「代替テキスト」はSEOのために重要な項目！！後ほど「ポイント④：Alt属性(代替テキスト)を設定しよう」の見出しで解説します。
手順⑤：「アイキャッチ画像を設定」をクリック
画面右下の「アイキャッチ画像を設定」をクリックすれば、アイキャッチ画像の設定が完了です。
記事編集画面でも、上のようにアイキャッチ画像のサムネイルが表示されています。
プレビューで確認してみよう
プレビューで記事を確認してみると、アイキャッチ画像が設定できています。
次は「旧エディタ(クラシックエディタ)での設定方法」なので、不要な方は「SEOに効果的なアイキャッチ画像の5つのポイント【WordPress】」の見出しまでスキップしてください。
旧エディタ(クラシックエディタ)での設定方法
手順①：投稿の編集画面を開く
まずはアイキャッチ画像を設定したい記事の編集画面を開きます。
手順②：「アイキャッチ画像」をクリック
記事編集画面の右の方に、「アイキャッチ画像」という項目があるのでクリックします。
ここに「アイキャッチ画像」という設定項目がない場合は、まずはアイキャッチ画像を使えるようにする必要があるので、以下の記事を参考に設定してください。
>> 【画像付き】WordPressでアイキャッチ画像の設定項目が表示されない時の対処法
手順③：「アイキャッチ画像を設定」をクリック
タブが開かれるので「アイキャッチ画像を設定」をクリックします。
手順④：アイキャッチ画像にしたい画像をアップロードする
すると上の画像のように、アップロード済みの画像が一覧で表示されるので、アイキャッチ画像に使いたい画像をクリックします。
既存の画像ではなく新しく画像をアップロードしたい場合は、
このように画像をドラッグ&ドロップでアップロードできます。
画像を選択(クリック)もしくは新しい画像をアップロードすると、上の画像のように青い枠とチェックマークが付き、画面右側にメニューが表示されます。
このメニューのうちの「代替テキスト」という項目はSEOでとても重要な項目です。詳しくは後ほど「ポイント④：Alt属性(代替テキスト)を設定しよう」で解説します。
手順⑤：「アイキャッチ画像を設定」をクリック
あとは、画面右下の「アイキャッチ画像を設定」をクリックすればアイキャッチ画像の設定が完了です。
記事編集画面の右の方に、アイキャッチ画像のサムネイルが表示されています。
プレビューで確認してみよう
プレビューで記事を確認してみると、無事アイキャッチ画像が表示されています。
SEOに効果的なアイキャッチ画像の5つのポイント【WordPress】
アイキャッチ画像の設定方法がわかったところで、売上やSEOに効果的なアイキャッチ画像の5つのポイントを解説します。
ポイント①：アイキャッチ画像が表示される4つの場所
まずは序章のようなものですが、
アイキャッチ画像が表示される4つの場所をまず理解しましょう。
アイキャッチ画像は以下の4つの箇所で表示されます。
アイキャッチ画像が表示される場所
- 記事ページのトップ
- 記事一覧
- ブログカード(内部リンク)
- SNS
↓①記事ページのトップ
↓②記事一覧
↓③ブログカード(内部リンク)
↓④SNS
🌸応募について🌸
🌞応募条件
いいね & RT🌞対象
フォロワー様限定
(まだフォロワーでない方は
この機会に是非繋がりましょう😆)応募をしてリプ下されば
DMにて資料をプレゼント致します😊✨それまでこちらの記事を読んでお待ちください😆https://t.co/dyIVWSGJMo
— なべたろ🌞半年で1000万PV【SEO】 (@seonabe) January 9, 2021
この4つの表示箇所を踏まえて、続けてポイントを解説します。
ポイント②：アイキャッチ画像のサイズを調整しよう
4つの表示箇所でアイキャッチ画像の表示サイズや縦横の比率が異なるので、全ての箇所でキレイに見せるためにサイズと縦横比にこだわる必要があります。
結論としては、
1,200px(横) × 630px(縦)のサイズにして、
以下のように中央の正方形に重要なテキストやイラストなどを収めることがおすすめです。
理由は、以下の2つです。
- 上記のサイズと比率にすることで、4箇所全てで綺麗に表示される
- 正方形に重要なテキストやイラストを収めることで、SNSやブログカードで途切れずに見える
GoogleやTwitterの推奨サイズやWordPressのテーマごとの推奨サイズ・自分のブログに最適なサイズの決め方などは以下の記事で詳しく解説しています。
>> 【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】
ポイント③：目を引く・興味を引くアイキャッチ画像にしよう
3つ目のポイントは当然ですが、
- 目を引く
- 興味を引く
アイキャッチ画像にすることです。
アイキャッチ画像の大切な目的は
- 目立たせて記事に気づかせること
- 興味を引いて記事を読ませること
の2つです。
ブログのデザインを統一する、お洒落にする、といったことよりも上の2つの方が売上として大切です。
なのでよく目立ち、興味を引くアイキャッチ画像になるようにしましょう。
文字を使うのもおすすめです。
ポイント④：Alt属性(代替テキスト)を設定しよう
Alt属性とは画像のHTMLタグの中にある以下の箇所です。
<img src="画像のURL" alt="これがAlt属性！" width="" height="">このAlt属性を設定すると
- Googleの画像検索でも集約できる
- Googleに何の画像か伝わりSEO効果がある
というメリットがあります。
WordPressでアイキャッチ画像のAlt属性を設定するには以下の手順で設定できます。
Alt属性は記事のアイキャッチ画像を選択する画面で設定します。
画面の右側に「代替テキスト」という項目がありますが、この「代替テキスト」がAlt属性になります。
アイキャッチ画像の場合、Alt属性には記事タイトルを入れておくのがSEOでは良しとされているので記事タイトルを入力しておきましょう。
ポイント⑤：アイキャッチ画像は圧縮しておこう
最後のポイントは、アイキャッチ画像に使う画像を圧縮することです。
画像のデータ容量が大きいとサイトの読み込みが遅くなりSEOでの評価が下がります。
画像を圧縮することでサイズ(データのサイズ)を90%ほど小さくできることも珍しくはなく、サイトの速度を大幅に速くできます。
圧縮するには以下のプラグインがおすすめです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Googleも推奨している「WebP」という画像形式を使うとさらにサイトが速くなります。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
WordPressのアイキャッチ画像に便利なプラグイン5選
①Featured Image Generator
Featured Image Generatorは、WordPressの管理画面からフリー素材を検索してそのまま加工もできるプラグインです。
画像検索はUnsplashという有名なフリー素材サイトから検索できるので、素敵な画像がたくさんあります。
Featured Image Generatorは無料で使えますが、有料版にするとPixabayからも画像検索することができるようになります。
②Auto Featured Image(Auto Post Thumbnail)
>> Auto Featured Image (Auto Post Thumbnail)
Auto Featured Image (Auto Post Thumbnail)は、アイキャッチ画像を設定していない記事のアイキャッチ画像を自動で設定してくれるプラグインです。
そんな時でも、記事の中で一番最初に使われている画像をアイキャッチ画像に設定してくれるので、
という場合にも便利です。
既に公開済みの記事のアイキャッチ画像も対応できます。
③Require Featured Image
Require Featured Imageは、アイキャッチ画像を設定していないと記事の公開をできないようにするプラグインです。
アイキャッチ画像の設定を忘れがちな場合にはおすすめです。
④Easy Featured Images
Easy Featured Imagesは、記事一覧(投稿一覧や固定ページ一覧)の画面でアイキャッチ画像を設定できるようになるプラグインです。
アイキャッチ画像は通常は記事の編集画面を開いてから設定しますが、複数の記事のアイキャッチ画像を変更したい時には記事一覧から変更できた方が便利。
そんな時に便利なプラグインです。
⑤Default Featured Image
Easy Featured Imagesは、アイキャッチ画像を設定していない記事には、デフォルトで指定しておいた画像を自動でアイキャッチ画像に設定してくれるという機能のプラグインです。
先ほど紹介した「②Auto Featured Image(Auto Post Thumbnail)」との違いは、
- Auto Featured Image(Auto Post Thumbnail)
→記事内の最初の画像がアイキャッチ画像になる - Easy Featured Images
→デフォルトで指定しておいた画像がアイキャッチ画像になる
という点です。
統一したい場合や、記事内の最初の画像では不安な場合に便利です。
WordPressのアイキャッチ画像に関するQ&A
Q. アイキャッチ画像の設定欄がない場合は？
WordPressの記事編集画面に「アイキャッチ画像」という設定項目が表示されない場合は、まずWordPressでアイキャッチ画像を使える(設定できる)ようにする必要があります。
具体的なやり方は以下の記事で解説しているのでこちらをご覧ください。
>> 【画像付き】WordPressでアイキャッチ画像の設定項目が表示されない時の対処法
Q. アイキャッチ画像のおすすめのサイズは？
アイキャッチ画像におすすめのサイズは以下の記事で詳しく解説しています。
WordPressテーマ別の推奨サイズや自分のブログに最適なサイズの決め方も解説しています。
>> 【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】
Q. アイキャッチ画像に使えるフリー素材サイトを教えて
アイキャッチ画像に使うフリー素材は以下のサイトがおすすめです。
- unDraw：お洒落なイラスト
- Pixabay：高画質な写真が多数
- GIRLY DROP：女性のブロガーにおすすめ
他にもたくさんおすすめなフリー素材サイトがあるので、以下の記事もあわせてご覧ください。
>> 【無料】ブログに使えるフリー画像素材サイトおすすめ34選
Q. アイキャッチ画像の作成に便利なツールは？
アイキャッチ画像を作成するにはCanvaというツールがおすすめです。
いろんなテンプレートや素材もあって無料でおしゃれなアイキャッチ画像を作れます。
WordPressのアイキャッチ画像はSEOでも大事！
WordPressでアイキャッチ画像を設定する方法と効果的なアイキャッチの設定方法を解説しました。
アイキャッチ画像1つで記事の読まれ方もSEOの評価も大きく変わるので、是非今回のポイントを抑えてアイキャッチ画像を設定してみてください。
アイキャッチ画像の圧縮にはEWWW Image Optimizerがおすすめです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Googleが推奨する画像形式「WebP」の使い方は以下の記事で解説しています。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
