私は hiro20180901 の ID で twitter を使用しています。これまでは、はてなブログ「hiro の長い冒険日記」で新規に投稿した際に、同時に twitter にも投稿していました。こちらの日記では、自動投稿ではなく、手動で個別に投稿する事にしました。
はてなブログの時にも手動で投稿した事があり、リンクを貼り付けするだけでアイキャッチ画像が表示されていました。ところが、こちらの WordPress のサイトのリンクを貼り付けてもアイキャッチ画像が表示されない状態でした。
twitter の方には試行錯誤した結果が残っていますが、回避方法が分かりましたので、情報を共有したいと思います。とはいえ、現在はそのままリンクを貼り付けてもアイキャッチ画像が表示されるようになりましたので、トラブルは解消しています。そのサイトの初期の投稿限定の事象かもしれません。
WordPress のリンクを twitter に貼付 -> アイキャッチ画像表示されず
事の発端は、以下の tweet を貼り付けた時の事でした。
現在では画像が表示されていますが、tweet を新規作成する画面でも、投稿した後も、アイキャッチ画像が表示されていない状態でした。
アイキャッチ画像を表示させる為に試した事
少し待てばアイキャッチ画像が表示されるかと思い、数時間待ってみましたが相変わらず表示されません。その際に以下の事を試しましたが、全ての方法で画像は表示されませんでした。
- Twitter Card validator に URL を入力して読み込ませる(ググるとよく出てくる方法)。現在はカードの表示には対応していませんが、画像のキャッシュはするようです。
- bitly.com で短縮 URL を作成してペースト
- AMP ページ (URL 末尾に ?amp=1 を追加) の URL をペースト
結局、LiteSpeed cache の最適化を無効 (URL 末尾に ?LSCWP_CTRL=before_optm を追加) にした場合のみ、アイキャッチ画像が表示されました。
これらの事から、LiteSpeed cache プラグインと QUIC.cloud による最適化により、アイキャッチ画像が読み込めていないのではないかと推測しました。
LiteSpeed cache プラグインの影響かどうかを再検証
丁度週末に入った事もあり、腰を据えて試してみました。
twitter が WebP 画像へ対応しているか
まず、LiteSpeed cache プラグインで最適化されている WebP 画像に twitter が対応しているかどうかを、変換後の WebP 画像と元画像の二つを貼り付けて確認しました。
WebP 画像も問題なく表示されましたので、twitter が対応している事が確認できました。(流石に対応していない事はないと思っていましたが)
Twitter Card validator に先に登録してみる -> 成功
画像が読み込まれない状態ですので、投稿前に Card validator に URL を登録してみました。
Log を見ると、Cocoon で設定している large_image tag でカードが読み込まれている事とカードの読み込みに成功している事が確認できました。
この後で、twitter に通常通り URL を貼り付けると、正常にアイキャッチ画像が表示されました。
その後、確認の為に幾つかの tweet を投稿してみましたが、事前に Card validator に URL を登録すれば、アイキャッチ画像は正常に表示されました。
もう一度確認
この日記を作成しながら、画像が登録できなかった時の画面をキャプチャしようと試してみた所、Card validator に URL を登録しなくても、アイキャッチ画像が表示されるようになりました。
理由ははっきりしませんが不具合は解消しました。URL の貼り付けのみでOKです。少しモヤモヤする気持ちはありますが、解決したのでヨシ！とします。
まとめ
twitter にこの日記の URL を貼り付けると、アイキャッチ画像が表示されませんでした。LiteSpeed cache プラグインの最適化を外すと画像が表示されるので、これを元に調べた所、Twitter Card validator に事前に URL を登録すると、正常にアイキャッチ画像が表示される事が分かりました。
LiteSpeed cache プラグインや QUIC.cloud CDN の影響ではありませんでした。
ただ、現在では事前の登録なしでもアイキャッチ画像が表示されるようになりました。新規のドメインの画像だと発生する事象なのでしょうか？理由はわかりませんが、URL の貼り付けだけで対応できるようになりました。
私の環境では解決しましたが、もし同様の現象が発生した方は、事前に Twitter Card Validator に URL を登録してから、新規に tweet を作成し、URL を貼り付けてみて下さい。
今回のアイキャッチ画像
雲海を生成してみました。山登りは苦手ですが雲海は実際に見てみたいです。
コメント