3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

※ これは2017-07-14に個人ブログで公開した記事を移植し、CC0-1.0で提供しています。情報は古い可能性があります。

Twitter カードが表示されない

Twitterカードが挿入されるWordPressサイトのリンクをツイートしたのですが、何故か特定のページに限りTwitterカードが表示されません。

Tweetの例、カードが表示されていない

同サイトの他のページへのリンクではTwitterカードが表示されました。タグの記載ミスも考えにくいです。

同じサイトの別のページではカードが表示されている

原因を調べる

Twitter の公式ドキュメントを参照してます。その記載によると「Card validator」なる検証ツールがあり、Twitterによるアクセスログが見られるようです。

先程の問題の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」にて入力して送信するとキャッシュを頼らずに再取得してくれます(他のツイートのカードも更新されます)。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?