Twitterカード（Twitter Cards）は、ツイートしたリンク先に関連する画像や動画などの情報を、自動で表示してくれるサービスです。Webページにほんの数行 Twitterカード用のタグを追加するだけで簡単に使うことができます。このブログサイトも Twitterカードを使っているですが、設定に間違いがないはずなのに Twitterカードの画像が表示されないことがありました。そこで今回は、Twitterカードの設定は正しいのに画像が表示されない原因を調べてみました。
Twitterカードに使う画像の条件
Webサイトでよく使われている 要約カード（summary）と、大きな画像を持つ要約カード（summary_large_image）で指定できる画像の条件は次の通りです。（2018年4月27日現在）
要約カードの画像条件
- 最小サイズ：144 × 144 ピクセル
- 最大サイズ：4096 × 4096 ピクセル
- 最大画像サイズ：5MB
- 対応画像フォーマット：JPG、PNG、WEBP、GIF（SVGは未サポート）
参考資料：Summary card | Twitter Developers
大きな画像を持つ要約カードの画像条件
- 最小サイズ：300 × 157 ピクセル
- 最大サイズ：4096 × 4096 ピクセル
- 最大画像サイズ：5MB
- 対応画像フォーマット：JPG、PNG、WEBP、GIF（SVGは未サポート）
参考資料：Summary with large image | Twitter Developers
どちらのカードも画像に対する条件はかなり広いですね。今回表示されなかった画像は上の条件を問題なくクリアしています。
Card validator で設定をチェック
続いて、Twitterカードのタグが正しく設定されているかを Card validator でチェックしてみます。（Twitte にログインしていることが必要です）
Card validator | Twitter Developers
Twitterカードの設定は間違いないようですが、どうも画像が表示されません。特定の記事だけではなくすべての記事で Twitterカードの画像が表示されていないようです。
原因は CDN からの配信
色々調べた結果、表示されない原因は Twitterカードの画像を CDN から配信していることにありました。
公式のアナウンスは見つけられませんでしたが、Twitterカードを設定している WebページのURLのドメイン名と、画像のURLのドメイン名が異なる場合は、Twitterカードに画像を表示しない仕様のようです。（2018年4月27日現在）
Twitterカードの画像をオリジンサーバーから配信するように変更したところ、正しく Twitterカードに画像が表示されるようになりました。
おわりに
Facebook や Google+ では、別ドメインからの画像配信にも対応しています。Twitterカードも対応してくれるといいですね。
コメント
初めまして。
私も全く同じ症状なのですが、
「Twitterカードの画像をオリジンサーバーから配信するように変更」
は、どこを変更すれば良いのでしょうか？
教えていただければ幸いです。
＞Yukoさん
コメントありがとうございます
＞「Twitterカードの画像をオリジンサーバーから配信するように変更」
＞ は、どこを変更すれば良いのでしょうか？
Twitterカード画像（twitter:image）のURL、もしくは OGP画像のURL（og:image）をオリジンサーバーのURLに変更すればOKです。
・Twitterカード画像のタグ
<meta name="twitter:image" content="【ここのURL】" />・OGP画像のタグ
<meta property="og:image" content="【ここのURL】" />はじめまして。
同一のWebページ（同一URL）のTwitterカードがタイミング（日時）によって表示されたりされなかったりしますね。（Twitterカード画像のタグの記述に変更無し）
状況としては summary_large_image にしているのに、summary のような表示になることがあるようです。
twitter側のトラブルでしょうかね。
＞ねこさん
はじめまして！コメントありがとうございます。
たしかに稀にTwitterカードが表示されないことがありました。
ただ、後日そのツイートを見てみるとTwitterカードが表示されていたり、、
twitter側の問題かもしれませんね。