Twitterカードの設定を変更して反映するには?WordPress/Luxeritas 謎は残りますが。。

2023年1月3日

Twitterカードの画像サイズを変更したときや、Twitterカード画像設定されていないページに画像を設定したときに、ツイートのカード表示がうまくいかず試行錯誤しましたが、だいぶ反映される確率があがったのでメモしておきました。いくつかポイントはありますので参考になれば幸いです。

パソコンのブラウザでツイッターにツイートしています。スマホでは試していません。

まずはサーバーのキャッシュ無効化

私の使っているロリポップのサーバーキャッシュは「ロリポップ!アクセラレータ」という名称でした。FTPで接続して、「サーバーの管理」➡「ロリポップ!アクセラレータ」の画面でスイッチをOFFしました。

最初は無効にせず、更新作業するたびにキャッシュクリアをしていたんですけど、あれこれ試しているうちに手間になったので無効にしてしまいました。
サーバーのキャッシュを無効にしてもPage Speed Insightsのパフォーマンススコアは変わらなかったので、しばらく無効にしておこうと思います。
無効にしたあとのパフォーマンススコアも100ポイントをキープしてました。

Adsenseを使っている方でPage Speed Insightのスコアがあがらないときに試して欲しい方法はこちらが参考になります。劇的に変わり、安定して100%近いスコアをキープしています。

Luxeritas のTwitterカード設定

Luxeritasの設定画面で「OGP」と「Twitterカード」を画像の様に設定して、画面下の方の「保存」ボタンを押します。
当初は「Twitterカードタイプ」を「サマリー(summary)」にしていたのですが、あまり当てにしていなかったTwitterのアクセスが少し増えてきているので、「サマリー(summary_large_image)」の大きな画像の方に変えてみることにしました。大きい方がポチッてくれる確率があがりそうな記事を見かけましたのでね。

ページ毎にやってみたこと

①WordPressのページ編集画面の一番下にある「OGP 画像」が表示されているか確認する。
 表示されていない場合は画像を設定する。※1
②ページを「更新」する。 忘れない様に!!
③Twitterカードのキャッシュをクリアする。 https://cards-dev.twitter.com/validator ※3
④ブラウザでTwitterを表示する。※2
⑤ツイートする。

※1:LuxeritasのOGP画像は、下書き保存したときに自動的に画像が設定される様で、画像が設定されてない事がある様です。

※2:④の前にTwitterが表示されていた場合は、いったんタブを閉じて、再表示しないと反映されない様です。ページのリロードやブラウザ閲覧履歴のクリアなど色々試行しましたが、Twitterを再表示させるのが、最も反映確率が高かったと思います。

※3:Twitterカードがうまく表示されても、キャッシュクリア画面では「Unable to render Card preview」のままです。➡ 2022年7月ごろにプレビュー機能の表示を廃止して、この表示になったそうです。ちょっと違和感ありますね。。

うまくいかないとき 

その2:Twitterカードのキャッシュクリアと、ブラウザでTwitterを再表示するのを繰り返してみてください。

その2:Twitterカードに使う画像の縦横比を変えてみてください。縦横比が規定外で表示できない事がある様です。

Twitterカードの画像サイズ
画像サイズは4,096×4,096までだそうです。ただし、縦横比が1:1.91でした。
サイズ: 2,560 x 1,152 1:2.222の画像が多かったので、Twitterカードが表示できないと確信していたのですが。。。この記事を書いている最中に最終確認したら、2,560×1,152の画像でもTwitterカードが表示できたものがありまして。。。謎です。次の画像の左側のOGP画像はどうみても2,560×1,152 1:2.22の比率なんですけど、表示できません!!って表示にならないですね。。

2022/1/3追記 翌日Twitterを見たら画像が表示されてませんでした。さらに、画像の縦横比を変更して、キャッシュをクリアして、何度ツイートしても反映されなかったので、ページアドレスを変更してみたら、ようやく反映されました。

ん~これが表示できてしまったのが謎なんです。次の画像の様になると思っていたんですけど。。

Twitterカードが表示できないとき

Twitterカード投稿

教えてあげてもいいけど