og:image でツイッター画像が表示されない落とし穴
画像が表示されない
html のヘッダー内で og:image で画像を指定しているが、ツイートしても画像が表示されない。
ツイートは可能だが、ツイッターで見ても白い文書の画像が表示されるだけで一向に画像が表示されない。
PC や iPhone で確認しても同じ。
しばらく待っても同じ。
その現認を調査した。
対処
対処方法は以下の通り。
(1)
og:image
は絶対パスで記述する。相対パスだとNG。
【正】
<meta property="og:image" content="http://example.com/img/mytwitterimage.png" />
【NG】
<meta property="og:image" content="http://img/mytwitterimage.png" />
特にサイトをhttps 化した場合の設定漏れに注意。
(2)
サポートされているのはgif , png , jpeg など
bmp や tiff は現在サポートされていない。
(3)
画像サイズが小さすぎる、大きすぎる
200x200以上をめどに。
サイズが大きいのはNG。
そんなのクライアントがダウンロードするようになったら、ツイッターは重くて使えなくなる。5Gが実現化したら話は変わるかもしれなが。
(4)
クライアント側（スマホやPC) の回線負荷が高く画像がダウンロードできない。
(5)
画像の縦、横サイズに問題がある。
(6)
twitter 側のキャッシュの問題。しばらくたってから再度試す。あるいは画像のファイル名を変更する。
(7)
デバッグツールで確認する
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/sharing/
キーワード：ツイッター
Windows トラブルシューティング一覧に戻る
（ご注意事項)本ページは2017年に独自に調査して記載した事項です。本ページには誤りがある可能性はあります。また今後仕様が変更となる可能性があります。
本ページにより発生したいかなる損失も誰も補償しません。あくまでも自己責任で参考にしてください。