無名ブロガーにとって、ブログを少しでも知ってもらうためのツールとしてなくてはならない存在Twitter。
TwitterでブログURLを載せてツイートした際に、通常だと、「文字＋URL」という表示となります。これをもっと、クリックしてもらいやすくするための工夫がTwitterカード。
画像（バナー）＋テキスト
という、視覚的に思わずクリックしたくなるような工夫。↓こんな感じのツイートがTwitterカード。
かんたん！おいしい！４年間研究した「スパムおにぎり」のレシピを特別公開！ https://t.co/b5lmT0vuSO
— WITHK! (@blogWITHK) 2018年4月15日
しかーし、最近なぜだかこのTwitterカードの画像が表示されなくなってしまいました。
UNIQLO【ブロックテックパーカー】を着て通勤はできるか？向いている？ https://t.co/WoKwd7LMPp
— WITHK! (@blogWITHK) 2018年4月18日
画像部分が人の影？みたいになってしまって、表示されません。
いったい原因はなんなのか？検証しています。
画像が表示されない原因
※今回の記事は検証記事になります。
Twitterカードの設定方法については、プラグインを利用することで簡単に設定することができます。
ちなみにぼくが利用しているプラグインは、「All in ONE SEO」
このプラグインを有効化することで、TwitterやらFacebookの投稿設定をすることができます。
この設定画面の部分で、間違えがあるのではないかということで探ってみましたが、Twitterカードの画像が表示されていた以前と以降では一度もいじっていないので、問題はないはず。
ちなみに、Twitter設定で、OG:Imageソースを選ぶという箇所があります。
ここは、表示させたい画像を指定する部分になっていますが、選択肢が全部英語で意味不明です。
もしも、Twitterカードにアイキャッチ画像を表示させたい場合には、
Featured images
がアイキャッチ画像のことだそうです。
※辞書で調べてるとFeaturedは「おすすめ」という意味が出てきて確信が持てなかったのでググりまくりました。
実際に表示されるか試す
さて、ここまで設定ができたら実際にTwitterでツイートしたらTwitterカードが表示されるハズ。
表示がされるか試してみたいところですが、普通にツイートをして表示されなくて何度も何度もトライを繰り返したら、フォローワーさんのタイムラインにご迷惑をおかけしてしまいます。
テストトライはCard ValidatorというTwitterのページで行うことができます。
Twitterとブログを連携させるさいに使用するサイトです。
ここに、再設定をしてからツイートをしてみます。
UUUm…やはり画像は表示されません。。。
URLがhttpsになっていないか？
次に確認をすべきは、Twitterカードに表示しようとしている画像URLの先頭がHttpsになっていないか確かめましょう。
「s」が付いていると、通信を暗号かするので、画像にアクセスができず表示がされないそうです。
ってことで、自分の画像を調べましたが、「s」はついていなかったんですよねー
Twitterでは表示されず
そんなこんなしていて、再度Card Vilidatorで再度表示をさせてみたところ、投稿記事のなかの１つの画像がなぜか表示された。
なんでこの画像が表示されたんだー？と思いつつも、「ようやく解放されるぞー！！！」とかって思って、Twitterでブログ記事を投稿してみたところ・・・
やはり画像は表示されませんでした。
原因はいったい・・・
まとめ！
今回の記事は、答えの出ていない検証記事でした。答えを探して読んでくださった方、申し訳ありません。
ただ、自分はわかったって顔をして自分がつまずいた部分を隠して「こうやったらできますよー。」みたいな記事は書きたくなかった。
自分がアホなこともさらして、アホな自分がつまずいていて、探している段階では築いていないミスを公開することで、同じようにつまずいた人の参考になればと思って書きました。
もし、解決策をお持ちの方がいらっしゃいましたら、教えてください！
ちなみに、今調べているのは、Card Validatorに表示される WARN: this card is redirected to http://withk717.com/ というエラー。
このエラーを解読できたら、この問題は解決すると思うのですが、何分、英語が読めないものでTwitterのヘルプ文書が読めずに苦戦中です。
ということで、なんとか解決できるように頑張ります！
いじょー！
Twitterカードの画像が表示されないの解決策検証
でした！
でわでわっ！
