ツイッターカードが表示されない問題への対処法

新しいウェブサイトを公開して、いざツイッターで告知しようとするとツイッターカードが表示されないことがあります。

ツイッターカードを表示するために必要な情報は、ヘッダーのメタデータで指定するのだけど、公開日までベーシック認証で非公開にしていたりすると、Card Validatorなどでの事前確認も難しかったりします。

メタデータを確認しても問題が見当たらず、本家のCard Validatorでチェックしてもやはり問題なし。

こんな時はどうしたら良いのでしょうか？
いろいろ調べてみました。

ツイッターカード問題についてググってみた

ググってみるといくつかのブログ記事がヒットしたのですが、どれも根拠が薄いふんわりした微妙な記事ばかりで困惑してしまいました。

謎情報1 – Twitter Card Validatorでカード表示を確認する

これは誤りというわけではないのですが、2022年8月頃にTwitter Card Validatorからプレビュー機能は削除されています。つまり、今はTwitter Card Validatorでカード表示を確認することはできません。

カード表示はされないけど、メタ情報にエラーがあれば教えてくれるので、エラーチェックには使えます。

ソースはこのページ（公式）

謎情報2 – 「Preview card」ボタンを連打すればキャッシュが更新される

Twitter Card Validatorで「Preview card」ボタンを連打すれば、キャッシュが削除されると記述しているサイトもありましたが、公式からそういった情報は出ていません。たまたまキャッシュが更新されるタイミングで、タイムラインを再読みしたとか、クローラーがまだ来ていなかったとか、偶然の出来事である可能性があります。

たくさんの人が意味のない連打をすることになるので、根拠の薄いことをブログで公開することは控えて欲しいところです。

謎情報3 – 「twitter:title」メタタグが必須

必須ではないです。「twitter:title」か「og:title」のいずれかが設定されていればOKです。「twitter:title」のフォールバックとして「og:title」が定義されています。「og:title」はツイッター以外にも広く利用されますので、「og:title」を設定しておけば問題ありません。

「twitter:description」と「twitter:image」についても同様で、それぞれ「og:description」と「og:image」がフォールバックとして指定されているので、「og:description」と「og:image」を設定しておけば、「twitter:description」と「twitter:image」は不要です。

公式のドキュメントを調べてみた

公式ドキュメントは往々にして読み辛かったりするので、まずはググってみたのだけれども、あいにくまともな情報が見つからないので、結局は公式ドキュメントを読むことにしました。（最初からそうするべきだけど）

以下の情報を得ることができたのでまとめておきます。

カード情報のキャッシュ期間は最大で７日間

• ツイッターには、ツイッターカード情報を取得するためのクローラーがある。
• クローラーが一度カード情報を取得すると、最大で７日間キャッシュされる。

※明確に記述がされていたわけではないが、キャッシュを強制的に削除する方法は無さそう。

メタタグを更新したのに、古いカード情報が表示されている場合の対処法

「ツイッターのクローラーは、およそ7日ごとにあなたのページのCardタグ情報を再インデックス化します」と書いてあるので、基本的には待っていればいずれカード情報は更新されるようです。

正しく情報がセットされているかをいますぐ調べたい場合は、以下のように短縮URLを利用してテストが有効かも知れません。（sometimesなので、確実というわけではない）

1. 必要なメタデータをサイトに設定する
2. URL付きのツイートをする
3. ブラウザを再読みして、タイムライン上のカード情報を確認する
4. メタデータを変更してみる（画像やタイトルなどを変更する）
5. 同じURLをbit.lyを使って短縮URLに変換する
6. 新しいbit.lyのURLをツイートする
7. ブラウザを更新して、カード情報が変わっているか確認する

ソースはこのページ（公式）

カード情報が正しく設定されているか確認する方法

キャッシュを更新する方法が無いのならば、更新されるのを待つしかないけれど、もしもカード情報が正しく設定されていなけば、結局いつまで経っても正しくカード表示がされないわけで。

カード情報が正しく設定されているかを確認するには、先程の古いカード情報に関するテスト方法がそのまま使えると思われる。

うまくツイッターカードが表示されないページのURLを短縮URLに変換して、ツイートしてみれば良い。期待したとおりの結果が得られたのなら、最大７日待てばCardタグ情報が再インデックス化されてきちんと表示されるようになるはず。

※bit.lyのURLを使えば、キャッシュが更新されると記述しているサイトも見受けられますが、信頼できる情報ではないでしょう。公式ドキュメントには、あくまでも「テストに使える」と記述されており、キャッシュの件には触れられていません。

以上。