トラブルシュート

OGP画像が更新されないときの原因と直し方

HTMLページを更新したのにSNSやSlackでシェアしたときのOGP画像が古いままになる問題は、キャッシュの仕組みを理解していないと原因の特定に時間がかかる。自分側の問題か相手のプラットフォーム側の問題かを切り分け、それぞれに適した修正手順を踏むことが解決の近道だ。

よくある原因

最も多い原因はSNSプラットフォーム側のOGPキャッシュだ。FacebookやSlack、LINEはOGPタグを一度クロールすると数時間〜数日間キャッシュを保持するため、HTMLを更新してもシェア時の表示がすぐに変わらない。特にFacebookは同一URLのキャッシュを24時間以上保持することがある。

もう一つの原因はHTMLのog:imageに指定した画像URLが変わっていないケースだ。画像ファイルを差し替えても同名のままにしていると、ブラウザやCDNが古い画像をキャッシュし続ける。ファイル名に「?v=2」のようなクエリパラメーターを付けるか、ファイル名自体を変更してURLを変えることで新しい画像が取得されるようになる。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

まず自分のHTML内のog:imageタグを検証する。`<meta property="og:image" content="https://example.com/images/ogp.png">` のURLにブラウザで直接アクセスし、最新の画像が表示されるか確認する。表示される画像が古ければサーバー側の反映が遅れているか、デプロイが正常に完了していない可能性がある。

次にOGPデバッガーツールで確認する。Facebookの場合は「Facebookシェアデバッガー」(developers.facebook.com/tools/debug)にURLを入力して「もう一度スクレイピング」ボタンを押すとキャッシュをリフレッシュできる。SlackやLINEはデバッガーを持たないが、URLにクエリパラメーターを付けて別URLとして扱わせる方法(`?ogr=1`など)が有効なことがある。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

受信者側のSNSアプリやブラウザがOGPカードをキャッシュしている場合、自分が更新してもすぐには反映が見えない。まず「プライベートブラウジング(シークレットモード)」で同じURLをシェアしてOGPカードを確認するよう依頼すると、キャッシュをバイパスした状態で確認してもらえる。

Slackのメッセージにリンクを貼ったときのプレビューは、Slackのサーバーがクロールした時点のOGP情報をキャッシュしている。同じチャンネルに一度貼ったURLのプレビューが更新されない場合、URLの末尾にパラメーターを加えて「別のURL」として認識させるとSlack側が新たにクロールして最新のOGP情報を取得する。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

OGP画像の更新時にURLも変える運用を習慣化することが最も効果的な再発防止策だ。具体的には画像ファイル名にバージョン番号(ogp-v2.png)またはコンテンツハッシュを付けるようにし、og:imageのURLが更新のたびに変わるようにしておく。これによりキャッシュを持つすべてのプラットフォームが新しい画像として認識する。

ページを公開・更新した後の確認フローにOGPチェックを組み込む。チェック項目は「og:imageのURLにブラウザで直接アクセスして最新画像が表示されるか」「Facebookシェアデバッガーでスクレイピングしてタイトル・画像・説明が正しいか」の2点だ。この手順を15分以内に終えられるよう社内チェックリストに追加しておくと確認の抜け漏れを防げる。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

FaceookデバッガーでOGPをリフレッシュしたのに画像が変わらない場合は何が原因ですか?

og:imageに指定した画像URLが変わっていないことが原因として多いです。画像ファイルを差し替えても同名のままだとCDNやFacebookのサーバーが旧画像をキャッシュしています。URLにクエリパラメーターを付けるか、ファイル名を変更してください。

SlackでURLを貼ったときのプレビュー画像を強制的に更新させる方法はありますか?

URLの末尾に?s=1などのパラメーターを付けて別のURLとして認識させる方法が有効です。ただしSlackにはFacebookデバッガーのような公式のキャッシュリフレッシュ機能がないため、URL変更が最も確実です。

OGP画像のサイズや形式は何がベストですか?

横1200px×縦630px(アスペクト比1.91:1)のJPEGまたはPNGが推奨です。ファイルサイズは8MB以下を守り、テキスト入りの画像は横幅の20%以内にするとFacebookの審査で弾かれにくくなります。

関連記事

トラブルシュート

画像の向きが勝手に回るときの原因と直し方

スマホ撮影の画像がHTMLやWebページで回転してしまう問題を解決したい人向け。EXIFのOrientationタグが原因であることから、CSS・JavaScript・画像変換の3つの修正アプローチまでを具体的に解説します。

5分で読める
トラブルシュート

レスポンシブ画像が荒く見えるときの原因と直し方

PCでは綺麗に表示されるのにスマホで画像が荒く見えると困っているデザイナー・エンジニア向けに、srcsetやCSSの不備を素早く診断し修正するための手順を具体的にまとめました。

5分で読める
トラブルシュート

SVGが表示されないときの原因と直し方

HTMLでSVGが表示されない問題を解決したいWebデザイナー・制作者向け。インラインSVG・imgタグ・object要素など参照方法別の原因と、MIMEタイプ・CSP・パスエラーを含む実践的な修正手順を解説します。

5分で読める
「トラブルシュート」の記事をもっと見る →