twitterカードの画像が表示されなければこれを試してみて！

Log in to Twitter to see the latest. Join the conversation, follow accounts, see your Home Timeline, and catch up on Tweets from the people you know.

で動作チェックしてみたけど、エラーは出ない。しかし、画像が表示されない。

そんなあなたへ！

原因は色々あると思いますが、私の例での解決策をシェアします。

失敗例と成功例

失敗例

<meta name="twitter:image" content="img/twitter.png">

成功例

<meta name="twitter:image" content="https://doko-tabi.com/img/twitter.png">

解説

普段できているTwitterカードの設定が問題なくできているこのWordPressで出力されたコードを参考に解決しました。

Twitterが外部のwebサイトとして読み込むので、httpから始まるURLで記述するのが正しいようです。

サンプル

小さいカードタイプでの例です。
画像のサイズは144×144です。

大きいカードにするには１行目の「summary」という部分を「summary_large_image」に変更してください。
その場合の画像サイズは600×314がいいでしょう。

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="どこ旅">
<meta name="twitter:description" content="気温や飛行時間から海外旅行先を探すことができます。「暖かい国に行きたい！」や「涼しい国に行きたい！」から海外旅行の行き先を絞り込むことが可能！">
<meta name="twitter:image" content="https://doko-tabi.com/img/twitter.png">