X（Twitter）のカード画像が表示されないときの対処法
いくらタグをみなおしても、カード画像（OGP画像）が表示されなくて困ったことはありませんか？
下記の設定を見直すと解決するかもしれません。
OGP画像のパスを「URL形式」にする
【正解例】
<!--Twitter Cards-->
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://url.cpm/img/th.jpg" />画像のパスを、下記のような相対パスで書くと表示されないようです。
【NG例】
content="img/th.jpg”
faviconは上記の書き方で問題ないので、このように書いていましたがOGP画像では駄目なようです。
X専用のOPGタグに変更した
【NG例】
<meta property="og:image" content="https://url.cpm/img/ogp.png">上記のように
<meta property="og:image"
と書いていたのを、
<meta name="twitter:image"
に変更しました。
og:image でも以前は表示されていた記憶がありますが、現状は後者にしないと駄目なようです。
修正アップしたURLのキャッシュ対策
https://url.cpm/index.html
というURLを修正してXに投稿するも、X側にキャッシュが残ってしまうようでした。
そこで、
https://url.cpm/index.html?test
などと、パラメータをつけると、新規URLとみなされてキャッシュの影響を受けなくなりました。
パラメータ付きでOKでしたら、正規のURLでアップして問題ないです。じきにキャッシュが消えて、ただしく表示されます。
テストツールを利用する
上記のサイトにURLを打ち込むと、OGP画像の表示のテストができます。
ここで正しく表示されることを確認しましょう。
無事に表示されました。
OGP画像関連はどうも苦手意識があったのですが、これでいくらか緩和されました。