Cocoonで作ったブログのURLをTwitterにツイートしたけど、カードにCocoonの画像が表示された！
好みの画像を表示させたいけど、変更方法がわからない。
そんな悩みを抱える人は意外と多いようです。
そこで、この記事では「CocoonのSNS用画像」をオリジナルに変更する方法を解説したいと思います。
TwitterやLINEでブログのトップページ画像が表示されない原因
TwitterやLINEなどのSNSにブログのURLを投稿したときに画像が表示されるのはOGPというタグ情報によるものです。
OGPとはOpen Graph Protocolの略称。
ページのタイトル、URL、概要、画像（サムネイル）が表示されるようにHTMLソースに記述するタグ情報です。
Cocoonの画像が表示されるのはデフォルト設定になっているのが原因です。
画像を変更したのに表示が変わらないという場合は、SNS上でキャッシュが残っている場合がほとんどの原因です。
では、対処法を順番に観ていきましょう。
まずはCocoonのデフォルト画像を変更する方法を解説したいと思います。
CocoonでOGPを設定して画像を変更する方法
トップページの画像はCocoon設定→OGPで変更できます。
Cocoon設定→OGPで変更
下へスクロールすると、ホームイメージという項目があるので、ここに設定されている画像を変更します。
Cocoonの画像になっていますね。
この状態でTwitterに投稿すると、以下のように表示されます。
表示させたい画像を選択もしくはアップロード
画像を変更するには画像のアップロードの選択を押して、メディアライブラリーもしくはファイルをアップロードを選びます。
変更をまとめて保存します。
しかし、OGP画像を変更しても、すぐにTwitterカードに反映されません。
変更したのに表示が変わらないという人は以下のことを試してみてください。
Cocoon設定でキャッシュを削除
反映させるには、Cocoon設定でキャッシュを削除します。
キャッシュを削除したら、以下のサイトに行きます。
Card validatorで表示設定
使い方は簡単で、URLにブログのURLを入力し「Preview card」をクリックするだけです。
設定した画像が表示されないときは、表示されるまで「Preview card」をクリックしてください。
画像が表示されれば、反映されます。
LINEでの表示
Twitterはすぐに表示されますが、LINEは上記の設定を行ってもすぐには反映されないことがあります。
そんな時はPage PokerというLINE公式のキャッシュクリア用のツールがあるので、試してみてください。
ブログのURLを入力して、「Clear Cache」にチェックを入れ「Submit」をクリックします。
あとは変更した後の画像になっていることを確認してください。
LINEでの表示を確認するにはラッコツールズのOGP一括チェックツールというサイトがあります。
※パソコン、スマホ、Facebook、Twitterの表示確認もまとめてできます。
うまく表示されなくても、そのうち表示されるようになるので待ちましょう。
まとめ
ということで、TwitterやLINEでトップページの画像が表示されない時の対処法をご紹介しました。
ブログトップページのSNS用画像は「Cocoon設定→ OGP」で変更できます。
簡単にできますので、ぜひやってみてください。
