CocoonのOGP設定方法／X（Twitter）にサイト画像を表示するには？反映されないときの対処法

この記事では、テーマCocoonでOGPを設定する方法を解説します。

プラグインを使用せずに簡単にOGPを設定する方法、反映されないときの対処法についても紹介します。

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

この画像を変更したい人は必見です。

OGPについて

OGPとは

OGP（Open Graph Protocol）とは、ウェブページの情報をSNSでシェアする際に、そのページの内容を正確かつ魅力的に表示するための規格です。OGPを使うことで、シェアされたリンクがどのように見えるかをコントロールできます。これには、タイトル、説明文、画像などが含まれます。

SNSシェアにおけるOGPの重要性

• 目を引きやすくなる
  • OGPを使うと、シェアした時に表示されるタイトルや説明文、画像などを自分で決めることができます。これによりシェアされた内容が見やすく魅力的になります。
• クリックしてもらいやすくなる
  • いい感じの画像や興味を引くタイトル、わかりやすい説明文があると読者はそのリンクをクリックしやすくなります。シェアした内容をもっと多くの人に見てもらえる可能性が高くなります。
• ブランドのイメージを守れる
  • サイトのロゴや色を使った画像、決まったトーンの説明文を設定できるので、SNS上でも一貫したブランドイメージを伝えることができます。

OGP画像の適切なサイズと形式

画像のサイズ

主要なSNSプラットフォームで推奨されるOGP画像のサイズをまとめます。

• Facebook
  • 推奨サイズ: 1200 x 630ピクセル
    最小サイズ: 600 x 315ピクセル
• X（旧：Twitter）
  • 推奨サイズ: 1200 x 675ピクセル
    最小サイズ: 600 x 335ピクセル

形式とファイルサイズ

• ファイル形式
  • JPEGまたはPNG（PNGは透明部分を含む画像に適しています）
• ファイルサイズ
  • 1MB以下が推奨（SNSによって異なる場合がありますが、通常これを超えると読み込みが遅くなります。画像圧縮してできるだけ軽量化するのが望ましいです）

CocoonでのOGP設定の特徴

以下にテーマCocoonにおけるの特徴をまとめます。

プラグイン不要の手軽さ

Cocoonはプラグインを使わずにOGP設定を簡単に設定することができます。Cocoon設定から設定を有効化するだけでOGPのmetaタグが自動的に挿入されます。

設定できるOGP画像

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

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

２か所の画像がありますが、個別記事の画像にはアイキャッチが自動的に優先されOGP画像として反映されるため設定は不要。サイト画像（ホームイメージ）のみOGP設定が必要となります。

CocoonでのOGP設定方法

OGPを設定する具体的な方法を解説します。

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

OGPが反映されない場合の対処法

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

Cocoonのキャッシュを削除

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

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

合わせてアプリの設定でX（Twitter）のキャッシュも削除します。

しばらく待つ

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

アイキャッチ画像を変更したときの対処法

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

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

Card validatorを使ってキャッシュ削除

Card validator

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

OGP設定のための追加情報

固定ページと投稿ページ個別のOGP設定

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

その場合の方法は２つ。

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

ホームイメージの設定と優先度

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

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

SNS画像を設定する

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

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

投稿・固定ページをシェアしたときの画像の優先順位は以下の通りです。

Cocoon／OGP設定まとめ

以上、OGPの設定方法について解説しました。サイトや記事の雰囲気、イメージを読者に伝えてPVアップ！OGP画像がデフォルトのままの方は設定してみてはいかがでしょうか。