アイキャッチ画像を作成する時に注意したい事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

OGP画像シミュレータ

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

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

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

FacebookのDebuggerページ

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

まとめ

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

とは言え・・・

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