X（Twitter）にサイト画像を表示するには？CocoonのOGP設定

普段、何気なくX（旧Twitter）を見ているときに気になったことがひとつ。

特定の記事をシェアしたときにはアイキャッチ画像が出るのに、サイトのURLをシェアするとCocoonデフォルトの画像のままになっています。

サイト画像は自分で設定しないとずっとデフォルトのまま。せっかく自分のサイトをアピールできるチャンスなので、みんな同じよりイメージを伝えられるような画像があったほうがよいですね。

この記事ではSNSでシェアしたときにカードに任意の画像を表示する方法（OGP）と反映されないときの対処法についてご紹介します。

OGPについて

OGP画像の適切なサイズ

OGP画像はアイキャッチ画像と同様に

横1200×縦630px

程度がベストです。

SNSでシェアしたとき正方形に切り取られることがあるので、特に見せたい部分は真ん中に配置すると良いかと思います。

設定するOGP画像は２種類あります

1. サイトの画像
   • OGP設定が必要（今回設定するところ）
2. 個別記事の画像
   • アイキャッチが自動的に優先されOGP画像として反映される

２か所の画像がありますが、まずは①サイトの画像を設定する方法について。

サイトのメイン画像を設定する方法

設定する箇所はCocoonの「OGP」

１.ダッシュボード→Cocoon設定 → OGP のタブを選択します。

２.ホームイメージ

下の方にホームイメージの項目があるので選択をクリックして任意の画像をアップロードして設定します。最後に保存するボタンを忘れずにクリック。

設定はこれで完了です。

ですがすぐには反映されないことがあります。

Cocoon／OGP設定が反映されない場合の対処法

この設定をおこなってもすぐに反映されない場合、キャッシュが影響していると考えられるので削除しておきましょう。

Cocoonのキャッシュを削除

Cocoon設定 → キャッシュ削除 →　SNSキャッシュを削除します。

X（Twitter）のキャッシュを削除

合わせてX（Twitter）のキャッシュも削除します。

しばらく待つ

キャッシュを削除してもすぐには反映されないので、ここまでの設定が終わったらしばらく待つといつの間にか反映されているかと思います。

ここまでがサイト画像の設定方法と反映されないときの対処法となります。

個別記事のアイキャッチ画像を変更したときは「Card validator」でキャッシュを削除

個別記事を投稿する場合にはアイキャッチ画像を登録しておけば、自動的にOGP画像として反映されます。

ところが後からアイキャッチ画像を変更すると反映されないことがあるので、その場合に使えるツールをご紹介します。

Card validatorを使う

Card validator

OGPで設定した画像の確認と同時にキャッシュを削除してくれます。便利！

固定ページをトップページにしている場合

それから別途、固定ページを作成してそれをトップページにしているサイトもあるかと思います。

その場合の方法は２つ。

1. アイキャッチ画像を設定する
2. SNS画像を設定する

アイキャッチ画像を設定する

個別記事と同じようにアイキャッチ画像を設定すると自動的にOGP画像として反映されます。

ただしそのままだとトップページにアイキャッチ画像が表示されてしまうので、非表示にするCSSを記述します。

/*トップページのみアイキャッチ画像を非表示*/
.home .eye-catch{
display:none;
}

SNS画像を設定する

または、投稿編集画面のサイドバー投稿タブでSNS画像を設定します。

優先順位は　アイキャッチ画像 ＞ SNS画像となるので実際に設定するのはSNS画像だけで表示されるかと思います。

Cocoon／OGP設定まとめ

以上、OGPの設定方法について解説しました。

サイトや記事の雰囲気、イメージを読者に伝えてPVアップ！

OGP画像がデフォルトのままの方は設定してみてはいかがでしょうか。