WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

アイキャッチ画像とは各記事の看板画像のことです。WordPress では、個別の記事ページだけでなく、記事が一覧で表示されるときにも利用されています。

テーマ Twenty Seventeen の個別記事

 

人気記事ランキング

 

テーマ Wallstreet の記事一覧

画像は一例ですが、さまざまな場面で記事を強調する画像として利用されているのがわかると思います。文字だけの記事よりもずっと魅力的に感じますよね。

アイキャッチ画像は特別です


当初、このブログはアイキャッチ画像を使っていませんでした。記事の一番上に大きな画像を載せるのと大して変わらないだろうと思っていたのですが、WordPress の利用経験が長くなってくると、やはり特別な画像なんだなと感じることが多くなりました。

世の中には数多くのテーマがありますが、アイキャッチ画像を上手に利用しているテーマもたくさんあります。ブログトップページでアイキャッチ画像と一緒に記事を一覧表示したり、サイドバーに新着記事を並べるときにも利用していたり、ブログを華やかに見せてくれる要素としてうまく活用しています。

また各種プラグインでも利用されていることが多く、このブログのサイドバーに置いている人気記事ランキングでもアイキャッチ画像を使っています。

WordPress でブログを運営しているけど、アイキャッチ画像は設定していないという方も多くおられると思いますので、ぜひこの機会に使い方を覚えて利用してみてください。

この記事では、アイキャッチ画像の設定方法、おすすめの画像サイズ、SNS での利用方法まで詳しく解説していきます。

アイキャッチ画像の使い方


画像は記事の投稿ページです。アイキャッチ画像は記事の投稿ページで追加・編集することが可能です。これまでに投稿した記事に、後からアイキャッチ画像を追加することもできます。

記事の投稿ページにアイキャッチ画像の欄が表示されていない場合は、上の画像と下の解説を参考にして表示してください。

  1. ページ上部の表示オプションをクリック(タップ)
  2. アイキャッチ画像をチェック
  3. ページ右下にアイキャッチ画像の欄が表示されます

 

アイキャッチ画像を設定する

アイキャッチ画像を設定と書かれたリンクをクリック(タップ)すると、画像をアップロードする画面が表示されますので、作成したアイキャッチ画像をアップロードしましょう。そして右下のアイキャッチ画像を設定ボタンを押すと、記事にアイキャッチ画像が追加されます。

 

アイキャッチ画像が設定される

アイキャッチ画像が設定されると、ページ右下のアイキャッチ画像欄にこのように表示されます。表示されたら記事を保存しましょう。

 

表示されました!

個別の記事ページを確認してみると、さきほど設定したアイキャッチ画像が表示されています。ページトップに大きく表示されていてインパクトは絶大ですね!

アイキャッチ画像のサイズは?


ずばり 1200px × 630px がおすすめです!

WordPress で使用しているテーマによって、アイキャッチ画像の表示サイズは変わってきます。このブログで現在使用しているテーマ Twenty Seventeen では、個別の記事ページでとても大きく表示されますので、このサイズでも大きすぎることはありません。しかし他のテーマではアイキャッチ画像が、それほど大きく表示されないこともあります。

サイズが 1200px × 630px の画像は非常に大きいです。使用しているテーマによっては無駄なサイズに感じるかもしれませんが、このサイズをおすすめしているのには理由があります。

それは Facebook でシェアしたときに画像が綺麗に表示されるサイズが 1200px × 630px だからです。実はアイキャッチ画像は、記事の看板画像としてだけでなく、SNS のシェア用画像としても利用することができます。このサイズにしておくと、それぞれを別に作成する手間がなくなりますので、一石二鳥にも三鳥にもなります。

SNSのシェア用画像とは?


Facebook

Twitter

適切に設定を行った上で Facebook、Twitter それぞれでシェアされると画像のような形で WordPress の記事が紹介されます。サイズが 1200px × 630px の場合、Facebook と Twitter の両方に対応でき、横長の大きな画像が表示されるため、見た目の印象も非常に強くなります。

 

SNSでシェアされたときにどんな表示になるか

現在、あなたのブログがシェアされたときにどんな表示になっているのかチェックする場合は、これらのサイトを利用してください。各記事の URL を入力すると、上記画像のようにシェアされたときの画面が表示されます。

※ それぞれ Facebook と Twitter のアカウントが必要です。

作成した画像をシミュレートしたい方は以下のサイトを利用してください。

SNSのシェア用設定を行う


SNS で画像付きでシェアされるためには OGP という設定を行わなければなりません。

上記のようなタグがブログのソースコードにないと、シェアされたときに画像が表示されません。

WordPress の場合は、OGP の設定が簡単に行えるようになるプラグインが用意されていますので、そちらを利用させてもらいましょう。

All in One SEO Pack

今回は All in One SEO Pack についての設定を解説します。その他の SEO プラグインでも同じ設定が行えますので、他のプラグインを利用されている方はそちらで画像を設定してください。

 

1. アイキャッチ画像の URL を取得する

記事投稿ページのアイキャッチ画像の欄を表示し、画像の上で右クリックを行って画像アドレスをコピーしましょう。

 

2. All in One SEO Pack のソーシャル設定を開く

記事投稿ページの下の方に、All in One SEO Pack の欄があるので、そこのソーシャル設定のタブを開きましょう。

 

3. 画像の URL を貼り付けてサイズを指定する

カスタム画像の欄にさきほどコピーした、アイキャッチ画像の URL を貼り付けましょう。そしてその下の画像の幅を指定画像の高さを指定に、アップロードしたアイキャッチ画像のサイズを入力してください。

今回は 1200px × 630px で画像を作成しましたので、1200 と 630 を入力します。

そして記事を保存しましょう。

これで SNS でシェアされたときに、アイキャッチ画像付きでシェアされるようになります。

 

4. シェアされたときの表示をチェックしましょう

上記で紹介したサイトでシェアされたときの表示をチェックしてみて、以下の画像のように表示されていると設定は正常にできています。

今後は記事を投稿する際に、アイキャッチ画像を設定してから SNS のシェア画像に指定することを忘れないようにしてください。

大変かもしれませんが、この作業を毎回やっていると、シェア数の増加やアクセスアップに繋がる可能性は高いです。ぜひ頑張ってください!

 

Facebook シェアデバッガー

 

Twitter Card validator

最後に


アイキャッチ画像が用意されている記事と用意されていない記事では、読者が受ける印象は大きく変わります。

時間をかけて書いた記事や、みんなに読んでもらいたい記事には、アイキャッチ画像を頑張って用意してみましょう。手間はかかりますが、その分きっといいことがあるはずです。

SNS でバズる(拡散される)ことを目指してシェアボタンの設置も忘れずに!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)