Twitterカードの設定は正しいのに画像が表示されない原因

Twitterカードの設定は正しいのに画像が表示されない原因
あぱーブログ
2018年4月27日  カテゴリー:WEB  タグ:
Pocket
LINEで送る

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カードの画像が表示されていないようです。

Card validator のチェック結果(画像表示NG)

原因は CDN からの配信

色々調べた結果、表示されない原因は Twitterカードの画像を CDN から配信していることにありました。

Twitterカードのイメージタグ

公式のアナウンスは見つけられませんでしたが、Twitterカードを設定している WebページのURLのドメイン名と、画像のURLのドメイン名が異なる場合は、Twitterカードに画像を表示しない仕様のようです。(2018年4月27日現在)

Twitterカードの画像をオリジンサーバーから配信するように変更したところ、正しく Twitterカードに画像が表示されるようになりました。

Card validator のチェック結果(画像表示OK)

おわりに

Facebook や Google+ では、別ドメインからの画像配信にも対応しています。Twitterカードも対応してくれるといいですね。

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です