要約
- TwitterでOGP画像が表示されない場合: シェアURLを変更する。
- OGPの画像自体を変更した場合: シェアURLと画像名を変更する。
直面した問題
TwitterにOGP画像が表示されない問題が発生しました。
- タイポを疑いましたが、確認しても間違いはなし。
- 合計8パターンのうち、半分は正常表示、半分は灰色のサムネイルのみ表示される状態に。
原因
- Twitterでは URLと画像のキャッシュ を保存する仕様がある。
- 一度取得失敗すると、キャッシュが更新されるまで 灰色のサムネイル が表示され続ける。
- さらに、OGP画像を更新しても キャッシュされた旧画像 が表示されてしまう。
参考: Twitter Developer Documentation
対処方法
1. Twitter上でOGP画像が表示されない場合
-
meta
タグ(og:image``twitter:card
)やサイトの公開状態を見直す。 - シェアURLを変更してキャッシュを回避する。
例:
- 変更前URL:
https://hogehoge.com
- URLにパラメータを付与:
https://hogehoge.com?v=1
- パラメータ(例:
?v=1
)を付けることでTwitterが新しいOGP情報を取得しに行きます。
※この方法は一時的な対応策。Twitterのキャッシュ更新を待つのが望ましい。
2. サイトのOGP画像を更新した場合
Twitterは OGP画像そのものもキャッシュ しています。
- 対処方法: OGP画像のURLを更新する。
例:
- 変更前:
-
OGP.jpg
→ 修正前画像 -
https://hogehoge.com
で表示。
-
- 変更後:
-
OGP_2.jpg
→ 修正後画像 -
https://hogehoge.com?v=1
で表示。
-
-
重要:
og:image
のURLも修正後の画像に更新する。
まとめ
-
画像が表示されない場合:
- シェアURLを変更してキャッシュを回避する。
-
画像を変更した場合:
- シェアURLと画像名を変更する。
※Twitterの仕様変更が頻繁にあるため、適宜確認が必要です。