0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Twitter(X)にOGP画像が表示されない、更新されない時の備忘録

Last updated at Posted at 2025-01-17

要約

  • TwitterでOGP画像が表示されない場合: シェアURLを変更する。
  • OGPの画像自体を変更した場合: シェアURLと画像名を変更する。

直面した問題

TwitterにOGP画像が表示されない問題が発生しました。

  • タイポを疑いましたが、確認しても間違いはなし。
  • 合計8パターンのうち、半分は正常表示、半分は灰色のサムネイルのみ表示される状態に。

:
スクリーンショット 2025-01-17 12.54.20.png


原因

  • Twitterでは URLと画像のキャッシュ を保存する仕様がある。
  • 一度取得失敗すると、キャッシュが更新されるまで 灰色のサムネイル が表示され続ける。
  • さらに、OGP画像を更新しても キャッシュされた旧画像 が表示されてしまう。

参考: Twitter Developer Documentation


対処方法

1. Twitter上でOGP画像が表示されない場合

  • metaタグ(og:image``twitter:card)やサイトの公開状態を見直す。
  • シェアURLを変更してキャッシュを回避する。

例:

  1. 変更前URL:
    https://hogehoge.com
    
  2. URLにパラメータを付与:
    https://hogehoge.com?v=1
    
  • パラメータ(例: ?v=1)を付けることでTwitterが新しいOGP情報を取得しに行きます。

※この方法は一時的な対応策。Twitterのキャッシュ更新を待つのが望ましい。

2. サイトのOGP画像を更新した場合

Twitterは OGP画像そのものもキャッシュ しています。

  • 対処方法: OGP画像のURLを更新する。

例:

  1. 変更前:
    • OGP.jpg → 修正前画像
    • https://hogehoge.com で表示。
  2. 変更後:
    • OGP_2.jpg → 修正後画像
    • https://hogehoge.com?v=1 で表示。
  • 重要: og:image のURLも修正後の画像に更新する。

まとめ

  1. 画像が表示されない場合:
    • シェアURLを変更してキャッシュを回避する。
  2. 画像を変更した場合:
    • シェアURLと画像名を変更する。

※Twitterの仕様変更が頻繁にあるため、適宜確認が必要です。


0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?