Twitterカードで画像が表示されない現象の対処法と意外な原因

青い鳥

ツイートの中にURLを書き込むだけで、そのページのサムネイル画像や概要などを表示してくれる「Twitterカード」機能。サイトを目立たせるために必要不可欠で設定してないページは変なサイトではないかと怪しまれる可能性もあります。

Twitterカードの表示が成功した例

表示成功例。このアカウントは、ただのソシャゲ登録用アカウント。

そんなTwitterカードがURL付きのツイートをしてもきちんと表示できない現象の対処法を紹介します。

Twitterカードの表示失敗例

表示失敗例。

私が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 [フェレット]

Twitterで企業アカウントを運用されている方は、「Twitterカード」の設定は行われているでしょうか。今回は、企業としてのアカウント運用するのであれば設定しておいた方が良いTwitterカードの設定方法を解説します。

FC2ブログの記事

FC2ブログをTwitterカードに対応させる方法 – 情報管理LOG

情報管理LOGの@yoshinonです。先日、Twitterカードについて記事に...

これ以降は基本WordPressの設定です。

 

テーマ・プラグインの不具合やタグの打ち間違い

WordPressを使っている方のほとんどがテーマの設定かプラグインを使ってTwitterカードの設定をしているのではないでしょうか。それらのテーマ、プラグインで2重に設定していたり、なんらかのプラグインが干渉している可能性があります。

設定を見直す。他のプラグインを使ってみる。干渉しているプラグインを調べてみる(これはめんどくさいから最後の手段でいいかも)。などを試してください。

私が使っているテーマ「Simplicity」はカスタマイズからオンオフとカードのサイズを選ぶだけ。

SimplicityのカスタマイズのTwitterカード設定

Twitter Cardsへの登録方法

Simplicityでは、プラグインを使用せずとも、デフォルトで以下のようなTwitter Cards情報のタグが挿入されます。ただ、プラグインで設定を行うのと同様に、TwitterにTwitter Cards登録はしなければいけません。今

定番プラグイン「All In One SEO Pack」での設定方法。[All In One SEO Pack]のバージョンアップで直った事例もあるようです。

「All in one SEO pack」でTwitterカードを簡単に設定する方法 | IT便利帳

WordPressのプラグイン「All in one SEO pack」でTwitterカードを簡単に設定する方法。設定済と未設定の場合の表示の違い。「Summary Large Image(写真大+概要)」の設定がおすすめ。

初心者にはオススメしないけれど、タグに直接書き込む方法。

【10分で終了】facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ

facebookでブログ記事を拡散したいなら必ず設定しないといけないのがOGPです。プラグインは使わずに、コピペするだけでOGP設定ができるスニペットを作ってみました。

ちなみに、よくTwitterカードの記事に書いてある card validator でツイッターへの登録は今は不要なはずです。

アクセスを拒否している

robots.txt で画像ディレクトリのクロールを拒否していると画像が表示されません。

Twitter Cardsの画像が表示されなかった原因はキャッシュじゃなくてクロール設定だった *Ateitexe

twitter公式ページのTLにて、画像や著作者のアカウントなどを一緒に表示してくれるTwitterカード。これの画像が最近表示されてないな…と気になっていたのですが、自分のせいでした(;´Д`) 解決に至るまでいろいろ調べたのでメモ的に。

画像自体が問題

そのサイトのTwitterカードで表示しようとしている、サムネイル画像のサイズが問題の場合があります。

画像が小さすぎる

デフォルトのSummaryカードは幅120p×以上、高さ120px以上。Summary with Large Imageカードは幅280px以上、高さ150px以上必要です。

画像が大きすぎる

Twitterカード公式では2MB未満。それぞれのレイアウト個別ページでは1MB以下と記述されていてわかりにくいですが、とりあえず1MB未満にして試してみましょう。

Twitter側の設定が原因の場合の対処法

私は上の方法を試してもまったく表示されるようになりませんでした。いや~、Twitterが原因と気づくのに本当に時間が掛かった。card validator で表示できていたのに気づくべきでしたね……。

で、おそらくTwitterの設定で表示されないのはこれが原因。

Twitterの画像、動画の表示設定

設定のユーザー情報内「ツイートする画像/動画を不適切な内容を含むものとして設定する」がオンになっていると、「不適切な内容を含む可能性のある画像/動画を表示する前に警告を表示しない」をオフにしているユーザー(自分も)からTwitterカードの画像も見れない仕様だったのです。

そして、画像が見られない結果、見た目ではTwitterカード自体が表示されていないように見えていたのがややこしかったですね。

これが原因の場合は、下の「ツイートする画像/動画を不適切な内容を含むものとして設定する」をオフにすることで、あっさり表示できるはずです。

まとめ

Twitter設定の情報はネットで全然見ないのだけれどここでハマったのは私だけなのかな?

これら以外に原因があった、表示できない、という方の情報待っています。詳しくないので解決できるかはわかりませんが!

スポンサーリンク
Googleプラス
Push7
フェイスブック

『Twitterカードで画像が表示されない現象の対処法と意外な原因』へのコメント

  1. 名前:あお 投稿日:2017/09/01(金) 18:48:53 ID:065fe8bec 返信

    記事ありがとうございます!

    TwitterCardは正常に表示されますが、ツイートすると表示されなくなる現象が発生しています。
    同じくTwitterの問題かと思い上記の方法を試しましたが表示されず。。。

    何か他に原因が検討つきましたら、ご教授ください!

  2. 名前:熊出没注意 (@fj74c35xdk9w5e) 投稿日:2017/11/11(土) 14:53:26 ID:5292b9b52 返信

    Twitterカードの場合、ツイートの中に同一のURLを書き込んでも、画像が表示されることもあれば表示されないこともありますね。同一のURLでも日によって違います。htmlの記述、設定など以外にも、twitterサーバ側の負荷とか障害などの要因もあるかも知れません。