この記事はで読むことができます。
当ブログでは商品・サービスのリンク先にプロモーションを含みます。
一生懸命設定したのに、FacebookでOGP画像が正しく表示されない…
なぜか古い画像が出続けてしまう、どうして？
LINEだと出るのにFacebookだけ表示が違う…
WebサイトのURLをSNSでシェアした際、意図した画像が表示されないと、クリック率に大きく影響してしまいます。特にFacebookでの表示エラーは多くの人が経験する悩みです。
OGP設定したのに、Facebookだけ画像がちゃんと表示されなくて…。
その現象、よくありますね。原因は2つに絞られます。大丈夫、すぐに解決できます。
この記事では、多くの人がつまずくFacebookのOGP画像問題について、原因と解決策を分かりやすく解説していきます。
- FacebookでOGP画像が表示されない2つの主な原因
- コピペで使える！正しいOGPタグの書き方
- Facebookのキャッシュをクリアするツールの使い方
なぜ？FacebookだけOGP画像が正しく表示されない原因
LINEでは新しい画像が出るのに、Facebookだけダメなんです。不思議です…。
それには明確な理由があります。原因はほぼ2つです。順番に見ていきましょう。
原因①：ページのURLと「og:url」の不一致
これが最もよくある原因です。OGPには、そのページの「正式なURL」を宣言するための`og:url`というタグがあります。
例えば、テスト用のURL `https://example.com/test.html` を見てみましょう。
このページのHTML内に、もし`` と書かれていると、Facebookは「このページの本当の姿は`main.html`なんだな」と判断し、`main.html`のOGP情報を読みに行ってしまうのです。
`og:url`は、現在表示しているページのURLと一致させるのが原則です。ここがズレていると、Facebookは別のページの情報を参照してしまいます。
LINEなど他のSNSは、Facebookほど`og:url`を厳密に解釈しない場合があるため、「LINEでは出るのに…」という現象が起こります。
原因②：Facebookに残ってしまった古いキャッシュ
もう一つの強力な原因が「キャッシュ」です。
Facebookは、一度読み込んだWebページの情報を、素早く表示するために自社のサーバーに一時保存します。これがキャッシュです。
そのため、あなたがWebページのOGP画像を更新しても、Facebookは保存している古い情報を表示し続けてしまうことがあるのです。
HTMLを正しく修正したはずなのに表示が変わらない場合、9割以上はこのキャッシュが原因です。このキャッシュは、私たちで強制的に更新させることができます。
【2ステップで解決】FacebookのOGP画像エラー修正手順
原因がわかれば、あとは簡単です。以下の2つのステップで、誰でも問題を解決できます。
まず、HTMLソースコード内のOGPタグを見直します。特に重要なのは、先ほど原因として挙げた`og:url`の一致と、画像のサイズを明記することです。
タグを修正したら、Facebookに「ページの情報が更新されたよ」と教えるために、専用ツールでキャッシュをクリアします。
ステップ1：OGPタグの修正（コピペ用コードあり）
具体的にどう書き換えればいいですか？
以下のコードを参考に、ご自身のサイトに合わせて書き換えてみてください。ポイントは2つです。
- `og:url`の`content`を、今まさに編集しているページのURLに書き換える。
- `og:image:width` と `og:image:height` を追加して、画像のサイズを明記する。
以下は、そのままコピーして使えるOGPタグのテンプレートです。
<meta property="og:url" content="ここに現在のページの完全なURLを記述" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="ここに表示させたい画像のURLを記述" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="ja_JP" />ステップ2：Facebookシェアデバッガーでキャッシュをクリア
HTMLの修正が終わったら、Facebookの公式ツール「シェアデバッガー」を使って、キャッシュを強制的に更新させます。
この作業を行うことで、Facebookに「Webページの情報が新しくなったから、もう一度見に来て！」と伝えることができます。
まず、下記のボタンから「Facebookシェアデバッガー」にアクセスします。
入力欄に、確認したいページのURLを貼り付けて、「デバッグ」ボタンをクリックします。
一度デバッグすると、現在のキャッシュ情報が表示されます。その下にある「もう一度スクレイピング」ボタンを、プレビューが新しくなるまで遠慮なく数回クリックします。
これで、プレビューに設定した新しい画像が表示されれば完了です！
補足：OGP画像の推奨設定
これからOGP画像を作成する場合は、以下の推奨設定を参考にすると、各SNSで綺麗に表示されやすくなります。
- 推奨サイズ： 1200 × 630 ピクセル
- アスペクト比： 1.91:1
- ファイル形式： JPG または PNG
- ファイル容量： 5MB以下（1MB以下が理想）
まとめ：OGPエラーは「URL」と「キャッシュ」の確認で解決！
原因と解決策がはっきりして、スッキリしました！
よかったです！この2つを覚えておけば、もうOGPの表示で悩むことはありません。
1. `og:url` をページの正式なURLと一致させる
2. 修正後はシェアデバッガーで「もう一度スクレイピング」する
魅力的なサムネイルは、クリック率を向上させるための重要な要素です。ぜひこの記事を参考に、正しいOGP設定を行ってみてください。
よくある質問
- テストページから本番ページに公開するときの「og:url」はどうすればいいですか？
- 素晴らしい質問です。本番ページとして公開する際には、`og:url`の`content`も本番のURL（例：https://example.com/main.html）に書き換えるのを忘れないようにしましょう。
- デバッガーで何度「もう一度スクレイピング」しても画像が更新されません。
- いくつか原因が考えられます。①画像URLが間違っている（ブラウザで直接開けるか確認）、②ページにパスワードなどでアクセス制限がかかっている、③サーバーのキャッシュが古い、などです。まずは画像URLが正しいかを確認してみてください。