【Wordpress】TwitterやFacebookにブログ貼った時のアイキャッチ画像の設定（OGP）【Cocoon】

先日ネコ.com@調査員fpさん（@nekko_com）に私のブログをTwitterで紹介して頂いき喜んでいたら

(。´・ω・)ん?

自分のブログの画像がCocoonになってる！

普通TwitterやFacebookにブログの記事のURLを貼り付けるとアイキャッチ画像がちゃんと出ますよね。

↓こんな感じ↓

〇Twitter〇

#じゃがアリゴ　上手く作れなかった人の参考になればいいな！

【不器用さんのじゃがアリゴ】チーズが上手く溶けない時はレンジでチンしちゃえ！ https://t.co/StQvBQNEWF

— さ恵きふみ＠マンガ家 (@saekifumi23) February 7, 2019

〇Facebook〇

しかしトップページは普段貼らないから気が付かず、今まで設定していませんでした。

こりゃいかんというわけで慌てて設定。その方法を紹介します。

TwitterやFacebookに自分のブログ貼った時表示されるアイキャッチ画像はOGPという設定で変更できる

OGPとはサイトの情報【タイトル、内容、アイキャッチ（サムネイル）画像】などを簡易的に表示する仕組みで、TwitterやFacebookなどのSNSでブログのURL貼り付けた時に下に自動で出来るアレの事です。

Cocoonでは初期設定で何もいじらなくても記事を作成した時にアイキャッチ画像を入れていればSNSなどでURLを貼り付けた時に自動的に組み込まれるようになっています。

だがトップページよ、お前は別だ！

トップページは自分で設定してあげないとデフォルトの画像が出ます。

どうせ設定するなら手間は省きたいですよね。Facebook・Twitter共に綺麗に表示される比率は1：1.91で画像サイズを縦630×横1200pixelにするとその比率になります。

①Wordpressのダッシュボードを開いてCocoon設定→OGP

②下の方に「ホームイメージ」があるので画像のアップロードから好きな画像を選択し「変更をまとめて保存」

これで画像の設定は完了です！ついでにTwitterカードも設定しましょう。

TwitterカードはTwitterで表示する画像の事を指します。

初期設定ではTwitterカードのタイプはサマリーになっています。

「サマリー」の場合は画像が縮小される上に途切れてしまうので「大きな画像のサマリー」にするのがオススメです。

設定してから反映されるまでタイムラグがあるので確認する場合は少し待ちましょう。

すぐに確認したい場合Twitterは Card validator から出来ます。

①【Card URL】にURLを入力

②【Preview card】をクリック

するとプレビュー画面が表示されます。

やったー！ちゃんと反映されたー♪

せっかく紹介してもらえてもきちんと表示されないのはもったいないので設定してみてください。