TwitterCardで画像が正しく表示されないときの解決方法。

408views

どーも、事務所への引っ越し作業がほとんど終わって安心しているZionです。

今回はツイートするときURLを貼ったら出るはずの画像が表示されない問題が解決したのでそれについてまとめようと思います。

発生した問題

僕はブログを更新したときTwitterで投稿した記事ページを毎回ツイートしているのですが、あるときからツイートのリンク画像(Twitterカード)が表示されなくなってしまいました。

本来、記事毎に設定しているサムネイルが表示されるはずなのですが、何度ツイートしても下の画像のようになって表示されませんでした。

TwitterCardが表示されていないときの画像

試したこと:画像の容量が大きい

どうやら表示できる画像ファイル大きさに制限があるらしいです。画像の容量は5MBまでになっているらしいので、サムネイルの容量を落としました。これは必須事項だったので容量を落としたのですが、表示はまだされてません。

試したこと:コードの問題

Twitterカードを設定するためにはHTMLで設定しないといけないので、設定を見直してみました。

しかし、表示はされません。

試しに他のアカウントでツイートしてみると画像が表示されたので、Twitterカード自体は正常に機能していることがわかりました。

試したこと :一度ログアウトしてみた

他のアカウントでは正常に表示されるということはアカウント自体に問題があると考え、アカウントを一度ログアウトしてみました。

しかし変わりませんでした。

しかも別のPCで自分のアカウントにログインしてツイートしたら表示されたり、プライベートブラウザだと表示されたり挙動が謎すぎたのでこの方法は関係ないと思います。

【解決】試したこと:TwitterCardsValidator

この方法で解決しました。

このサイト(Twitter Cards Validator)は、記事のサムネイルが正しくTwitterカードに対応しているか確認するサイトだと思っていたのですが、サムネイルの更新した際にも使用するとのことで、試してみました。

Card URLというフォームに表示するURLを入れてプレビューするだけなのですが、ツイートする前ではなく、ツイートした後にプレビューするのがポイントです。

以下の動画のように操作します。

  1. 表示されないツイートのリンクを右クリックして「リンクのアドレスをコピー」をクリック。
  2. Twitter Cards validatorにペーストし、Preview cardをクリック。
  3. Twitterを更新すると治ります。

こうすることで、表示されてなかったTwitterカードが表示されました。

今まで表示されてなかったツイートを遡って表示することも、昔のツイートで表示されなくなったTwitterカードもこの方法で表示し直すことができました。

まとめ

今回は、ツイートするときのTwitterカードが表示されなくなる問題の解決方法を記事にしました。

画像の容量やコードに問題がないときは、リンクをコピーして「Twitter Cards validator」でPreview cardを行うと直ります。

Twitterサポートに連絡しても解決しなかったのでどうしようかと頭を悩ませていたら偶然この方法を発見しました。今回は、解決方法のみが発見できたので原因は掴めていません。

原因がわかったらまた追記します。

カテゴリー