「Twitter Cards Validator」でエラーが出ていないのに画像が表示されない原因はrobots.txtの設定だった

先日、自分のツイートを埋め込んだ時にちょっとした異変に気が付いた。

「Twitter Card（Twitterカード）」で「大きな画像付きのSummaryカード」を設定しているはずが、埋め込んでも表示されるはずの画像が表示されないのだ。一体なぜ？！

慌てて「Twitter Card」が正しく表示されるかを確認するツール「Card Validator」に適当なURLを入力して確認してみたところ、エラーは表示されない。それにも関わらず画像も表示されない。

色々と調べてみたところ、画像が表示されない原因はrobots.txtの設定であることを突き止めた。どうやら書き方によっては画像が正しく読み込まれないようだ！

画像の含まれるディレクトリに対し、Disallowしていないか確認

結論から言うと、robots.txt内の記述でで画像の含まれるディレクトリに対してTwitterbotをDisallow（クロール拒否）していたことが原因だったようだ。ナンテコッタイ！

参考にしたのはこちらの記事。言われみれば少し前にクロール設定をいじったような記憶があった。

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

調べてみると僕もgoogle系のbotはクロールを許可していたものの、それ以外はガッツリ拒否していたことが判明。表示されなくて当然だ！

よって、以下の記述を追記して様子を見ることに。

# allow Twitter bot on entire site
User-agent: Twitterbot
Disallow: /wp-includes/
Allow: /wp-content/uploads/

反映には時間が掛かる！設定後、しばらく待ちましょう！

上記設定を完了し、早速「Card Validator」に適当なURLを入れて想定通り画像が表示されるかどうかを試してみたが、一向に表示される気配がない。「なぜ？！」「どうして？！」「あとは何をしろと言うんだ！」と憤慨していたころ、prasmに今回の問題を解決してくれる重要な一言が書かれてあった。

時間がない人のために先に結論書きますが、「設定を適切に済ませてほっといたら出るようになった」、「時間がそこそこかかる」が正解だと思います。

via Twitter Cardで画像が表示されないトラブルでイライラしましたが、時間が解決してくれました*prasm

ということで、しばらく放置して再度試してみると…表示された！

実際に適当なURL付きツイートを貼り付けても想定通り画像が表示される。

朝のゴリ報 ▶ 「CP+ 2015」の記事まとめ feat. 美人コンパニオン写真 http://t.co/CNRDU5eEeL

— g.O.R.i (@planetofgori) 2015, 2月 14

「Twitter Card」を設定していることによってどれほどのメリットがあるかどうかは分からないが、設定していないよりは設定していることに越したことはないだろう！設定しているのに画像が正しく表示されないという人はrobots.txtの記述を確認してみるべし！