![読者さん](https://yumako428.com/cocoon/wp-content/uploads/2022/04/strawbwrry-right.png)
TwitterにブログのURL載せてつぶやいたら、カードにCocoonの画像が表示されてる!!!
Cocoonは様々な設定ができるとても素晴らしいテーマで、Twitterで表示されるカードも設定可能ですが、初めはCocoonの画像が登録されています。
・自分のSNSにCocoonの画像が表示されてびっくりした方
・他の方のSNSにCocoonの画像が表示されていて、自分の設定が気になった方
・Cocoonの設定をこれから始める方
この記事では、SNSで自分のブログのURLを載せた時に表示される画像の変更の仕方を説明して、「CocoonのSNS用画像ってどこで変更するの?」の疑問にお答えしていきます。
Cocoonの画像が表示されるってどういうこと?
Cocoonの初期設定のまま、ブログそのものリンクやアイキャッチのない記事のリンクをTwitterに載せると。。。
こうなります。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-1.png)
![ゆまこ](https://yumako428.com/wp-content/uploads/2021/12/22307710.png)
Cocoonの画像が表示されます
せっかく自分のブログをアピールするためにリンクを貼るので、自分専用の画像に変更しましょう。
CocoonのSNS用画像(OGP)をオリジナルに変更する方法
![ゆまこ](https://yumako428.com/wp-content/uploads/2021/12/22316597.png)
OPGって何?
OGP(Open Graph protocol) は、ウェブページをSNSなどで共有したときに、そのページの情報を表示するためのメタタグを使用して出力するデータの仕様で、要は、そのページの魅力を伝えるために設定する、ということです。
![ゆまこ](https://yumako428.com/wp-content/uploads/2021/12/22313696.png)
そんな素敵な設定があるなら、使わない手はないですね。
ありがたいです。
SNS用画像を準備する
画像の大きさは、 『横:縦=1.91:1』 が最適です。
「1800(px) × 942(px) 」「955(px) × 500 (px)」「764(px) × 400(px)」 の大きさになります。
私は、 「1800(px) × 942(px) 」 で作成しました。
作成した画像はこれ。このブログのヘッダーの画像をアレンジしています。
![cocoonオシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/OGP-cocoon-800x419.png)
トップページのSNS用画像(OGP)の変更手順
トップページのSNS用画像は『Cocoon設定 ⇒ OGP』で変更できます。
① Cocoon設定で、OGPタブをクリックします。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-7.png)
② 一番下までスクロールして、「ホームイメージ」のエリアを表示させます。
![ゆまこ](https://yumako428.com/wp-content/uploads/2021/12/22313625.png)
一番下に、Cocoonの大きな画像があるので、下にスクロールしたらすぐにわかります
② 「選択」を押します。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-2.png)
③ 「ファイルをアップロード」→「ファイルを選択」に進みます。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/choice-media-1.png)
④ 設定したい画像を選択して『開く』をクリックします。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-9.png)
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/choice-media-2.png)
⓹ 画像のアップデートが終わったら、画像を選んで「画像の選択」をクリックします。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-10.png)
⑥ 画像が選択されたことを確認して、「変更をまとめて保存」をクリックして完了です。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-11.png)
Twitterでのブログ画像を更新する
設定が出来たら、Twitterで画像が更新できるようにキャッシュクリアをしておきましょう。
(必須ではありません)
手順はこの記事から
>> Twitterのブログ画像が更新されない場合の対応方法
![](https://yumako428.com/cocoon/wp-content/uploads/2022/02/Cocoon-twitter-card-cash-eyecatch-320x180.png)
CocoonのSNS用画像(OGP)がオリジナル画像に変更完了
変更後にもう一度Twitterに投稿すると、オリジナル画像に変更になっていました。
![cocoon-OPG-オシャレで見やすいブログ自分で作る](https://yumako428.com/wp-content/uploads/2021/12/twitter-card-change-OGP-3.png)
![ゆまこ](https://yumako428.com/wp-content/uploads/2021/12/22307347.png)
これで、自分のブログのイメージが伝わります。
みなさまも、Twitterの画像をオリジナルに変更して自分の魅力を伝えていきましょう。