X（Twitter）にURLをシェアするとき画像を表示するには？CocoonのOGP設定と反映されないときの対処法

この記事では、CocoonテーマのOGP設定、具体的にはSNSのX（旧：Twitter）でサイトURLをシェアしたときの画像を設定する方法を解説します。

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

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

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

OGPについて

OGPとは

OGP（Open Graph Protocol）とは、Webページの情報をSNSなどに共有したときに、適切なタイトルや画像、説明文が表示されるようにするための規格です。

簡単に言うと、リンクをSNSに貼ったときに見栄えを良くするための仕組みです。WebページにOGPタグを埋め込むことで、FacebookやＸ（Twitter）などがそのページの内容を自動的に理解し、リンクプレビューを正しく表示します。

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

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

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

画像のサイズ

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

形式とファイルサイズ

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

CocoonでのOGP設定の特徴

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

プラグイン不要の手軽さ

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

設定できるOGP画像

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

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

CocoonでのOGP設定方法

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

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

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

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

Cocoonのキャッシュを削除

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

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

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

しばらく待つ

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

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

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

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

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

Card validator

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

OGP設定のための追加情報

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

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

その場合の方法は２つ。

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

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

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

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

SNS画像を設定する

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

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

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

Cocoon／OGP設定まとめ

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

この設定は有料テーマSWELLなどでも通常は別途プラグインが必要です。テーマ設定で手軽にできるなんでCocoonは優秀すぎる無料テーマですね！！

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