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

Twitterへようこそ。ログインして通知をチェックしたり、会話に参加したり、フォローしているユーザーの最近のツイートを見てみましょう。

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

そんなあなたへ！

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

失敗例と成功例

失敗例

<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">