そのアイキャッチ画像…きちんと表示されていますか？

どうも、Gammy Design Works代表の石上です。

 

WordPressでブログを書いた時に、

記事一覧で表示される画像、もしくは

facebookやtwitterでシェアした時に、

表示される画像があります。

 

 

それが「アイキャッチ画像」と呼ばれるものになるんですね。

 

 

いつもはSNSと連動させて、

自動でお知らせを飛ばすことができる、

「Jetpack」というプラグインを使っていました。

 

ですが、SNS側で表示された時に設定したアイキャッチ画像を表示しなくて、

違う画像を表示する時があるんですね(^_^;)

 

こんな感じで正常に表示される時もあれば…

（これはWordpress→twitter、twitter→Facebookの順に連動させています）

 

ですが、たまにこんなサイドバーの画像を拾ってきたりする時がありますｗ

 

せっかくアイキャッチとして設定した画像なのに、

表示されないと悲しいですよねｗ

 

 

そこでJetpackの連動設定に頼らず、別のプラグインの設定で、

アイキャッチを正常に表示させようと思います。

 

 

1.All In One SEO Packの「Social Meta」機能を使う

SEOに関するプラグインといえばこれ！ってぐらいに、

メジャーなプラグインの「All In One SEO Pack」ですが、

SNSとシェアした時の設定もできるんです。

 

それでは、さっそく解説していきます＾＾

 

 

１．「Social Meta」機能の有効化

1.ダッシュボード左メニューの「All In One SEO」から「Feature Manager」をクリック

 

 

2.「Social Meta」の「Activate」をクリック。

これで有効になります。

 

3.メニューに「Social Meta」が追加されるので、それをクリック。

 

 

２．JetpackのOGPを停止する

※プラグインの「Jetpack」を使用していない方は飛ばして下さい。

 

OGPとは…

OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。

Last Day.jpより引用　　http://www.lastday.jp/2012/04/19/ogp-is-important

 

なんのこっちゃよくわかりませんね(^_^;)

とりあえずここでは、Facebookやtwitterでシェアした時に、

表示される画像と覚えておいてください。

 

で、Jetpackから出ているこの機能が、ちょっとクセがあるので、

「All In One SEO Pack」の機能で止めちゃいますｗ

 

 

1.「Social Meta」の「Disable Jetpack Tags」にチェックを入れます。

 

 

だけど、この状態だとOGP（シェアした時の画像）が未設定になってしまうので、

今度はこのようになってしまいます↓

この画像は「No Image」つまりアイキャッチ画像が未設定の時に、

表示される画像なんですね。

 

投稿画面では設定しているのですが、

Jetpackでの設定を止めているのでこのような画像が表示されます。

 

 

３．「All In One SEO Pack」で表示される画像を指定する

というわけで、今度はこちらのプラグインの中で、

設定し直してやることで、SNSでシェアした時に、

アイキャッチ画像が表示されることになります。

 

 

1.「Sosial Meta」のページ内にある、

「Image Settings」から「アイキャッチ画像」を選択。

ちなみに「Default Image」すなわち、標準設定だと、

上記の雪ダルマみたいな画像が出ますｗ

 

 

2.これを「アイキャッチ画像」に設定して新たに投稿すると、

無事に表示されました＾＾

 

 

2.アイキャッチを表示させるもう1つの方法

これは、SBアカデミーの先生に教えてもらった方法になります。

 

僕が投稿したもののアイキャッチが雪ダルマ野郎になっていたのを見て、

急遽解説動画を作ってくれていました(^_^;)

 

 

1.記事の投稿ページを下にスクロールさせると、「All In One SEO Pack」の設定項目があります。

「Social Settings」のタブをクリック。

 

 

2.「Custom Image」の「Upload Image」をクリック。

 

 

3.利用したいアイキャッチ画像を選択して、そのまま投稿します。

 

 

3.アイキャッチの画像サイズ　追記2015.2.21

SNSでシェアした時に、きれいにアイキャッチ画像を表示させるには、

サイズも重要です。

大きめの画像の場合は、最低でも「幅600px　高さ315px」に、

尚且つ「使用画像の中で一番横幅の拾い画像」にしておくと、

ほぼ確実にアイキャッチ画像として設定した画像を、

表示させることができると思います。

 

推奨サイズは「幅1200px　高さ630px」ぐらいで、

比率としては「幅2：高さ1」ぐらいの比率にしておくと、

より確実に設定したアイキャッチ画像が表示されると思います。

 

 

まとめ

「Jetpack」と「All In One SEO Pack」
両方とも、とても便利なプラグインです。

 

特性をよく理解して、上手に使っていきましょう＾＾

 

最後まで読んでいただき、ありがとうございました<(_ _)>

 

PS.
投稿後すぐにメッセをくれた松原さん、
設定の解説動画を作ってくれた、SBアカデミーの牛王田さん、

アドバイスありがとうございました<(_ _)>