よく忘れるので備忘録としてTwitterカードのあれこれをメモしておきます。 Twitterカードとは、URLがツイートされると、そのサイトの画像を含めたサマリーがカード形式でツイートの文言と一緒に表示される機能です。Twitterカードを設定しておけば、通常のツイートよりもクリックしてもらいやすくなります。 # Twitterカードの設定 Twitterカードの設定は以下のようになります。＜head＞の中に含めてください。 ##### カードの種類 カードの種類はいくつかありますが、「**summary（サマリーカード）**」と「**summary_large_image（大型画像付きサマリーカード）**」のふたつを扱えれば事足りるでしょう。それぞれはツイッター上で以下のように表示されます。 https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/39/0001.png https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/39/0002.png ##### 画像 カードで使用する画像のURLサイズは**5MB未満**である必要があります。 画像形式は**JPG、PNG、WEBP、GIF**がサポートされています。GIFアニメを使用してもアニメーションはしません。SVGはサポートされていません。 サイズは、サマリーカードが**正方形（1:1）**、大型画像付きサマリーカードは**「1.91:1」の横長長方形**で、推奨サイズは「600ｘ314 px」となっています。もちろんこれより大きくてもよくて、このサイトの画像はほぼ標準の倍の1200x630pxにしています。 ##### その他設定 その他くわしい設定は[公式のデベロッパーページ](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup)を御覧ください。 # Twitterカードの仕組みとキャッシュの更新 Twitterカードの仕組みをかんたんに説明しておくと、URLがツイートされるとツイッターはそのHTMLを見に行き、そこにTwitterカードの設定があればそれをキャッシュします。以後そのURLがツイートされる度にキャッシュが表示されることになります。 なので、何かの理由でTwitterカードの画像を変更したくなっても、画像を差し替えただけではツイッター上の画像は差し替えたものになりません。 差し替えが必要な時は、Twitterカードの表示を事前に確認できる[Card validator](https://cards-dev.twitter.com/validator)でプレビューしてみてください。プレビューと同時にTwitter側のカードのキャッシュが刷新されます。 # Twitterカードが表示されない Twitterカードが表示されないことがあります。 そんな時は先に紹介した[Card validator](https://cards-dev.twitter.com/validator)で、設定を色々変えて試して不具合を見つけてください。 でも、コードや設定を何度眺めてもこれといった間違いは見つからないのに、どうしても表示されない事があります。実際このブログは、いくらツイートしてもTwitterカードが表示されないという問題を抱えていました。 やっとの思いでみつけた原因はサーバーの設定でした。ここで使っているサーバーはDoS攻撃を危惧したのでしょう、デフォルトで「**海外からアクセスを遮断する**」となっていたのです。TwitterカードのBotは当然海外からのアクセスですので、設定を読み込むことができなかったのです。海外アクセスを許可するようサーバーを設定しなおしたら問題なく表示されるようになりました。 もし、どうしても表示されない場合はサーバーの設定も疑ってみてください。