ブログ記事を書いてそのリンクをTwitterに投稿する際、Twitterカードの設定をしていれば画像付きのカード表示に変換されます。ですが、時々うまく画像が表示されない場合があります。その場合の対処法を説明します。
時々Twitterカードで画像が表示されない事象とはどんな状態？
通常、正しく設定されたTwitterカード情報付きのブログ記事であれば、Twitterに登校時画像付きのカード表示に変換されます。しかし、時々ですが以下のような画像のみが表示されない状態になることがあります。
設定が正しいのにTwitterカードで画像が表示されない理由
では、設定が正しいのに画像が表示されないのはなぜでしょうか。
まずは、Twitterカードの仕組みについて簡単にみてみましょう。Twitterカードの表示はURLをもとにページに設定された情報を読んで行われます。
Twitterのクローラは、Googleのrobots.txt仕様に準拠して、URLをスキャンします。カードマークアップのあるページがブロックされると、カードは表示されません。画像のURLがブロックされると、サムネイルや写真は表示されません。
上記の通り、URLのブロックがされていない状態でブログ側の設定が正しければ基本的には画像は表示されるはずです。
設定が正しいのに画像が表示されない理由としては、考えられる理由は様々ですが、たいていはTwitterからのクロールがうまくいっていないことが多いようです。
トラブルシューティングでは、カードの表示に関して直接言及はしていませんが、Twitter Validatorの記述に以下のような記述がされています。
- A network lag is causing a delay in fetching your images. If your server is in a remote location and/or has unreliable network access, our web crawler may have difficulty downloading your meta tags and/or images. Please retry as necessary.
Twitter Card Validator を使用して画像表示をさせることができる
では、どのように正しく表示させればいいのでしょうか。
答えは簡単。クロールが失敗するならば再度クロールを実行させればOKです。
再度クロールを実行させるには「Twitter Card Validator」というTwitter公式のツールを使用します。
以下のページにまずはアクセスしましょう。
https://cards-dev.twitter.com/validator
すると以下のようなフォームが表示されるので、再度クロールさせたい記事のURLを入力し、「Preview card」をクリックします。
すると、カードのプレビュー画面にTwitterカードが表示されます。
「Preview card」をクリックしてもならない場合は再度「Preview card」をクリックしてください。この操作は繰り返し実行しても問題はありませんので、表示されるまで実行してください。
Twitter Card Validatorで表示されれば、Twitter側でも表示されるようになる
前述の「Twitter Card Validator」での操作後、Twitterでカードが表示されるようになります。
先ほど操作を行った記事URLもTwitter側でリロードすることで以下のようにカード表示されるようになりました。リロードでも表示されない場合は、一度アプリやブラウザを停止させた後、再起動させてみてください。
まとめ
Twitterカードが時々うまく画像が表示されない事象が発生した場合の対処法を説明しました。ポイントは以下の3つ！
- 「Twitter Card Validator 」でURLを入力して再クロールさせる
- Twitterカードのプレビュー画面で正しく出るまで実行させる
- Twitterでリロードして表示されることを確認！
もしこのような事象が発生した場合は、まずは上記の方法を試してみてくださいね！