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

クラウド
クラウド
スポンサーリンク

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カードも対応してくれるといいですね。

コメント

  1. Yuko より:

    初めまして。

    私も全く同じ症状なのですが、
    「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】" />

  2. ねこ より:

    はじめまして。

    同一のWebページ(同一URL)のTwitterカードがタイミング(日時)によって表示されたりされなかったりしますね。(Twitterカード画像のタグの記述に変更無し)

    状況としては summary_large_image にしているのに、summary のような表示になることがあるようです。
    twitter側のトラブルでしょうかね。

    • >ねこさん
      はじめまして!コメントありがとうございます。

      たしかに稀にTwitterカードが表示されないことがありました。
      ただ、後日そのツイートを見てみるとTwitterカードが表示されていたり、、
      twitter側の問題かもしれませんね。

タイトルとURLをコピーしました