ツイートの中にURLを書き込むだけで、そのページのサムネイル画像や概要などを表示してくれる「Twitterカード」機能。サイトを目立たせるために必要不可欠で設定してないページは変なサイトではないかと怪しまれる可能性もあります。
表示成功例。このアカウントは、ただのソシャゲ登録用アカウント。
そんなTwitterカードがURL付きのツイートをしてもきちんと表示できない現象の対処法を紹介します。
表示失敗例。
私がWordPressで作ったブログを宣伝するために使おうとして失敗した経験を元に語ります、ですが、別にサイトなど運営していない方で紹介したいサイトのTwitterカードが表示されない現象も解決するかもしれません。
色々試したのに表示されない！ という方は一番下の「Twitter側の設定が原因の場合の対処法」
大まかな原因の切り分け
ブログを始めて、そのためにツイッターアカウントを作った人は大きな勘違いをしているかもしれません。
まず、Twitterカードがうまく動かない理由がサイト側が原因なのかツイッター側が原因なのか調べる必要があります。私は自分のブログの設定が問題と決めつけてかなり時間を無駄にしてしまいました。
それでは原因の特定方法。Card validator というページに自分のページのURLを入力してきちんと表示されたらツイッターアカウントの設定、表示されなかったらサイトの設定が原因の可能性が高いです。
サイトを持っていない方も card validator に表示させたいページのURLを入力してみてください。表示されなかったのなら、おそらくそのページの運営者がTwitterカードの設定をしていないのが原因です。
そのページはあきらめて気にせずツイッターライフを楽しみましょう。運営者に連絡してみるという手がありますが、そこまでする必要があるのか疑問ですね。
表示された場合はやはりツイッターの設定が原因の可能性が高いです。Twitterカードの設定を確実にしているサイト。今表示されているこのページ（宣伝）や上の画像でつぶやいているTwitterカードの説明ページ https://dev.twitter.com/ja/cards/overview などをつぶやいてみて、表示されなかったら確定です。
ブログ側の設定が原因の場合の対処法
上で書いたように、私はWordPressを使っているので、他の場合はよくわかりません。ホームページの場合はタグで（htmlタグ？ メタタグ？ そのレベルの知識もありません……）無料ブログサービスもタグ……なのかな？ ということはタグの打ち間違いが原因の可能性が高いのかな。
Twitterのクリック率を上げるTwitterカードの導入方法｜ferret [フェレット]
FC2ブログの記事
FC2ブログをTwitterカードに対応させる方法 – 情報管理LOG
これ以降は基本WordPressの設定です。
テーマ・プラグインの不具合やタグの打ち間違い
WordPressを使っている方のほとんどがテーマの設定かプラグインを使ってTwitterカードの設定をしているのではないでしょうか。それらのテーマ、プラグインで２重に設定していたり、なんらかのプラグインが干渉している可能性があります。
設定を見直す。他のプラグインを使ってみる。干渉しているプラグインを調べてみる（これはめんどくさいから最後の手段でいいかも）。などを試してください。
私が使っているテーマ「Simplicity」はカスタマイズからオンオフとカードのサイズを選ぶだけ。
定番プラグイン「All In One SEO Pack」での設定方法。［All In One SEO Pack］のバージョンアップで直った事例もあるようです。
「All in one SEO pack」でTwitterカードを簡単に設定する方法 | IT便利帳
初心者にはオススメしないけれど、タグに直接書き込む方法。
【10分で終了】facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ
ちなみに、よくTwitterカードの記事に書いてある card validator でツイッターへの登録は今は不要なはずです。
アクセスを拒否している
robots.txt で画像ディレクトリのクロールを拒否していると画像が表示されません。
Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった *Ateitexe
画像自体が問題
そのサイトのTwitterカードで表示しようとしている、サムネイル画像のサイズが問題の場合があります。
画像が小さすぎる
デフォルトのSummaryカードは幅120p×以上、高さ120px以上。Summary with Large Imageカードは幅280px以上、高さ150px以上必要です。
画像が大きすぎる
Twitterカード公式では2MB未満。それぞれのレイアウト個別ページでは1MB以下と記述されていてわかりにくいですが、とりあえず1MB未満にして試してみましょう。
Twitter側の設定が原因の場合の対処法
私は上の方法を試してもまったく表示されるようになりませんでした。いや～、Twitterが原因と気づくのに本当に時間が掛かった。card validator で表示できていたのに気づくべきでしたね……。
で、おそらくTwitterの設定で表示されないのはこれが原因。
設定のユーザー情報内「ツイートする画像/動画を不適切な内容を含むものとして設定する」がオンになっていると、「不適切な内容を含む可能性のある画像/動画を表示する前に警告を表示しない」をオフにしているユーザー（自分も）からTwitterカードの画像も見れない仕様だったのです。
そして、画像が見られない結果、見た目ではTwitterカード自体が表示されていないように見えていたのがややこしかったですね。
これが原因の場合は、下の「ツイートする画像/動画を不適切な内容を含むものとして設定する」をオフにすることで、あっさり表示できるはずです。
まとめ
Twitter設定の情報はネットで全然見ないのだけれどここでハマったのは私だけなのかな？
これら以外に原因があった、表示できない、という方の情報待っています。詳しくないので解決できるかはわかりませんが！
コメント
記事ありがとうございます！
TwitterCardは正常に表示されますが、ツイートすると表示されなくなる現象が発生しています。
同じくTwitterの問題かと思い上記の方法を試しましたが表示されず。。。
何か他に原因が検討つきましたら、ご教授ください！
Twitterカードの場合、ツイートの中に同一のURLを書き込んでも、画像が表示されることもあれば表示されないこともありますね。同一のURLでも日によって違います。htmlの記述、設定など以外にも、twitterサーバ側の負荷とか障害などの要因もあるかも知れません。
追加になりますが、Webサイトでは “summary_large_image” で設定していて、ツイートでも 通常は “summary_large_image” の表示になっているのに、時々 ツイート上は “summary” の表示になることがあります。