SNSで記事をシェアしたとき、アイキャッチ画像に「Cocoon」のテーマ画像が表示されませんか？
WordPressテーマ「
これだと味気ないので、CocoonでOGPを正しく設定する手順と、変更しても反映されないときの原因や対処法を、初心者の方にも分かるように解説します！
OGPとは？SNSでの見え方を整えるための仕組み
ブログの記事を「X（旧Twitter）」や「Facebook」にシェアすると「タイトル・説明文・アイキャッチ画像」といったものが自動で表示されますよね。
この仕組みを支えているのが「OGP（Open Graph Protocol）」です。
OGPとは、記事のなかに埋め込まれた「SNS向けの情報タグ」であり、以下のような内容をSNSに伝える役割を持っています。
- どんなタイトルの記事なのか
- どんな説明文を表示すべきか
- どの画像をサムネイルに使うか
つまり、OGPとは「あなたのブログ記事をSNSでどう見せるか」を決める設計図のようなものです。
見た目が整っていないとクリック率が下がるため、Cocoonを使うならOGP設定は必ず押さえておくべきポイントです。
一方で、サムネイルを設定していない場合は「OGPに設定している画像」が反映される仕様です。
超簡単！Cocoonでの設定方法
WordPressのテーマが「Cocoon」の場合、OGPの画像変更は簡単です。
以下の3ステップを踏むだけなので、3分もあれば終わります。
- STEP 1「OGP」を開く
ダッシュボードから「Cocoon設定」を選択し、メニューの一覧から「OGP」を開く。
「OGP」の位置 - STEP 2ホームイメージを設定する
ページの下部にある「ホームイメージ」より「選択」を開く。
OGPの設定画面 - STEP 3OGPに使用する画像を選ぶ
OGPに使用する画像を選び、画面右下にある「画像の選択」を押す。
OGP画像の変更後 - STEP 4設定を保存する
元のページに戻り、左下の「変更をまとめて保存」というボタンを押す。
OGPの画像設定は、以上です。
OGPの画像に最適なサイズとは？
OGPの画像は「横1200px×縦630px」がおすすめです。
これは「Facebook」や「X（旧Twitter）」を始め、主要なSNSで共通して推奨されているOGP画像のサイズ。
CocoonのOGP設定でもこのサイズを基準にしておけば、以下のようなメリットがあります。
- 画像が上下や左右で切り取られにくい
- SNSごとの見え方にズレが出ない
- スマホ表示でもバランスが良い
画像の容量が大きいと表示が遅くなるため、300KB以内を目安に作成すると安心です。
もしも容量が大きすぎるときは、こちらの「あっしゅくま」でサイズはそのままに容量だけを下げることができます。
圧縮しても300KBを超えてしまうときは「さらに圧縮」を選択して「ふつうの圧縮」を「超強めの圧縮」に変更して再度お試しください！
画像をそのまま当記事に貼り付けてしまうと表示速度が遅くなってしまうため、もしも圧縮前後の違いが見たい人は、以下から直接確認してみてください（たぶん差が分からないと思います）。
ファイル形式は「jpg・png」が良く、以下で使い分けるのが最適です。
| PNG | イラスト・ロゴ・アイコン |
|---|---|
| JPG | 写真・グラデーション・実写素材 |
目に映るのは「中央寄りの正方形」
OGP画像の推奨サイズは「1200px×630px」の横長です。
ただ、実際にSNSでシェアされたときに映るのは『中央付近の正方形』ということがあります。
横長の画像は、自動的に上下や左右が切り取られ、中央部分だけ表示されることがあります。
そのため「ロゴ・タイトル・人物写真」などの「最も伝えたい要素」は、中央の正方形エリアに収めるのが鉄則です。
各種SNSでどのように反映されるか確認しよう
CocoonでOGP画像を設定したら、SNSでどのように表示されるか確認しておきましょう。
なぜなら、WordPressの編集画面では正常に見えていても、実際のSNSではズレていることがあるからです。
とはいえ、SNSで1件ずつ調べるのは面倒…
そこで、こちらのOGP確認ツールを使います。
このツールでブログのURLを入力すると…
- X（旧Twitter）
- はてなブックマーク
- LINE
のSNSで、どのように画像が表示されるかチェックできます！
「OGP確認ツール」の使用画面
CocoonでOGPが反映されないときの対処法
「CocoonでOGP画像を変更したのに、テーマ画像が表示される…」
実はこれ、珍しいことではありません。
OGPが反映されない原因はいくつかあるので、その対処法を確認していきましょう。
SNSのキャッシュが残っている
FacebookやX（旧Twitter）は、一度シェアしたURLの情報を「キャッシュ」として保存します。
そのため、ブログ側でOGP画像を更新しても、SNSは古い情報を読み続けてしまうことがあります。
シェアデバッガーにアクセスし、URLを入力して「再スクレイプ」をクリックする。
プラグインが競合している
「All in One SEO」や「Yoast SEO」などのプラグインを導入していませんか？
この場合、Cocoonの他にもOGPを出力しようするものがあるため、競合している可能性があります。
この状態になると、SNSが正しい情報を読み取れず、OGPが反映されない原因になります。
Cocoonの機能を使うなら、プラグイン側のOGP設定をオフにしておきましょう。
キャッシュ系プラグインやサーバーの影響
キャッシュ系プラグインを使用している場合、古いHTMLデータが残っていると、更新後も古いOGP情報を読み込んでしまうことがあります。
- WP Super Cache
- LiteSpeed Cache
- W3 Total Cache
この場合は…
- プラグインのキャッシュを手動で削除
- Cocoon設定を再保存
- ブラウザのキャッシュもクリア
をおこなうことで、ほとんどのケースは解決します。
それでも反映されないときは時間をおく
SNSやサーバーのキャッシュ更新には、数分～数時間かかることがあります。
全て確認しても反映されない場合は、半日〜1日ほど時間を置いてから再度チェックしてみてください。
OGPが反映されないのは仕様だからご安心を
CocoonでOGPを設定したのに反映されないと「やり方が間違っていたのかも」と不安になりますよね。
多くの場合、あなたの設定ミスではなく、SNSやキャッシュの仕組みが原因です。
つまり、焦る必要はありません。
そのため、OGPが反映されない場合でもご安心ください。
もしも反映されないときは、紹介した設定を見直せば大丈夫です！
コメント