CocoonとLightningでのOGP画像の設定・変更方法

---

本記事ではOGP画像の設定・変更方法を解説します。前半はWordPress無償テーマCocoonとLightningを使用したWordPressサイトについて、また後半は、どのWordPressテーマでも共通の内容となってます。

本投稿のきっかけはネットでOGPについて調べると情報が古いものや正しくないものが混在して困りました。そこで自身で試しながら情報を精査してまとめていきました。皆様のお役に立てたら幸いです。

OGPとは

OGP画像（Open Graph Protcol の略)は、SNSで共有された際に表示されるサムネイル画像です。
X(旧Twitter)やFacebookのOGPが有名です。
とくにXのOGP画像の場合、Twitter カード（Twitter Cards）と呼ばれています。

Twitterカード仕様変更（2023年末より実施）

画像サイズとアスペクト比の推奨変更： Twitterカードの推奨画像サイズは、1200 x 675ピクセルでアスペクト比は16：9です。最大表示サイズは4096 x 4096ピクセルに拡大されました​
ファイル形式とサイズの制限： 画像ファイルの形式はJPEG、PNG、GIFがサポートされており、GIFの場合は15MBまで許可されています。他の形式については、JPGとPNGは5MBが上限です​。

CocoonでのOGP画像設定

デフォルトだとCocoonテーマサムネイルに設定されてます。任意の画像でOGPを設定するには下記手順になります。

１．Cocoon設定画面へアクセス

Cocoon設定 > 「OGP」タグをクリック。

２．画像の設定

「ホームイメージ」で画像の指定します。

LightningでのOGP画像設定

１．ExUnitプラグインの導入

「ExUnit（VK All in One Expansion Unit）」をインストールし、有効化します。

２．OGP画像の設定

方法(a): ExUnit > 「メイン設定」 > 「SNS settings」から「デフォルトのOGPイメージ」で画像を設定。

方法(b): 「カスタマイズ」 > 「ExUnit設定」 > 「SNS設定」でOGP画像を設定。　

３．トップページのOGP画像設定

「投稿」設定の場合、デフォルトのOGP画像が反映。

「固定ページ」設定の場合、アイキャッチ画像がOGP画像として使用されます。

CocoonとLightningの共通の注意点

画像サイズとフォーマットは1200x630px、JPEGまたはPNG形式が推奨されます。

OGPに限らずヘッダー画像やアイキャッチ画像についても推奨があります。こちらの記事もお読みください。

OGPの設定を変更した際、XやFacebookで正しく反映表示されない不具合があります。その原因推定と対処法を説明します。以下はWordPressテーマとは関係ない共通の内容となってます。

原因推定１．OGPキャッシュが更新されていない

XやFacebookでは、OGPタグの内容をキャッシュして表示します。一度キャッシュされると、次回の共有時に以前のデータが使われる可能性があります。

OGPキャッシュを更新する

X Card ValidatorやFacebook Sharing Debuggerを使用してキャッシュを削除クリアします。

１．XのOGPキャッシュ削除方法

下記Card Validatorカードバリデーターで、XのOGPキャッシュを削除できます。
Card Validator | Twitter Developers (x.com)

２．FacebookのOGPキャッシュ削除方法

下記Facebook Sharing Debuggerカードバリデーターで、FacebookのOGPキャッシュを削除できます。

シェアデバッガー – Meta for Developers (facebook.com)

「もう一度スクレイビング」を押すとキャッシュが削除され、最新の画像になります。

原因推定２． OGPタグの記述にミスがある

HTMLにOGPタグが正しく記述されていない場合、XやFacebookがデータを取得できません。

Ｘ(旧Twitter)

投稿手前で確認するのが早くて良いかと思います。Card Validator | Twitter Developers (x.com)　で以前あったプレビュー機能が削除されていますのでこの方法簡単です。

原因推定３. サーバーのキャッシュが影響している

ホームページサーバーやCDN（例：Cloudflare）のキャッシュが古いデータを提供している可能性があります。

２．サーバー管理画面でキャッシュ削除クリア

サーバー管理画面からキャッシュをクリアします。操作方法はレンタルサーバーなどにご確認ください。

CDNのキャッシュ削除

CDNを使用している場合には、CDNの管理画面から対象のページのキャッシュを削除。通常CDNと契約しない限り使用してないはずです。

原因推定４． WordPressプラグインの設定にミスがある

上記でもOGPが変更されなかった場合、SEO対策プラグインで対応可能な場合があります。下記に一例として All in One SEOを解説します。

WordPressプラグイン設定　All in One SEOの場合

All in One SEO 　プラグインの導入

• WordPressの管理画面から「プラグイン＞新規プラグインを追加」を選択します。
• 「All in One SEO」を検索し、インストールします。
• インストール後、「有効化」ボタンをクリックしてプラグインを有効化します。
• プラグインの有効化により、OGP設定が可能になります。
• プラグインを使用することで、HTMLを直接編集する必要がなくなります。

All in One SEOでのOGP画像の設定

• WordPressの管理画面で「All in One SEO＞ソーシャルネットワーク＞Facebook」に進みます。
• 「デフォルト投稿Facebook画像」に画像をアップロードします。
• TwitterのOGP画像も同様に設定できます。
• OGP画像の推奨サイズは1,200px × 630pxまたは630px × 630pxです。
• 画像がない場合はデフォルト画像を設定することも可能です。

All in One SEOでページごとのOGP設定

• 固定ページまたは投稿ページの編集画面で「ALOSEO＞Social」に進みます。
• Facebook、Twitterそれぞれで特定のOGP画像を設定できます。
• 記事ごとに異なるOGP画像を設定することが可能です。
• OGP専用の画像を用意することもできます。
• 設定がうまくいかない場合は、個別に設定することで解消されることがあります。

原因推定５． 画像のサイズや形式が不適切

OGPの画像サイズが推奨値を満たしていない場合、Xで正しく表示されないことがあります。

対処法

• 画像サイズを以下の基準に合わせてください。
  • 推奨サイズ：1200×630ピクセル
  • ファイル形式：JPEG、PNG
  • ファイルサイズ：5MB以下
• 画像URLが正しくアクセス可能か確認します。

筆者の実例

解決事例１　SEOプラグインの設定ミス

筆者がOPGの設定についてよくわかっていないときにトップページのAll in One SEOでOGP設定をしてしまっていたのが原因でした。上記のように「添付画像」→「アイキャッチ画像」に変えることで意図していた設定に修正できました。

xでURLを記入して投稿しようとするとまだOGPは反映されず真っ黒の表示。10分くらい後に再度投稿するとちゃんと最新の画像でのOGPになりました。

---

解決事例２　画像URLが原因

OGP設定を変更してXでは正しく新画像表示が反映されますが、FacebookOGPでは旧画像のままだったのでシェアデバッガー – Meta for Developers (facebook.com)を使って修正しました。最初原因が不明でしたが、どうも画像の長すぎるURLに原因があったようでURLを新規にすると解決しました。

まとめ

OGP画像設定は、視認性の向上とSEO対策に重要です。適切な設定で、サイトの魅力を最大限に引き出しましょう。