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

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

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

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

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

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

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

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


調べてみると僕も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


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

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


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

オススメ

gori.meの最新情報をチェック!!

  1. 【大悲報】2017年のiPhone、「iPhone 7s」と「iPhone 7s Plus」に?!
  2. 僕が遭遇した15インチ型「MacBook Pro (Late 2016)」の不具合まとめ
  3. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  4. 「MacBook Pro (Late 2016)」専用のUSB-Cハブ「HyperDrive」が登場
  5. 精算不要の「Amazon Go」、登場!万引きにしか見えない最先端スーパー