本記事では、WordPress無償テーマCocoonとLightningを使用したWordPressサイトでのOGP画像の設定・変更方法を解説します。
また後半は、どのWordPressテーマでも共通の内容となってます。
投稿のきっかけはネットで調べると情報が古いものや正しくないものが混在していたので困りました。そこで自身で試しながら情報を精査してまとめていった、といういきさつです。皆様のお役に立てたら幸いです。
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テーマサムネイルに設定されてます。
１．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の確認方法
メタタグの確認
「head」タグ内で正しく設定されているか確認するにはブラウザの開発者ツールを使います。
EdgeやChromeなどのブラウザーでホームページを表示させて「F12」キーを押すと、開発者ツールが出現します。＜head＞～</head>の間にメタタグ「<meta>」があるので、「og:image」, 「og:image:secure_url」のあとに続くURLが任意の画像になっているかを確認します。画像URLを別のブラウザーURL欄にコピペすれば確認できます。
ツールでのプレビュー確認
OGPのプレビュー確認に対して下記ツールが提供されてます。Facebookにログインして使用してください。
Ｘ(旧Twitter)
投稿手前で確認するのが早くて良いかと思います。Card Validator | Twitter Developers (x.com) で以前あったプレビュー機能が削除されていますのでこの方法簡単です。
それでもダメな場合には
上記でもOGPが変更されなかった場合、プラグインで対応可能な場合があります。SEO対策のプラグインを入れている場合には下記対応を試してみてください。
All in One SEOの場合
All in One SEO プラグインの導入
- WordPressの管理画面から「プラグイン＞新規プラグインを追加」を選択します。
- 「All in One SEO」を検索し、インストールします。
- インストール後、「有効化」ボタンをクリックしてプラグインを有効化します。
- プラグインの有効化により、OGP設定が可能になります。
- プラグインを使用することで、HTMLを直接編集する必要がなくなります。
OGP画像の設定
WP全体のOGP画像設定2 クリックすると拡大します
- WordPressの管理画面で「All in One SEO＞ソーシャルネットワーク＞Facebook」に進みます。
- 「デフォルト投稿Facebook画像」に画像をアップロードします。
- TwitterのOGP画像も同様に設定できます。
- OGP画像の推奨サイズは1,200px × 630pxまたは630px × 630pxです。
- 画像がない場合はデフォルト画像を設定することも可能です。
ページごとのOGP設定
- 固定ページまたは投稿ページの編集画面で「ALOSEO＞Social」に進みます。
- Facebook、Twitterそれぞれで特定のOGP画像を設定できます。
- 記事ごとに異なるOGP画像を設定することが可能です。
- OGP専用の画像を用意することもできます。
- 設定がうまくいかない場合は、個別に設定することで解消されることがあります。
それでもまだダメな場合には
ご自身のホームページ（WordPress）およびSNSプラットフォームにOGPのキャッシュが残っているためと推察されます。
ホームページのキャッシュ削除
下記のメジャーなプラグインでキャッシュ削除できます。
XのOGPキャッシュ削除
下記カードバリデーターで、XのOGPキャッシュを削除できます。
Card Validator | Twitter Developers (x.com)
ただしTwitter時代にあったプレビュー機能は現在ありません。筆者はX投稿で確認しています。
Validate バリデート 有効化する：Validator 有効化するもの
FacebookのOGPキャッシュ削除
シェアデバッガー – Meta for Developers (facebook.com)
「もう一度スクレイビング」を押すとキャッシュが削除され、最新の画像になります。
Debag デバグ バグ修正する：Debaggerデバッガー バグ修正するもの
筆者の実例
解決事例１
筆者がOPGの設定についてよくわかっていないときにトップページのAll in One SEOでOGP設定をしてしまっていたのが原因でした。上記のように「添付画像」→「アイキャッチ画像」に変えることで意図していた設定に修正できました。
xでURLを記入して投稿しようとするとまだOGPは反映されず真っ黒の表示。10分くらい後に再度投稿するとちゃんと最新の画像でのOGPになりました。
解決事例２
OGP設定を変更してXでは正しく新画像表示が反映されますが、FacebookOGPでは旧画像のままだったのでシェアデバッガー – Meta for Developers (facebook.com)を使って修正しました。最初原因が不明でしたが、どうも画像URLに原因があったようでURLを新規にすると解決しました。
まとめ
CocoonとLightningテーマでのOGP画像設定は、視認性の向上とSEO対策に重要です。適切な設定で、サイトの魅力を最大限に引き出しましょう。
コメント