初心者向け：CocoonとLightningでのOGP画像設定手順
この記事を書いた人
tetsu7017
副業マルチクリエーター
ブログ歴11年／DTM音楽、AI画像、HP制作
SEO検定1級取得、IT機器機構設計エンジニア
1970年福岡生まれ、大阪住み
>>詳しくはこちら
- 本業のエンジニアとして働きながら、ブログやオリジナル曲の配信も楽しんでいます。
- リタイア後も自由な時間を活かして充実した人生を目指しています。
- このサイトでは、tetsu7017の実体験を通じて得たノウハウを発信中です。
- 読者さまのお困りごとを解決することで、共により良い人生を目指しましょう。
お知らせ （クリックお願いします）
当サイトでは広告を掲載している場合がありますが、ランキングや商品の紹介においては、報酬の有無に関わらず中立的な立場でコンテンツを制作していますので、どうぞご安心ください。サイトで得た広告収入は、皆様に有益なコンテンツ提供や情報の質向上に役立てております。万が一、不適切な表現があった場合は、お手数ですが お問合せフォーム よりご連絡いただけますようお願い申し上げます。 管理者 tetsu7017
本記事ではOGP画像の設定・変更方法を解説します。
前半はWordPress無償テーマCocoon とLightning を使用したサイトについて、
また後半はどのテーマでもWordPress共通の内容となってます。
- WordPressテーマ・CocoonまたはLightningでサイト運営していて、SNSを活用している方
- OGP画像の設定と変更ができるようになります
本投稿のきっかけはインターネットでOGPについて調べると
情報が古いものや正しくないものが混在して困りました。
そこで自身で試しながら情報を精査してまとめていきました。
皆様のお役に立てたら幸いです。
OGPとは
- OGP画像（Open Graph Protcol の略)は、SNSで共有された際に表示されるサムネイル画像です。
- X(旧Twitter)やFacebookのOGPが有名です。
- とくにXのOGP画像の場合、名称はXカードでは普及しておらず、いまだにTwitterカードと呼ばれています。
Twitterカード仕様変更（2023年末より実施）
- 画像サイズとアスペクト比の推奨変更： Twitterカードの推奨画像サイズは、1200 x 675ピクセルでアスペクト比は16：9です。最大表示サイズは4096 x 4096ピクセルに拡大されました
- ファイル形式とサイズの制限： 画像ファイルの形式はJPEG、PNG、GIFがサポートされており、GIFの場合は15MBまで許可されています。他の形式については、JPGとPNGは5MBが上限です。
CocoonでのOGP画像設定
デフォルトだとCocoonテーマのサムネイルに設定されてます。
任意の画像でOGPを設定するには下記手順になります。
CocoonでのOGP画像設定
Cocoon設定 > 「OGP」タグをクリック。
「ホームイメージ」で画像の指定します。
LightningでのOGP画像設定
LightningでのOGP画像設定
「ExUnit（VK All in One Expansion Unit）」をインストールし、有効化します。
方法(a): ExUnit > 「メイン設定」 > 「SNS settings」から「デフォルトのOGPイメージ」で画像を設定。
方法(b): 「カスタマイズ」 > 「ExUnit設定」 > 「SNS設定」でOGP画像を設定。
「投稿」設定の場合、デフォルトのOGP画像が反映。
「固定ページ」設定の場合、アイキャッチ画像がOGP画像として使用されます。
CocoonとLightningの共通の注意点
画像サイズとフォーマットは1200x675px、JPEGまたはPNG形式が推奨されます。
次世代フォーマットWebp形式も推奨されています。
筆者はwebp形式を採用しています。
理由はサイトの表示速度をアップさせるためです。
これ以降は、テーマとは関係なくWordPress共通の内容です。
上記のようにWordPressのテーマ側でOGP設定を変更しましたが、XやFacebookに変更が反映されないという現象が発生しました。
OGPの設定を変更した際、XやFacebookで正しく反映表示されない不具合があります。
その原因推定と対処法を説明します。
１．キャッシュが更新されていない
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がデータを取得できません。
メタタグの確認
OGPに関するメタタグを確認します。
メタタグの確認方法
EdgeやChromeなどのブラウザーで「F12」キーを押すと開発者（デベロッパー）ツールが出現します。
headタグの内容を確認。▶をクリックします。
▼になりheadタグの内容が展開されます。
- og:image
- og:image:secure_url
が意図した画像URLになっているかを確認してください。
さきほどの画像URLを別のブラウザーのURL欄にコピペすれば画像内容を確認できます。
ツールでプレビュー確認
OGPのプレビュー確認に対して下記リンク先のツールが提供されてます。Facebookにログインして使用してください。
Ｘ
投稿手前で確認するのが、早くて簡単で良いです。
Card Validator | Twitter Developers (x.com) に以前あった『プレビュー機能』は現在削除されて有りません。
３. サーバーのキャッシュが影響している
ホームページサーバーやCDN（例：Cloudflare）のキャッシュが古いデータを提供している可能性があります。
ホームページのキャッシュ削除
１．WordPressプラグインでキャッシュ削除クリア
下記のメジャーなWordPressプラグインでキャッシュ削除できます。
- WP-Optimize
- W3 Total Cache
２．サーバー管理画面でキャッシュ削除クリア
サーバー管理画面からキャッシュをクリアします。操作方法はレンタルサーバーなどにご確認ください。
CDNのキャッシュ削除
CDNを使用している場合には、CDNの管理画面から対象のページのキャッシュを削除。
CDN（Content Delivery Network）とは、インターネット上のコンテンツ（画像、動画、CSSファイル、JavaScriptファイルなど）を高速かつ効率的に配信するためのネットワークシステムのことです。CDNを利用することで、ウェブサイトの表示速度やパフォーマンスを向上させることができます。
意図して契約しないとCDNは使ってないので、
心当たりがない方はこの項目を無視してよいです。
４． プラグインの設定
SEO機能を有する無料テーマCocoonとAll in One SEOプラグインなど、他のプラグインとの設定競合している可能性があります。
CocoonはSEO対策ができており、SEOプラグインは競合するため不要です。
筆者もサイト高速化のためAll in One SEOを外しました。
詳細はAll in One SEO を削除した記事をご参照ください。
CocoonでSEOプラグインが必要の場合、以降を読み進めてください。
All in One SEOの場合
SEOプラグインの代表としてAll in One SEOを取り上げます。世間で一般的によく使われてます。
筆者もWordPressを始めた当初、複数のサイトでこのAll in One SEOを使用していました。
All in One SEOの設定方法
- WordPressの管理画面から「プラグイン＞新規プラグインを追加」を選択します。
- 「All in One SEO」を検索し、インストールします。
- インストール後、「有効化」ボタンをクリックしてプラグインを有効化します。
- プラグインの有効化により、OGP設定が可能になります。
- プラグインを使用することで、HTMLを直接編集する必要がなくなります。
- WordPressの管理画面で「All in One SEO＞ソーシャルネットワーク＞Facebook」に進みます。
- 「デフォルト投稿Facebook画像」に画像をアップロードします。
- TwitterのOGP画像も同様に設定できます。
- OGP画像の推奨サイズは1,200px × 630pxまたは630px × 630pxです。
- 画像がない場合はデフォルト画像を設定することも可能です。
- 固定ページまたは投稿ページの編集画面で「ALOSEO＞Social」に進みます。
- Facebook、Twitterそれぞれで特定のOGP画像を設定できます。
- 記事ごとに異なるOGP画像を設定することが可能です。
- OGP専用の画像を用意することもできます。
- 設定がうまくいかない場合は、個別に設定することで解消されることがあります。
原因推定５． 画像のサイズや形式が不適切
OGPの画像サイズが推奨値を満たしていない場合、Xで正しく表示されないことがあります。
対処法
- 画像サイズを以下の基準に合わせてください。
- 推奨サイズ：1200×675ピクセル
- ファイル形式：JPEG、PNGまたはwebｐ
- ファイルサイズ：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対策に重要です。適切な設定で、サイトの魅力を最大限に引き出しましょう。
よろしければ引き続きこちらをお読みいただくと、知識が深まります。
WPテーマCocoon関連記事
【外部リンク】OGPとは？SNSでの役割や設定方法を初心者向けに解説 (エックスサーバー )
最後まで読んでいただきありがとうございました。
【PR】高速・安定・高機能！エックスサーバー
は月990円〜、初期費用無料。運用サイト数250万件、稼働率99.99%、KUSANAGI搭載でWordPressも超高速。独自ドメイン＆SSL永久無料、多数ドメイン・メール対応！安定運用をAI＆復旧機能でサポート。
この記事が気に入ったら
フォローしてね！
当サイトWordPressテーマ
- WordPressテーマ国内シェアNo.1
- 初心者でも簡単に
綺麗なサイトを作成可能 - 複数のサイトで使用可能
（追加料金なし） - エックスサーバーからの購入で割引
＼今すぐチェック／
