Twitterカードが表示されないときの対処法

はじめに

Twitterカード用のタグを追加しているのにTwitterでTwitterカードが表示されないときの対処法を紹介します。

Twitter カードが表示されない

Twitterカードが挿入されるWordPressサイトのリンクをツイートしたのですが、何故か特定のページに限りTwitterカードが表示されません。
Tweetの例、カードが表示されていない
同サイトの他のページへのリンクではTwitterカードが表示されました。タグの記載ミスも考えにくいです。
同じサイトの別のページではカードが表示されている

原因を調べる

Twitter の公式ドキュメントを参照してます。その記載によると「Card validator」なる検証ツールがあり、Twitterによるアクセスログが見られるようです。
Card Validator | Twitter Developers
https://cards-dev.twitter.com/validator
先程の問題のURLを開いてみます。
Unable to render Card preview のエラーとLogが表示される
ERROR: Fetching the page failed because the response is too large.
というエラーログが確認できました。つまり問題のページはページサイズが大きすぎて取得できなかった。ということになります。
「Card validator」にてURLを入力してみることでTwitterカードが表示されない原因を特定できます。
また、Twitterカードに古い情報が表示されている場合も、「Card validator」にて入力して送信するとキャッシュを頼らずに再取得してくれます(他のツイートのカードも更新されます)。

ホームプロフィール外部リンクのため、別ウインドウで開きますプライバシーポリシー

時間のないサイト運営者リング外部リンクのため、別ウインドウで開きます

© 2024 Oishi Takanori / Made with Gatsby.js