eye_catch_head

記事の概要などを読者にイメージで伝える「アイキャッチ画像」。この画像の作成・登録について、重要だけれども地味に難しいという事はみなさんも感じていると思います。

今回は、そんなアイキャッチ画像について、ちょっと見なおしてみたいと思います。

スポンサーリンク

アイキャッチ画像はどこから登録するのか？

アイキャッチ画像は一般的には各投稿や固定ページの編集画面から登録する事ができます。初期設定では画面の右下のあたりに設定する箇所があります。

「アイキャッチ画像を設定」をクリックするとアイキャッチ画像が登録できます。

「アイキャッチ画像を設定」をクリックするとアイキャッチ画像が登録できます。

  • 「アイキャッチ画像」が表示されていない場合は、画面右上の「表示オプション」タブをクリックすると、その中に「アイキャッチ画像」のチェックがあると思うので、チェックしてください。但し、テーマによってはそもそもアイキャッチ画像をサポートしていないものがありますので、その場合は表示されません。

アイキャッチ画像はどこに反映されるのか

公開されているウェブサイト上

どこに反映されるのかはテーマによってそれぞれですが、BizVektorの場合はまず、投稿の一覧表示や、子ページインデックスで反映されます。

投稿アーカイブでのアイキャッチ画像表示例

投稿アーカイブでのアイキャッチ画像表示例

子ページインデックスでの表示例

子ページインデックスでの表示例

facebookなどでシェアされた時のOGP画像やtwitterカード

こちらはテーマやプラグインにもよりますが、facebookでシェアされた時やtwitterで投稿された時にタイムラインに流れる画像にアイキャッチ画像が使われる事が多いです。

facebookタイムラインでのアイキャッチ画像の例

facebookタイムラインでのアイキャッチ画像の例

facebookタイムラインでのアイキャッチ画像の例2

facebookタイムラインでのアイキャッチ画像の例2

縦長や正方形時での表示を想定して画像を作成する

と、いう事で、上記を確認いただければおわかりいただけると思いますが、「横長」で表示される場合と「正方形」で表示される場合などがありますので、それらを考慮して画像を作成する必要があります。

画像サイズはかなり大きいですが1200×630で作成する事が望ましいです。また、横長でも正方形でも違和感のないデザインが望ましいです。

例えば、BizVektorで使用している画像は、文字情報は中央に集中させて、左右が切れてもも文字が途中で切れないようにしたり、左右が切れても違和感がないようにしています。

[左]文字を中央に集中した例 [右]画像の横長でも左右が切れても違和感がない例

[左]文字を中央に集中した例
[右]画像の横長でも左右が切れても違和感がない例

実際にどんな感じで表示されるのかはOGP画像シュミレーターで確認する事ができます。

OGP画像シミュレータ

↓ こんな感じで確認できます。

OGP画像シミュレータでの表示イメージ

OGP画像シミュレータでの表示イメージ

facebookで意図したOGPが反映されない場合

ただし、記事を非公開の状態で書いていたり、後から画像を変えた場合も、facebookではfacebookのサーバーにキャッシュが残ってしまって、意図した画像が表示出来ない事がありますので、そんな時はFacebookのDebuggerページで対象のURLを入力して、一度「Debug」ボタンを押して、次の画面で表示される「Fetch new scrape information」ボタンを押すと、最新の情報を読み込んでくれます。

Facebookの提供する Open Graph Object Debuggerを使います。

Facebookの提供する Open Graph Object Debuggerを使います。

FacebookのDebuggerページ

とは言え、OGP画像はやはり見え方がコントロールしにくいので、facebookへの投稿の際は写真を直接アップロードた上で、コメントに記事のURLを記載するという手法もあったりします。

まとめ

いかがでしたでしょうか？
横長の画像の前提でアイキャッチ画像に左右いっぱいに文字などを使ってしまうと、正方形で表示された時に左右が切れて微妙な状態になってしまったりするので気をつけましょう。

とは言え・・・

やっぱりいちばん大事なのはクリックしたくなる画像にする事を忘れないようにしましょう。

この記事を書いた人

kurudriveBizVektorコア開発者
名古屋で株式会社ベクトル というウェブ制作会社をしています。
普段はWordPressを使って企業サイトなどを制作しつつ、
WordPress関連のイベントにもよく顔を出しています。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー（パネラー）
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー
他

スポンサーリンク
投稿タグ