Twitterカードが正しく表示されない問題を解決した話

• 起きている問題
• 解決したいこと
• 確認したこと
• やったこと1 「twitter:imageタグを削除」
• やったこと2 「metaタグの見直し」
• やったこと3 「 Twitterカードをクロールさせる」
• やったこと4 「画像パスを調べる」
• やったこと5 「Twitter社に相談する」
• やったこと6 「画像の縦横比率を変えてアップロードし直す」
• やったこと7　「画像の書き出し方法を変える」
• まとめ

起きている問題

・Twitterカードが表示されるページと表示されないページがある。

（最近WordPressからMovable typeにブログを移行しました。そしてWordPressから移行した記事のTwitterカードは正常に表示されるのですが、Movable type移行後に書いた記事のTwitterカードは表示されない状況です）

解決したいこと

・全ての記事でTwitterカードを正常に表示させたい。

確認したこと

・LINEやFacebookでは、OG画像が正常に表示される。（Twitter上でのみ表示されない状況）

・OGPチェッカー（https://rakko.tools/tools/9/）上で確認すると表示されている。

・Twitterアプリとブラウザ版のキャッシュもクリアして試したが、それでも表示されない。

やったこと1 「twitter:imageタグを削除」

「Twitterカードが表示されるページと表示されないページがある」をキーワードにして調べて下記の記事を参考しました。

解決策としてはtwitter:imageタグを外し、og:imageだけ残してみてください。

なぜかわかりませんが、私はこれで解決しました。

ツイッターはtwitter:cardとtwitter:titleさえあれば他のogタグも読めるみたいです。

参考記事：Twitterカードが正しく表示されない問題の解決法まとめ【ブログ｜ツイッター｜SNS運用】

とあったので、twitter:imageタグを削除し、og:imageタグだけ残しました。

その後しばらく時間を置いてキャッシュクリアもしましたが、解決しませんでした。

やったこと2 「metaタグの見直し」

Twitterのカードタグの設定をTwitter社公式情報のものと全く同じにして設定し直しました。

公式サイト : ツイートをカードで最適化する

しかし、この方法でも解決しませんでした。（LINEやFacebookでは正常にOG画像が表示されるため）metaタグ周りが原因ではないようです。

やったこと3 「 Twitterカードをクロールさせる」

「公開したばかりの記事」「OG画像を短期間で複数回変更した記事」の場合、正しく設定していてもOG画像が表示されなかったり、前に設定したOG画像が表示される場合があります。そこで、下記サイトに問題記事のURLを入れてクロールさせてみました。しかし、これでも解決しませんでした。

https://cards-dev.twitter.com/validator

やったこと4 「画像パスを調べる」

Twitterカードが「表示される記事のOG画像の画像パス」と「表示されない記事の画像パス」を比較して調べました。

• 表示される画像パス：ドメイン/assets_c/2021/10/test1.png
• 表示されない画像パス：ドメイン/assets_c/2022/12/test2.png

2つの画像パスの違いは「画像がアップロードされた日付でフォルダ分けされている部分」です。そこで、表示されない画像を表示される画像の日付のフォルダ名でアップロードしました。

しかし、これでも解決しませんでした。

やったこと5 「Twitter社に相談する」

今度はTwitter社にこの件についてお問い合わせをしました。

何通かメールでやりとりをして、その後「トラブルシューティングを試してみて」と言われたので下記Twitter社公式のトラブルシューティングを試しました。

公式サイト：twitter.comのトラブルシューティング

トラブルシューティングの内容は

• ブラウザが最新バージョンでない場合は最新にする
• 他のブラウザでも試す
• 一度アカウントからログアウトする
• ブラウザのアドオン（拡張機能）をオフにする

などです。これらも試しましたが解決しませんでした。

やったこと6 「画像の縦横比率を変えてアップロードし直す」

縦横比を変えてサムネイルを作り直し、画像をアップロードし直しましたがこれも解決しませんでした。

やったこと7　「画像の書き出し方法を変える」

これが原因でした！

記事のサムネイル画像はIllustratorで作っているのですが、その際に画像の書き出し方法は「書き出し形式」「スクリーン用に書き出し」「Web用に保存(従来)」の3つの種類があります。

その際に「書き出し形式」を選択してサムネ画像を書き出したのが原因で「Web用に保存(従来)」で書き出したら、正常にTwitterカードが表示されました。

まとめ

結果的に「Illustratorの書き出し方法が原因だった」ということで初歩的なミスでした。

「書き出し形式」から書き出しても、WordPressで運用していた時はTwitter上で画像が表示され、LINEやFacebookでもOG画像が表示されていたので、なかなか気が付きませんでした。今後はIllustratorの書き出しに気を付けます。